如何根据highcharts中的值获得动态颜色变化答案

【问题标题】：how to get dynamic color change based on values in highcharts如何根据highcharts中的值获得动态颜色变化
【发布时间】：2023-03-14 12:07:01
【问题描述】：

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

我尝试使用它，但我只得到基于标志更改的点，但我没有让线条着色。

这是我的代码。

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

}*/);
 });

请帮帮我。需要得到彩色线和点..我没有找到我做错的地方，请帮助我。

【问题讨论】：

你必须像使用标志一样使用颜色，data.color = someColor 而不是color
基于标志我需要更改颜色。但我得到的只有点是彩色的，但不是线
哎呀，对不起。但是你想要这条线是什么颜色的？如果绿点连接到红点，连接它们的线应该是什么颜色？
在高位图表中，我们有区域......基于区域，我们将改变颜色。我的要求是，当基于标志的标志 0、1、2 时，区域颜色应该改变。如果 flag==0 那么我应该得到绿色，如果 flag==1 是黑色，否则我应该得到红色。
那么您需要在系列对象中定义区域数组。喜欢here。

标签： javascript jquery json highcharts

【解决方案1】：

您可以使用Multicolor series plugin，例如：http://jsfiddle.net/sz0esszz/11/

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

【讨论】：

当我将鼠标悬停在一个点上时，我看到的颜色是该系列的默认颜色。如何显示点颜色而不是系列颜色？
使用marker.states.hover.fillColor。见（第一点）：jsfiddle.net/sz0esszz/13
是否有一种内置方法可以告诉 highcharts 使用点颜色作为填充颜色，而无需为系列中的每个点定义标记对象？
这被报告为 Highcharts here 中的错误。您可以使用解决方法：jsfiddle.net/sz0esszz/14
segmentColor不能动态发送？？像这样才是正确的方式 var x = (new Date()).getTime(), // 当前时间 y=Math.round($scope.predictiveData[$scope.index1++].value), color='#000000 ', 段颜色 = '#000000'; series2.addPoint([x, y],true, true);