任何可能为绘图带和绘图线高图提供图例

Question

I need to give the single legend item for plot band and multiple legend items for plot lines in spline highcharts. Refer to this example: 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

The simplest solution is to create additional empty series, which will be programmatically realted to plotLines and plotBands in legendItemClick function:

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
                    });
                }
            }
        }
    }
}

Live demo: https://jsfiddle.net/BlackLabel/omn6fr2e/

API Reference: https://api.highcharts.com/highcharts/series.line.events.legendItemClick