2

これが私のjsonデータです

var data = [
    {"unit":"a", "status":"Stopped / Idle", "val":21.2022222222222222},
    {"unit":"a", "status":"Working", "val":53.3066666666666667},
    {"unit":"a", "status":"Headland Turning", "val":0.04694444444444444444},
    {"unit":"a", "status":"Transport", "val":5.1425000000000000},
    {"unit":"b", "status":"Stopped / Idle", "val":334.7358333333333333},
    {"unit":"b", "status":"Working", "val":212.6386111111111111},
    {"unit":"b", "status":"Headland Turning", "val":26.2955555555555556},
    {"unit":"b", "status":"Transport", "val":0.00444444444444444444}
];

unitカテゴリです

seriesHighChartsのオプションにプラグインできるように、データを次のようにフォーマットできるようにしたいと思います。

series: [{
                name: 'Stopped / Idle',
                data: [21.2022222222222222, 334.7358333333333333]},
            {
                name: 'Working',
                data: [53.3066666666666667, 212.6386111111111111]},
            {
                name: 'Headland Turning',
                data: [0.04694444444444444444, 26.2955555555555556]},
            {
                name: 'Transport',
                data: [5.1425000000000000, 0.00444444444444444444]}]
        });

ありがとうございました。

4

2 に答える 2

5 
var data = [
    {"unit":"a", "status":"Stopped / Idle", "val":21.2022222222222222},
    {"unit":"a", "status":"Working", "val":53.3066666666666667},
    {"unit":"a", "status":"Headland Turning", "val":0.04694444444444444444},
    {"unit":"a", "status":"Transport", "val":5.1425000000000000},
    {"unit":"b", "status":"Stopped / Idle", "val":334.7358333333333333},
    {"unit":"b", "status":"Working", "val":212.6386111111111111},
    {"unit":"b", "status":"Headland Turning", "val":26.2955555555555556},
    {"unit":"b", "status":"Transport", "val":0.00444444444444444444}
];
var seriesData = [];
var xCategories = [];
var i, cat;
for(i = 0; i < data.length; i++){
     cat = 'Unit ' + data[i].unit;
     if(xCategories.indexOf(cat) === -1){
        xCategories[xCategories.length] = cat;
     }
}
for(i = 0; i < data.length; i++){
    if(seriesData){
      var currSeries = seriesData.filter(function(seriesObject){ return seriesObject.name == data[i].status;});
      if(currSeries.length === 0){
          currSeries = seriesData[seriesData.length] = {name: data[i].status, data: []};
      } else {
          currSeries = currSeries[0];
      }
      var index = currSeries.data.length;
      currSeries.data[index] = data[i].val;
    } else {
       seriesData[0] = {name: data[i].status, data: [data[i].val]}
    }
}

これで、次のようなものを使用してチャートをインスタンスseriesData化xCategoriesできます。

  chart = new Highchart({chart: {renderTo: 'chart-div', 
                                   type: 'column'
                                  }, 
                           plotOptions: {column: {stacking: 'normal'}},
                           xAxis:{ categories: xCategories}, 
                           series: seriesData
                         });

編集：これがjsFiddleです：http：//jsfiddle.net/sujay/UMeGS/

于 2012-07-13T16:06:19.123 に答える
1

HighCharts Webサイトで、[デモギャラリー]> [HighChartデモ]セクションに移動し、ページの左側にある[スタック]列をクリックしました。そこから、デモ付きのJSFiddleへのリンクがあり、そこから、あなたに関連するコードの2つのセクションが表示されました。

最初のセクションはxAxis、HighChartオブジェクトのプロパティです。これが私がそれを変更したものです：

xAxis: {
  categories: ['Unit A', 'Unit B']
}

これらは、データをスタックする各列になります。

次のセクションはseriesプロパティです。これは、グラフ化しようとしているデータをこれらの列に渡す場所です。次のようになります。

series: [{
  name: 'Stopped / Idle',
  data: [21.2022222222222222, 334.7358333333333333]
}, {
  name: 'Working',
  data: [53.3066666666666667, 212.6386111111111111]
}, {
  name: 'Headland Turning',
  data: [0.04694444444444444444, 26.2955555555555556]
}, {
  name: 'Transport',
  data: [5.1425000000000000, 0.00444444444444444444]                         
}]

この部分では、特定のタイプのデータの名前を指定してから、プロパティで指定した各列の値を指定しxAxisます。

いくつかのオプションをすばやく試してみましたが、これでできることは他にもたくさんありますが、これがスタック列グラフとデータを含むJSFiddleです。

お役に立てれば！

于 2012-07-13T15:37:08.340 に答える