高图-更改点之间的线颜色 [英] Highcharts - Change line color between points

问题描述

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

I have a line chart graph as can be seen on this fiddle 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'}]
    }]
});

修改点的颜色是忽略不计的，如何改变它们之间的线的颜色?

Modifying the color of the points is oblivious however, how is it possible to change the color of the line between them?

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

Suppose I want the line in the given example on the fiddle to be green only between x = 3 and x = 5 - how is that possible?

推荐答案

要为图形的一部分上色，可以使用zones.

To color part of the graph, you can use zones.

如果将其包含在系列中，则其上方的颜色将为3到5红色.

If you include this in the series you have above it will color 3 to 5 red.

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

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

Zones work by coloring up to value. That means that we have to make one element with value 3 and no color to pass on whatever color is set elsewhere. The element with value 5 will therefore color from 3 to 5.

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

series.line.zones上的API : https://api.highcharts.com/highcharts/series.line.zones

这篇关于高图-更改点之间的线颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！