Question

我有一个折线图，可以在这个小提琴上看到http://jsfiddle.net/qjmjd34d/5/

使用此代码：

Highcharts.chart('container', {
    plotOptions: {
        series: {
            color: 'purple'
        }
    },

    series: [{
    data: [{x: 1, y: 435, color:'blue'},
           {x: 2, y: 437, color:'blue'}, 
           {x: 3, y: 455, color:'blue'}, 
           {x: 4, y: 475, color:'blue'}, 
           {x: 5, y: 555, color:'blue'},
           {x: 6, y: 435, color:'blue'}]
    }]
});

修改点的颜色是遗忘的，但如何更改它们之间的线条颜色呢？

假设我希望小提琴上给定示例中的行仅在x = 3和x = 5之间为绿色 - 这怎么可能？

Answer 1

要为图表的一部分着色，您可以使用zones。

如果你在上面的系列中包含它，它会将3到5个红色。

zoneAxis: 'x',
zones: [{value: 3}, {value: 5, color: 'red'}]

区域的工作方式是将着色到 value。这意味着我们必须制作一个值为3的元素，并且没有颜色可以传递给其他地方设置的颜色。因此，值为5的元素将从3到5进行着色。

工作示例： http://jsfiddle.net/qjmjd34d/6/

关于series.line.zones的API： https://api.highcharts.com/highcharts/series.line.zones

Highcharts - 更改点之间的线条颜色

1 个答案: