如何将JSON数据传递到Highcharts系列？

Question

我有一个在运行时生成的JSON数组。因此，名称/数据对的数量是可变的。

`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。

目前我的做法是这样的。

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}

            ]

但是，如果数组中的元素数量更改，则此方法将无法使用。 如何解决这个问题？演示代码会帮助我。

我查阅了以下问题，但我无法解决这个问题。

动态添加到Highcharts

Highcharts系列数据数组

- Pradip Shenolkar

---

动态传递数据是什么意思？ - Kushal

@ Kushal，我编辑了这个问题。 - Pradip Shenolkar

如果这里正常工作，则数组中的更改数量不应影响。请粘贴您无法正常工作的数组。 - CodeWithCoffee

所以您想在 Highcharts 初始化后添加更多数据……如果我理解有误请指正！ - Kushal

@CodeWithCoffee 有些误解。我想要动态地传递JSON数据。因此，如果JSON数组发生了变化，它应该自动传递正确数量的名称/数据对到系列。 - Pradip Shenolkar

Answer 1

我解决了这个问题

将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

完成了！！！！

- Pradip Shenolkar

---

对于其他人阅读此内容，Json数据必须按照js数组格式进行格式化，例如 var sales = []，以满足highchart系列数据的需求。 - zero8

Answer 2

不必手动构建series数组，您可以循环遍历sales变量数据并构建数组。因此，无论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 是您要显示图表的容器。

您还可以参考每种类型图表的 演示页面 中提供的 fiddles，了解如何显示特定类型的图表。

- Anbarasan

---

我已经成功将数据放入系列数组中。 var series = []; for(var i = 0; i< sales.SalesData.length; i++){ series.push({name : sales.SalesData[i].name , data : sales.SalesData[i].data}); }但是，我该如何将这个数组传递给Highcharts中的系列？ - Pradip Shenolkar

我是这样访问它的：series[0].name 和 series[0].data - Pradip Shenolkar

@PradipShenolkar，这个series是你需要发送到highcharts方法的对象的一部分。查看编辑后的答案和链接在答案中提供的演示页面的js fiddles，以获取更多选项和执行方式。 - Anbarasan