Question

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

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

默认显示所有行，但未选择任何行
在选择时，所选线条的风格更加突出，但另一条线条仍然可见

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

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

Answer 1

您可以使用showInLegend: false创建阴影系列隐藏包含图例的原始系列，可以通过点击图例来启用。

实例： https://jsfiddle.net/u8n1twdf/

＆＃13;

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)

＆＃13;

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

＆＃13;

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

1 个答案: