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

Question

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

有没有办法来改变/反转此行为，以便：

• 所有行默认情况下显示，但没有被选中
• 在选择时，所有线条变得更加突出的风格，但在其他仍然可见

在Highcharts的语言，我想我在寻找一个选项，不选系的风格，一样的东西：

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

Answer 1

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

直播例如： https://jsfiddle.net/u8n1twdf/

const origColors = Highcharts.getOptions().colors 
 

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

 
const options = { 
 
\t chart: { 
 
    \t events: { 
 
    \t load() { 
 
     \t const chart = this 
 
     \t const series = this.series 
 
     \t series.forEach((s, i) => { 
 
     \t 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: [{ 
 
    \t name: 's1', 
 
    \t showInLegend: false, 
 
    data: [...Array(5)].map(Math.random) 
 
    }, { 
 
    \t name: 's2', 
 
    \t showInLegend: false, 
 
    data: [...Array(5)].map(Math.random) 
 
    }, { 
 
    \t name: 's3', 
 
    \t 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>