web-dev-qa-db-ja.com

jsonデータをハイチャートシリーズに渡す方法は？

実行時に生成される次の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] }
                    ]}    `

このデータをハイチャートのシリーズに渡したいのですが。

これが現在私がやっている方法です。

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シリーズデータ配列

javascriptjqueryjsonhighcharts
7
Pradip Shenolkar

私は問題を解決しました

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

それを直接、ハイチャートのシリーズに渡します。

 series:sales

やった!!!!!

4
Pradip Shenolkar

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は、グラフを表示するコンテナです。

特定の種類のグラフを表示する方法の詳細については、グラフの種類ごとに デモページ で利用できるフィドルを参照することもできます。

4
Anbarasan