更改高图表系列颜色

Change Highcharts Series color

本文关键字：颜色 系列 高图表      更新时间：2023-09-26

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

原文：我这里有一个工作高图表 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');
});

试试这个：

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

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

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
 };
在我看来

，您没有循环访问数据数组和/或您data中只有一组数据。

相关文章：