Question

我正在使用hightcharts.js来生成图表。我想在图表上显示最多2个系列的3个可用。如果单击图例上的隐藏项，则其他项将变为不可见。如何在函数js中执行此操作？

$(function () {
        $('#container').highcharts({
            chart: {
                type: 'line',
                backgroundColor: '#c5c5c5'
            },
            xAxis: {
                categories: ['Sep', 'Oct', 'Nov', 'Dec']
            },
            yAxis: {
                title: {
                    text: 'Profit'
                }
            },
            plotOptions: {
                line: {
                    dataLabels: {
                        enabled: true
                    },
                    enableMouseTracking: true
                }
            },

            legend: {
                align: 'right',
                verticalAlign: 'top',
                layout: 'vertical',
                y: 60,
                itemStyle: {
                    'color': '#333',
                    'font-size': '18px'
                },
                itemHiddenStyle: {
                    color: '#a6a6a6'
                }
            },

            credits: {
                enabled: false
            },
            series: [{
                name: 'Win Rate',
                data: [58, 56, 43, 52],
                color: '#0c0c0a'
            },{
                name: 'Yield',
                data: [25, 20, 9, 10],
                color: '#818181'
            }, {
                name: 'Profit',
                data: [143, 115, 39, 45],
                color: '#ff0000'
            }]
        });

        var chart = $('#container').highcharts();
        var series = chart.series;
        //function which will show max 2 items on charts
    });

Answer 1

legendItemClick事件可让您控制通过图例打开或关闭系列时发生的情况。为了让它们总是关闭一个，当要求关闭其他系列时，将其他系列重新打开。

http://jsfiddle.net/zbLmL7u2/

plotOptions: {
  series: {
    events: {
      legendItemClick: function() {
        //if the item they clicked on is disabled, don't do anything
        if (!this.visible) return false;
        else {
            // enable any disabled series and then let highcharts do its thing
          for (var i=0;i< this.chart.series.length;i++)
          {
            this.chart.series[i].show();
          }
        }

      }
    }
  },

最高2系列在hightcharts.js中可见

1 个答案: