更改Highcharts中的系列名称和颜色

Changing Series Name and Color in Highcharts

本文关键字：颜色 系列 Highcharts 更改      更新时间：2023-11-07

我在图表中呈现了多个系列，但我不知道如何更改每个系列的名称或其他属性。传说中只有系列1、系列2和系列3。

这是我的代码：

 <script type="text/javascript">
$(function() {
    $.getJSON('decodeseries.php', function(data) {
        // Create the chart
         $('#container').highcharts({
            chart: {
                type: 'area'        
            },
            yAxis: {title: {text: 'Wave Height ( In Ft )'}},
            xAxis: {type: 'datetime'},
            title : {
                text : '5 Day Forecast'
            },

            series: data [{
                name: 'Location 1',
                data: data
            }, {
                name: 'Location 2',
                data: data

            }, {
                name: 'Location 3',
                data: data

            }]
        });
    });
});
        </script>

JSon:

[{"data":[[1385510400000,0.88],[1385521200000,0.722]]},
{"data":[[1385510500000,0.98],[1385521400000,0.752]]},
{"data":[[1385510600000,1.88],[1385521500000,0.792]]}]

这实际上并没有显示图表，但这是我迄今为止一直在尝试的。当我简单地使用以下内容时，该图表可以与上面的JSON一起使用：

series: data

任何帮助都将不胜感激！

感谢

要在data元素中设置数据序列的颜色/名称，需要为其提供这些属性。据我所知，data JSON实际上由3个系列的数据组成：

[
{"data":[[1385510400000,0.88],[1385521200000,0.722]]},
{"data":[[1385510500000,0.98],[1385521400000,0.752]]},
{"data":[[1385510600000,1.88],[1385521500000,0.792]]}
]

我会把它（不管它是怎么做的）改为：

[
{"name":"Location 1", "color": "acolor", "data":[[1385510400000,0.88],[1385521200000,0.722]]},
{"name":"Location 2", "color": "anothercolor", "data":[[1385510500000,0.98],[1385521400000,0.752]]},
{"name":"Location 3", "color": "yetanothercolor", "data":[[1385510600000,1.88],[1385521500000,0.792]]}
]

你上面的图表代码没有呈现，因为你正在做：

    series: data [{
        name: 'Location 1',
        data: data
    }, {
        name: 'Location 2',
        data: data
    }, {
        name: 'Location 3',
        data: data
    }]

并且它试图将data中的data属性分配给series.data，这是无效的。从本质上讲，你的意思是让3个系列中的每一个。data=series.data.data.

使用我上面的例子做一些类似的事情：

$('#container').highcharts({
            chart: {
                type: 'area'        
            },
            yAxis: {title: {text: 'Wave Height ( In Ft )'}},
            xAxis: {type: 'datetime'},  
            title : {
                text : '5 Day Forecast'
            },
            series: data 
        });
相关文章：