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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/29643609/
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-08-23 03:43:11  来源:igfitidea点击:

How to pass json data to highcharts series?

javascriptjqueryjsonhighcharts

提问by Pradip Shenolkar

I have following json array which is generated at runtime. Hence the number of name/data pairs varies.

我有以下在运行时生成的 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] }
                    ]}    `

I want to pass this data to series in highcharts.

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

This is how I am doing it currently.

这就是我目前的做法。

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}

            ]

But if the number of elements in array are changed then this won't work.How do I solve this problem ? Demo code will help me.

但是如果数组中的元素数量发生变化,那么这将不起作用。我该如何解决这个问题?演示代码将帮助我。

I have refereed following questions but I was not able to solve the problem.

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

Dynamically adding to Highcharts

动态添加到 Highcharts

Highcharts series data array

Highcharts 系列数据数组

采纳答案by Pradip Shenolkar

I solved the problem

我解决了这个问题

Changed json array as follows:

更改 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] }
            ]

Now pass it directly to series in highcharts.

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

 series:sales

Done !!!!!

完毕 !!!!!

回答by Anbarasan

Instead of constructing the seriesarray manually you could loop through the salesvariable data and construct the array. So what ever the number of elements in the sales.SalesDataarray, all items will be there in the seriesarray

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

This constructed seriesarray is part of the object which you must pass as argument to highchartsmethod.

这个构造的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);

where #chart is the container where you want to display the chart.

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

you can also refer to the fiddles which are available in their demo pagesfor each type of chart to know more on how to display a particular type of chart.

您还可以参考每种类型图表的演示页面中提供的小提琴,以了解有关如何显示特定类型图表的更多信息。