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

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