如何根据高图的值获得动态的颜色变化

Question

我正在尝试使用高位图表绘制图形。 我需要根据标志值更改颜色。

我尝试使用此方法，但是我仅获得根据标记更改的点，但没有使线变色。

这是我的代码。

$(function () {
var getColor = {'g' : '#008000',
            'r' : '#FF0000',
            'b' : '#000000'};
$('#container').highcharts({
    title: {
        text: 'Monthly Average Temperature',
        x: -20 //center
    },
    subtitle: {
        text: 'Source: WorldClimate.com',
        x: -20
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
            'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },
    yAxis: {
        title: {
            text: 'Temperature (°C)'
        },
        plotLines: [{
            value: 0,
            width: 1,
            color: '#808080'
        }]
    },
    tooltip: {
        valueSuffix: '°C'
    },
    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle',
        borderWidth: 0
    }, series: [{
        name: 'London',
        data: [{y:3.9,flag:0,color:'#000000'},{y:4.2,flag:0,color:'#000000'},{y:5.7,flag:1,color:'#008000'},{y:8.5,flag:0,color:'#000000'},{y:11.9,flag:0,color:'#000000'},{y:15.2,flag:0,color:'#000000'},{y:17.0,flag:0,color:'#000000'},{y:16.6,flag:0,color:'#000000'},{y:14.2,flag:2,color:'#ff0000'},{y:10.3,flag:0,color:'#000000'},{y:6.6,flag:1,color:'#008000'},{y:4.8,flag:2,color:'#ff0000'}]
    }]
}/*,function(chart){
$.each(chart.series[0].data,function(i,data){

    if(data.flag == 0){
    console.log('green');
    color : getColor['g']}
    if(data.flag ==1){
    console.log('black');
    color : getColor['b']}
    if(data.flag == 2){
    console.log('red');
    color : getColor['r']}
    });

}*/);
 });

请帮帮我。 需要获得与点一起的彩色线..我没有得到我做错的地方，请帮助我。

Answer 1

您可以使用Multicolor系列插件 ，例如： http : //jsfiddle.net/sz0esszz/11/

只需将系列的类型更改为coloredline并为每个点设置segmentColor ，即可定义当前点和下一个点之间的线色。