Question

我有两个系列-一个是区域范围，另一个是行。我想在arearange上方但在该线下方显示一条绘图线。我不知道该怎么做。

一个实时示例位于http://1212.one/-单击团队名称以显示图表。我希望“ PLAYOFFS”绘图线显示在灰色区域范围上方，但保持在该线下方。

有可能吗？谢谢！

Answer 1

此问题与以下事实有关：所有系列均绘制在同一组中，因此具有与其他组相关的相同z-index。有关讨论和代码示例，请参见this GitHub issue。

请参见TorsteinHønsi（Highcharts创作者）提出的this one example solution。我进行了修改，minimal, reproducible example here：

/**
 * Plugin to allow plot band Z indexes in between series
 */
Highcharts.wrap(Highcharts.PlotLineOrBand.prototype, 'render', function (proceed) {
    var chart = this.axis.chart;

    proceed.call(this);

    if (!chart.seriesGroup) {
        chart.seriesGroup = chart.renderer.g('series-group')
            .attr({ zIndex: 3 })
            .add();
    }

    if (this.svgElem.parentGroup !== chart.seriesGroup) {
        this.svgElem
            .attr({ zIndex: this.options.zIndex })
            .add(chart.seriesGroup);
    }
    return this;
});

Highcharts.chart('container', {
    xAxis: {
        plotLines: [{
            color: 'red',
            width: 2,
            value: 3.5,
            zIndex: 10
        }]
    },
    series: [{
        data: [7988, 12169, 15112, 22452, 34400, 34227],
        zIndex: 9
    }, {
        data: [8105, 11248, 8989, 11816, 18274, 18111],
        zIndex: 11
    }]
});

代码使用Torsteins插件在系列之间允许绘图线。有关注意事项和潜在改进的讨论，请参见GitHub问题。

将绘图线放置在一个系列的上方，但在另一个系列的下方

1 个答案: