时间戳

首页 > 解决方案 > 任何可能为绘图带和绘图线高图表提供图例

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

问题描述

我需要为图带提供单个图例项，为样条高图中的图线提供多个图例项。参考这个例子：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)
    }],
},

标签： javascripthighcharts

解决方案

最简单的解决方案是创建额外的空系列，它将以编程方式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

推荐阅读