Question

我在我的图表中渲染了多个系列，但我无法弄清楚如何更改每个系列的名称或其他属性。图例只有系列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

任何帮助将不胜感激！

由于

Answer 1

要在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 
        });

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

1 个答案: