Question

我正在尝试创建一个小提琴，模拟附加的图像 enter image description here

跟随jsfiddle

问题是我想要蓝线和绿柱之间的plotLines。我尝试在后面的小提琴中更改plotLines（10）的zIndexes，蓝线（15）和绿柱（5）之间 http://jsfiddle.net/2TuCW/163/

//plotLines zIndex
"plotLines" : [
        {
            "color": '#E5E7EB',
            "zIndex": 10,
            "width":    2,
            "value": 20 

        },

....
....
//Series data z-index 
    "series": [{
        "type":"column",
        "data": [35,39,49,50,57,58],
        "zIndex":5 
        ....
        ....
    "series": [{
        "type":"line",
        "data": [35,39,49,50,57,58],
        "zIndex":15

但它没有按预期工作。请建议如何实现它。

Answer 1

事实上，所有系列都具有相同的zIndex。

相关主题：https://github.com/highslide-software/highcharts.com/issues/3321

Answer 2

尝试调整plotLines的值。

如果您希望绘图线位于蓝线和绿列之间，则plotLines的值必须介于蓝线数据和列数据之间。

Answer 3

不幸的是，plotLines似乎可以位于所有系列之前或所有系列之后。这是因为所有系列都归为一个共同的元素。 plotLine元素是group元素的兄弟元素，而不是单个元素元素的兄弟元素。

Answer 4

此问题与以下事实有关：所有系列均绘制在同一组中，因此具有与其他组相关的相同z-index。 A related 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问题。

Highchart plotLines z系列z索引之间的索引

4 个答案: