Question

我需要在样条高图中为绘图带提供单个图例项，为绘图线提供多个图例项。请参考以下示例：https://jsfiddle.net/t98L5w7s/5/

xAxis: {
    ...,
    plotBands: [{
        from: Date.UTC(2018, 11, 25),
        to: Date.UTC(2019, 1, 28),
        color: 'rgba(68, 170, 213, .2)' //No I18N
    }],
    plotLines: [{
        color: '#FF0000',
        width: 2,
        value: Date.UTC(2019, 00, 18)
    }, {
        color: '#FF1100',
        width: 2,
        value: Date.UTC(2019, 00, 21)
    }, {
        color: '#FF2200',
        width: 2,
        value: Date.UTC(2019, 00, 28)
    }],
},

Answer 1

最简单的解决方案是创建其他空系列，这些空系列将以编程方式实现为plotLines函数中的plotBands和legendItemClick：

plotOptions: {
    ...,
    series: {
        allowPointSelect: false,
        events: {
            legendItemClick: function() {
                var newPlotLines = [],
                    xAxis = this.chart.xAxis[0],
                    plotLinesIndex;

                if (this.name === 'plot bands') {
                    if (this.visible) {
                        xAxis.update({
                            plotBands: []
                        });
                    } else {
                        xAxis.update({
                            plotBands: plotBands
                        });
                    }
                } else if (H.isNumber(this.options.plotLinesIndex)) {
                    this.chart.series.forEach(function(s) {
                        plotLinesIndex = s.options.plotLinesIndex;

                        if (this !== s && H.isNumber(plotLinesIndex)) {
                            if (s.visible) {
                                newPlotLines.push(plotLines[plotLinesIndex])
                            }
                        } else if (this === s && !s.visible) {
                            newPlotLines.push(plotLines[plotLinesIndex])
                        }
                    }, this);

                    xAxis.update({
                        plotLines: newPlotLines
                    });
                }
            }
        }
    }
}

实时演示：https://jsfiddle.net/BlackLabel/omn6fr2e/

API参考：https://api.highcharts.com/highcharts/series.line.events.legendItemClick

任何可能给图带和图线高图表的图例

1 个答案: