HighCharts 为系列的每一列添加一个 multi-select 下拉菜单

Question

我正在 Highcharts 中制作一张股票图表，其中包含股票市场中 assets/indices 的几张图表。我正在从我的 google 工作表中获取我的数据，这里是 link to my Google sheets. I wanted to add a dropdown multi-select button like in this link，这样我就可以 select 在不同的 assets/indices 之间进行显示，通过 [=28] =].

下面是我的代码：

$(function() {
  Highcharts.stockChart('container',{
    rangeSelector:{
      enabled:true,
      selected: 0
    },
    legend: {
      enabled: true,
    },
    plotOptions: {
      series: {
          compare: 'percent',
          showInNavigator: true
      }
    },
    tooltip: {
      pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>',
      valueDecimals: 2,
      split: true
    },
    yAxis: {
      labels: {
          formatter: function () {
              return (this.value > 0 ? ' + ' : '') + this.value + '%';
          }
      },
      plotLines: [{
          value: 0,
          width: 2,
          color: 'silver'
      }]
    },
    chart: {
      type: 'line'
    },
    title: {
      text: 'Stock Price Changes (%)'
    },
    data: {
      googleSpreadsheetKey: '17icMNXVf1vH_1bhwHxR_-mpAnTgd4dGyvxiz4A8VCDc',
      startColumn: 0,
      endColumn: 5,
    },
    series: [{
      name: 'BTC-EUR'
    },{
      name: 'Gold-Futures'
    },{
      name: 'S&P-500'
    }
  ]
  });
  
});
var checkboxes = ['series1', 'series2', 'series3']

checkboxes.forEach((elem, i) => {
        var checkbox = document.getElementById(elem)
    checkbox.onchange = function() {
            chart.series[i].update({
                showInLegend: chart.series[i].legendItem ? false : true
        })
        chart.series[i].setVisible()
    }
})

    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="https://code.highcharts.com/stock/highstock.js"></script>
    <script src="https://code.highcharts.com/stock/highcharts-more.js"></script>
    <script src="https://code.highcharts.com/stock/modules/data.js"></script>
    <script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
    <div id="container" style="min-width: 310px; max-width: 1000px; height: 600px; margin: 0 auto"></div>
    <input id="series1" type="checkbox" checked>BTC-EUR<br/>
    <input id="series2" type="checkbox" checked>Gold-Futures<br/>
    <input id="series3"type="checkbox" checked>SP-500<br/>

我希望每一列都是一个单选按钮或 selectable 以便我能够轻松地分析股票的变化。我将不胜感激任何帮助，谢谢！

Answer 1

我认为更新 series.visible 就足以实现它：

 checkboxes.forEach((elem, i) => {
   var checkbox = document.getElementById(elem)
   checkbox.onchange = function() {
     chart.series[i].update({
       visible: !chart.series[i].visible
     })
   }
 })

演示：https://jsfiddle.net/BlackLabel/pbxt9yqa/

API: https://api.highcharts.com/highcharts/series.line.visible

API: https://api.highcharts.com/class-reference/Highcharts.Series#update

HighCharts 为系列的每一列添加一个 multi-select 下拉菜单

HighCharts adding a multi-select dropdown for each column of a series

javascript

highcharts