javascript 更改 Highcharts 系列颜色

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/19865762/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-27 17:04:44  来源:igfitidea点击:

Change Highcharts Series color

javascripthighcharts

提问by MacD

EDIT: So now I have a chart with all my data pushed off to the right, BUT I have labels in different colors for the sets I want to show but no data?? Updated my code

编辑:所以现在我有一个图表,我的所有数据都被推到了右边,但我有不同颜色的标签,我想显示但没有数据?更新了我的代码

Original post: I have a working highchart here http://opensourcesurf.com/chart.html. The problem is when I try and change the color of an individual data set, they all change. How could I change these settings given my code? Thanks in advance!

原帖:我在这里有一个工作 highchart http://opensourcesurf.com/chart.html。问题是当我尝试更改单个数据集的颜色时,它们都会更改。给定我的代码,我该如何更改这些设置?提前致谢!

code:

代码:

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

回答by Ethan Wu

Try this:

试试这个:

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

};

回答by AzadMemon

The way to specify a color for a specific series is to define it when you're defining the series. For example:

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

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]
        ]
    },

So essentially when you're creating your series in your drawchart function, do a check for the name, and appropriately assign a color:

所以基本上当你在你的绘图功能中创建你的系列时,检查名称,并适当地分配一种颜色:

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

回答by wergeld

It looks to me like you are not looping through the array of data and/or you only have one set of data in data.

在我看来,您没有遍历数据数组和/或您在data.