如何将 json 数据传递给 highcharts 系列？

Question

我有以下 json 数组，它是在运行时生成的。因此 name/data 对的数量不同。

`var sales = { "SalesData" : [ 
{ "name"  : "AllProducts|Canada", "data" :[44936.0,50752.0] },
{ "name"  : "AllProducts|Mexico", "data" : [200679.0,226838.0] },
{ "name"  : "AllProducts|USA",    "data" : [288993.0,289126.0] }
                    ]}    `

我想将此数据传递给 highcharts 中的系列。

这就是我目前的做法。

series: [     
        {name:sales.SalesData[0].name,data:sales.SalesData[0].data},
        {name:sales.SalesData[1].name,data:sales.SalesData[1].data},
        {name:sales.SalesData[2].name,data:sales.SalesData[2].data}

            ]

但是如果改变了数组中元素的数量，那么这将不起作用。 我该如何解决这个问题？演示代码对我有帮助。

我已经参考了以下问题，但我无法解决问题。

Dynamically adding to Highcharts

Highcharts series data array

Answer 1

您可以遍历 sales 变量数据并构造数组，而不是手动构造 series 数组。所以无论 sales.SalesData 数组中的元素数量是多少，所有项目都将存在于 series 数组

中

var series = [],
    salesData= sales.SalesData;

for (var i=0 i< salesData.length; i++) {
    series.push({"name" : key, "data" : sales[key]})
}

这个构造的 series 数组是对象的一部分，您必须将其作为参数传递给 highcharts 方法。

var chartdata = {
    chart: {type: 'column'},
    title: {text: 'Sales Data'},
    xAxis: {
        categories: ['Category 1','Category 2']
    },
    yAxis: {
        min: 0,
        title: {text: 'Sales'}
    },
    series : []
}

chartdata.series = series;

$('#chart').highcharts(chartdata);

其中 #chart 是要显示图表的容器。

您还可以参考每种图表的 demo pages 中可用的小提琴，以了解有关如何显示特定类型图表的更多信息。

Answer 2

我解决了问题

更改 json 数组如下：

var sales = [ 
              { "name"  : "AllProducts123|Canada", "data" :[44936.0,50752.0] },
              { "name"  : "AllProducts|Mexico", "data" : [200679.0,226838.0] },
              { "name"  : "AllProducts|USA",    "data" : [288993.0,289126.0] }
            ]

现在将它直接传递给 highcharts 中的系列。

 series:sales

完成!!!!!

如何将 json 数据传递给 highcharts 系列？

How to pass json data to highcharts series?

javascript

jquery

json

highcharts