更改Highcharts系列颜色

Question

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

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

- MacD

Answer 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

};

- Ethan Wu

---

相同的结果.. 改变所有颜色。谢谢你的帮助！ - MacD

对于系列中的不同数据集对象，您需要使用不同的颜色代码。 - Ethan Wu

Answer 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
 };

- AzadMemon

---

好的，我试了一下，它让我的图表消失了。不过我会继续尝试的。谢谢你的帮助！ - MacD

'#0066HH'？'HH' 真的吗？！？他们什么时候开始在颜色代码中支持 HH 了？！ - Harry Joy

@Harry Joy 在 GG 之后)) - Oleksandr IY

Answer 3

我觉得您没有循环遍历数据数组，或者只有一个数据集在 data 中。

- wergeld

---

我认为你是正确的，可能只有一个数据集。我能把它分成多个数据集吗？ - MacD

如果您只有一条数据，则为一个“系列”。但是，您可以拥有多个数据系列。例如：series: {name: name1, data: data1, color: color1}, {name: name2, data: data2, color: color2}...} - wergeld