1

このデモのようなハイチャート チャートを作成しようとしています: http://www.highcharts.com/demo/column-basic json データを使用していますが、json データを適切に解析する方法がわかりません。 . 私のデータは曜日ごとにグループ化されており、3 つのカテゴリがあります。次に例を示します。

{ "Monday": { "inv": 1126, "oppm": 276, "perc": "24.51" }, "Tuesday": { "inv": 1072, "oppm": 273, "perc": "25.47" }, "Wednesday": { "inv": 1032, "oppm": 271, "perc": "26.26" }, "Thursday": { "inv": 989, "oppm": 259, "perc": "26.19" }, "Friday": { "inv": 937, "oppm": 240, "perc": "25.61" } }

簡単な問題でこれを行う方法はありますか？json データ構造を変更すると役に立ちますか?

前もって感謝します！

編集:解決策:

あまり複雑ではない方法を見つけましたが、JS を知っていればさらに簡単に実行できると確信しています。とにかく、このソリューションは私のJSONデータでうまく機能します：

//Convert received AJAX data
success: function(data)
{                       
    cleanData = $.parseJSON(data);

    //Make some empty arrays for the categories and data
    days = Array();
    inv = Array();
    oppm = Array();
    perc = Array();

    //Iterate the data and fill in the new arrays
    $.each(cleanData, function(index, value) {
        days.push(index);
        inv.push(parseFloat(value['inv']));
        oppm.push(parseFloat(value['oppm']));
        perc.push(parseFloat(value['perc']));
    });

    //Use the new arrays in the chart
    chart1 = new Highcharts.Chart({
        chart: {
            renderTo: 'div_chart',
            type: 'column'
        },
        xAxis:{
            categories: days,
            title: {
                text: 'Week day'
            }
        },
        series: [{
                name: 'Invited',
                data: inv
            }, {
                name: 'Met',
                data: oppm
            }, {
                name: '%',
                data: perc
            }],
   });
4

1 に答える 1

0

ここでjsfiddleでその例を編集できます：http：//jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/column-basic/

それがどのようにフォーマットされ、データがスクリプトにどのように追加されるかを見ると、いくつかのforループがうまくいくようですが、JSONフォーマットを少し変更する必要があると思います。

これが私がそれをする方法です（psueodocode）：

var json = [
    {
        "day":"monday",
        "inv": 1126, 
        "oppm": 276, 
        "perc": "24.51"

    },
    {
         "day":"Tuesday",
         "inv": 1072, 
         "oppm": 273, 
         "perc": "25.47" 
    }
];

次に、これをループしてすべての日を取得することにより、highcharts呼び出しで「categories」オプションを設定します。

var myCategories;
var idx=0;
for (var key in json) {
    myCategories[idx]=json[key]['day'];
    idx++;
}

次に、highcharts構成で：

 xAxis: {
            categories: myCategories
        },

そして、あなたがする必要があるのは、highcharsの「シリーズ」呼び出しでデータポイントを設定するためにもう一度同じことをすることです。これはもう少し複雑ですが、同じ考えです。

お役に立てれば

于 2013-01-30T09:51:03.680 に答える