Come passare i dati json alle serie highcharts?

Question

Ho la seguente matrice JSON che viene generata in fase di esecuzione. Quindi il numero di coppie nome/dati varia.

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

Desidero passare questi dati a serie in diagrammi elevati.

Questo è come lo sto facendo attualmente.

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} 

      ] 

Ma se il numero di elementi dell'array vengono cambiate allora questo non funzionerà. Come posso risolvere questo problema? Il codice demo mi aiuterà.

Ho risposto alle seguenti domande ma non sono stato in grado di risolvere il problema.

Dynamically adding to Highcharts

Highcharts series data array

Answer 1

ho risolto il problema

modificato matrice JSON come segue:

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

Ora passare direttamente alla serie nel Highcharts.

series:sales 

Fatto !!!!!

Answer 2

Invece di costruire la matrice series manualmente si poteva scorrere i dati variabili sales e costruire la serie. Quindi, che cosa mai il numero di elementi nella matrice sales.SalesData, tutti gli articoli saranno lì in series matrice

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

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

Questo costruito series array è parte dell'oggetto che si deve passare come argomento di highcharts metodo.

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); 

dove #chart è il contenitore in cui si desidera visualizzare il grafico.

puoi anche fare riferimento ai violini disponibili nel loro demo pages per ogni tipo di grafico per sapere di più su come visualizzare un particolare tipo di grafico.