highcharts 为什么非活动选项在散点图上不起作用

kuarbcqp 于 2022-11-10 发布在 Highcharts

关注(0)|答案(1)|浏览(170)

我已尝试在图表中显示非活动设置。但它未在项目中显示{它已在另一个实时编辑器中工作}
图表库：图表类型：散布
图表版本：“ highcharts ”：“^6.1.1”，“高排行榜-更多”：“^0.1.7”，“高排行榜-React-官方”：“^3.1.0”，

``const config = {
chart: {
  zoomType: 'x',
  type: 'scatter',
  height: 400,
  spacingLeft: 0,
  spacingRight: 0,
  spacingTop: 0,
  spacingBottom: 0,
  margin: [30, 50, 80, 180],
  width: null,
  style: {
    fontFamily: 'Fira Sans'
  },
},
title: {
  text: '',
},
subtitle: {
  text: '',
},
xAxis: {
  type: 'datetime',
  ordinal: false,
  startOnTick: false,
  endOnTick: false,
  minPadding: 0,
  maxPadding: 0,
  Date: false,
  tickInterval: 3600 * 4000,
  minTickInterval: 3600 * 100,
  minRange: 1000 * 60 * 60,
  dateTimeLabelFormats: {
    minute: '%I:%M',
    hour: '%I %P',
  },
  offset: 0,
},
yAxis: [
  {
    title: {
      text: 'Part A',
      align: "high",
      textAlign: "right",
      rotation: 0,
      offset: 0,
      margin: 0,
      y: -10,
      x: -15,
      style: {
        fontWeight: 500,
        fontSize: '14px',
        lineHeight: 20,
        color: "#333333",
      },
    },
    labels: {
      style: {
        fontWeight: 300,
        fontSize: '14px',
        lineHeight: 16,
        color: "#333333",
        letterSpacing: 0,
      },
      y: 3,
      align:'right',
    },
    categories: ['', 'B1', 'B2', '', 'A1', 'A2', 'A3', ''],
  },
  {
    title: {
      text: 'Part B',
      align: "middle",
      textAlign: "right",
      rotation: 0,
      offset: 0,
      margin: 0,
      y: 30,
      x: 25,
      style: {
        fontWeight: 500,
        fontSize: '14px',
        lineHeight: 20,
        color: "#333333",
      },
    },
  },
],
plotOptions: {
  column: {
    stacking: 'normal',
    column: {
      pointPadding: 0,
      borderWidth: 0,
      groupPadding: 0,
      grouping: true,
    }
  },
},
series: [
  {
    "name": "Poor",
    "data": [[1.424304e+12, 1], [1.4243076e+12, 2], [1.4243148e+12, 1], [1.4243301e+12, 1], [1.4243364e+12, 6]],
    color: '#FF8A45',
    marker: {
      symbol: 'square'
    },
  },
  {
    "name": "Fair",
    "data": [[1.424304e+12, 6], [1.4243112e+12, 1], [1.4243292e+12, 2], [1.4243436e+12, 2], [1.4243616e+12, 2]],
    color: '#FFC100',
    marker: {
      symbol: 'square'
    },
  },
  {
    "name": "Moderate",
    "data": [[1.4243616e+12, 4], [1.4243436e+12, 4], [1.4243112e+12, 4], [1.424304e+12, 4], [1.4243292e+12, 6]],
    color: '#B7DCFD',

    marker: {
      symbol: 'square'
    },
  },
  {
    "name": "Good",
    "data": [[1.424304e+12, 5], [1.4243112e+12, 5], [1.4243292e+12, 5], [1.4243436e+12, 5], [1.4243616e+12, 6]],
    color: '#00C96A',
    marker: {
      symbol: 'square'
    },
  },
],
credits: {
  enabled: false
},

};``
这是我的hoghchart的完整配置

highcharts

来源：https://stackoverflow.com/questions/72489403/why-inactive-option-not-working-on-scatter-highcharts

1条答案

按热度按时间

4smxwvx51#

您使用的是6.1.1版本，但是inactive选项可以从7.1.0 www.example.com获得https://www.highcharts.com/blog/changelog/#highcharts-v7.1.0。我建议您始终使用最新的highcharts版本。因此，您所要做的就是在项目中设置"highcharts": "latest"。
如果出于某种原因需要使用较旧的版本，请使用mouseOver和mouseOut事件来更改悬停时的系列颜色。

plotOptions: {
    series: {
      events: {
        mouseOver: function() {
          let hoveredSeries = this;
          let allSeries = this.chart.series;
          allSeries.forEach(series => {
            if (series === hoveredSeries) {
              return true
            } else if (series.name === 'A') {
              series.update({
                color: 'rgba(0, 155, 0, 0.5)',
              })
            } else if (series.name === 'B') {
              series.update({
                color: 'rgba(255, 0, 0, 0.5)'
              })
            }

          })
        },
        mouseOut: function() {
          let hoveredSeries = this;
          let allSeries = this.chart.series;
          allSeries.forEach(series => {
            if (series === hoveredSeries) {
              return true
            } else if (series.name === 'A') {
              series.update({
                color: 'rgba(0, 155, 0, 1)',
              })
            } else if (series.name === 'B') {
              series.update({
                color: 'rgba(255, 0, 0, 1)'
              })
            }
          })
        }
      }
    }
  },

示例演示：https://jsfiddle.net/BlackLabel/zgjsof7L/
API引用：https://api.highcharts.com/highcharts/plotOptions.series.events.mouseOver

赞(0）回复(0）举报 2022-11-10

我来回答

highcharts 为什么非活动选项在散点图上不起作用

1条答案

相关问题

热门标签

最新问答