Highcharts：单击以突出显示而不是隐藏（= 始终显示未选中）

Question

当在例如 Highcharts 折线图中有 多个系列 时，默认行为是在单击其图例项时隐藏系列。

有没有办法改变/反转这种行为，以便：

• 默认显示所有行，但未选择任何行
• 选择时，所选线条的样式更加突出，但其他线条保持可见

在 Highcharts 的语言中，我想我正在寻找一个选项来设置非选定行的样式，例如：

states : {
   nonselected : {
       visible : true,
       opacity : 0.6
   }
}

Answer 1

您可以使用showInLegend: false create shadow series 隐藏图例中的原始系列，可以通过单击图例启用。

现场示例： https://jsfiddle.net/u8n1twdf/

const origColors = Highcharts.getOptions().colors

const colors = origColors.map((color) => {
	const c = Highcharts.color(color)
  c.setOpacity(0.2)
  return c
})

const options = {
	chart: {
  	events: {
    	load () {
      	const chart = this
      	const series = this.series
      	series.forEach((s, i) => {
        	if (i < 3) s.update({ color: colors[i].get() })
          else s.update(Object.assign({ data: chart.options.series[i - 3].data, color: origColors[i - 3] }))
        })
      }
    }
  },
  series: [{
  	name: 's1',
  	showInLegend: false,
    data: [...Array(5)].map(Math.random)
  }, {
  	name: 's2',
  	showInLegend: false,
    data: [...Array(5)].map(Math.random)
  }, {
  	name: 's3',
  	showInLegend: false,
    data: [...Array(5)].map(Math.random)
  }, { name: 's1', visible: false }, { name: 's2', visible: false }, { name: 's3', visible: false }]
}

const chart = Highcharts.chart('container', options)

<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container"></div>