更改 Highcharts 系列颜色

Posted 2023-03-14

【中文标题】更改 Highcharts 系列颜色

【英文标题】：Change Highcharts Series color

【发布时间】：2013-11-08 18:12:35

【问题描述】：

编辑： 所以现在我有一个图表，我的所有数据都推到了右边，但是我有不同颜色的标签，用于我想显示的集合但没有数据？更新了我的代码

原帖： 我在这里有一个工作高图 http://opensourcesurf.com/chart.html 。问题是当我尝试更改单个数据集的颜色时，它们都会发生变化。给定我的代码，如何更改这些设置？提前致谢！

代码：

    var options1 = 
    chart: 
        renderTo: 'container1',
        type: 'area'

        ,
    xAxis: 
                type: 'datetime'

    ,

    series: [
        name: 'Swell Period',
        color: '#0066FF',
        data: 'newSeriesData',
    ,
       name: ' Maximum Breaking Wave Height',
        color: '#ffffff',
        data: 'newSeriesData',
    ,
       name: 'Swell Height',
        color: '#123456',
        data: 'newSeriesData',
    ],
;

var drawChart = function(data, name, color) 



 var newSeriesData = 
    name: name,
    data: data
 ;

    // Add the new data to the series array
    options1.series.push(newSeriesData);

    // If you want to remove old series data, you can do that here too

    // Render the chart
    var chart = new Highcharts.Chart(options1);



;
$.getJSON('decode.php', function(data)
    drawChart(data, 'Swell Height');
); 

$.getJSON('decode2.php', function(data)
    drawChart(data, ' Maximum Breaking Wave Height');
);

$.getJSON('decode3.php', function(data)
    drawChart(data, 'Swell Period');
);

【参考方案1】：

试试这个：

// 'series' is an array of objects with keys: 
//     - 'name' (string)
//     - 'data' (array)
//     - 'color' (HTML color code)
var newSeriesData = 
    name: name,
    data: data,
    color: color

;

【讨论】：

相同的结果.. 更改所有颜色。感谢您的帮助！

@user2883183 对于不同的数据集对象，需要使用不同的颜色代码。

【参考方案2】：

为特定系列指定颜色的方法是在定义系列时定义它。例如：

series: [
        name: 'John',
        color: '#0066FF',
        dashStyle: 'ShortDash',
        data: [
            [Date.UTC(2010, 0, 1), 29.9],
            [Date.UTC(2010, 2, 1), 71.5],
            [Date.UTC(2010, 3, 1), 106.4]
        ]
    ,

因此，本质上，当您在绘图函数中创建系列时，请检查名称并适当地分配颜色：

var color;
 if(name=="Swell Height")
     color="#0066FF";
 else if(name=="Maximum Breaking Wave Height")
     color="#0066EE";
 else if(name=="Swell Period")
     color="#0066HH";
 

 var newSeriesData = 
    name: name,
    data: data,
    color: color
 ;

【讨论】：

好的，试过了，结果我的图表掉了。我会继续玩它的。感谢您的帮助！

'#0066HH'？ ‘HH’真的！？！他们什么时候开始在颜色代码中支持 HH？！

@Harry Joy after GG ))

【参考方案3】：

在我看来，您没有遍历数据数组和/或您在 data 中只有一组数据。

【讨论】：

我认为你是对的，可能只是一组数据。我可以把它分成多组吗？

如果你只有一“行”数据，那就是series。不过，您可以拥有多个系列的数据。类似series: name: name1, data: data1, color: color1, name: name2, data: data2, color: color2...