ハイチャート：非表示の代わりにハイライト表示する（=常に非表示にする）

Question

複数のシリーズなどをHighcharts Line Chartに設定すると、デフォルトの動作で系列を非表示にすることができます。

ようにこの動作を反転/変更する方法があります：すべての行がデフォルトで表示されているが、どれが選択に

を選択されていない

• 、選択したラインがより顕著なスタイルを取得しますが、しかし、

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

  ：他のHighcharts'言語で表示さ

まま、私は、私は非選択ラインのスタイルを設定するためのオプションを探しているようなものだと思います

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>