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

how to get dynamic color change based on values in highcharts

本文关键字:动态 颜色 变化 何根 高图中      更新时间:2023-09-26

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

我试过用这个,但我只得到了根据国旗变化的分数,但我没有给线上色。

这是我的密码。

$(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']}
    });
}*/);
 });

请帮帮我。需要把彩色线和点一起画出来。。我没有做错什么,请帮帮我。

您可以使用多色系列插件,例如:http://jsfiddle.net/sz0esszz/11/

只需将级数的类型更改为coloredline,并为每个点设置segmentColor,它定义当前点和下一点之间的线颜色。