为什么不活动的选择不在散点高盘上工作

Question

我已经尝试在图表中显示不活动的设置。但是它没有在我的项目中显示{它在另一个实时编辑器上工作}

图表库：HighCharts 图表类型：散点图

版本： “ HighCharts”：“^6.1.1”， “ HighCharts-More”：“^0.1.7”，“ HighCharts-ReactiCtial”：“^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
},

};'

这是我的完整配置

Answer 1

您正在使用6.1.1版本，但intactive选项可从7.1.0 https://www.highcharts.com/blog/changelog/#highcharts-v7.1.0 。
我建议始终使用最新的Highcharts版本。
因此，您要做的就是在项目中设置“ HighCharts”：“最新”。

如果由于某种原因需要使用较旧版本，请使用MouseVover和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/blacklabel/zgjsof7l/

>
https://api.highcharts.comcoms.comcom/highcharts.com/highcharts/plotoptions.series.series.events.events.events.events.events.events.events.events.events.events。鼠标