2

CSVデータを使用して縦棒グラフ/棒グラフを作成する必要があります。データの形式は次のとおりです。

A 156600 154965  45679  184736 160819 42329
B 7271   4537    5379   245    0      1941
C 4347   19143   1075   397    6860   0
D 15     11283   1477   0      0      0
E 6323   537697  222430 21701  98725  3792
F 0      0       0      0      0      0
G 284356 744986  616369 0      0      106877
H 0      0       0      0      0      0
I 0      0       0      32962  0      0
J 0      12742   616    0      0      0
K 0      1215413 1420   0      0      0
L 0      0       0      0      0      0
M 24191  50166   18163  55282  48262  5862
N 0      0       0      0      0      20396

ここでは、X軸のカテゴリを手動で追加します。だから、ここにあるようなチャートを作りたいです

私はこれを作りました：

$(document).ready(function() {
    var options = {
        chart: {
            renderTo: 'container',
            defaultSeriesType: 'column'
        },
        title: {
            text: 'Total Transactions'
        },
        xAxis: {
           categories: [],labels : { y : 20, rotation: -45, align: 'right' }
        },
        yAxis: {
            title: {
                text: 'Units'
            }
        },
        series: []
    };

    $.get('data.csv', function(data) {
        // Split the lines
        var lines = data.split('\n');
                var series = { 
                    name: 'Transactions ',
                    data: []
                };
        $.each(lines, function(lineNo, line) {

            var items = line.split(',');
            if (lineNo != 0) {
                $.each(items, function(itemNo, item) {
                        if (itemNo == 0) {
                            options.xAxis.categories.push(item);
                        } else if (itemNo == 2){

                            series.data.push(parseFloat(item));
                        }
                });
            }

        });
        options.series.push(series);
        var chart = new Highcharts.Chart(options);
    });

});

ただし、列ごとの値は次のことを意味します。

156600
7271    
4347    
15  
6323    
0   
284356
0   
0   
0   
0   
0   
24191   
0

しかし、代わりにこれが必要です：

  • A（Janなど）の場合、値は次のようになります。

    156600 154965 45679 184736  160819  42329

  • B（2月のように）の場合、別の列に次の値が必要です。

    7271 4537   5379    245 0   1941

手伝ってくれませんか。

4

1 に答える 1

3

これで、それぞれ6つのデータポイントを含む14のシリーズになります。可能であれば、実際に行う必要があるのは、列が月を表し、行が次のように系列を表すようにcsvファイルを変更することです。 ここに画像の説明を入力してください

次に、行ごとに配列を作成し、その配列をハイチャートに渡すことができます。\ nに基づいて分割を実行しているため、コードは上記のcsv構造で機能するはずです。

編集

CSVファイルの形式を変更できない場合は、以下の変更されたコードで、必要に応じて6シリーズをビルドできます。列または行のヘッダーがないことを前提としています。また、1年の12か月を超える最後の2行も無視されます。

$.get('data.csv', function(data) {
  var lines = data.split('\n');
  var series1 = {name: 'India', data: []};
  var series2 = {name: 'China', data: []};
  var series3 = {name: 'Australia', data: []};
  var series4 = {name: 'Shreelanka', data: []};
  var series5 = {name: 'US', data: []};
  var series6 = {name: 'Cuba', data: []};

  $.each(lines, function(lineNo, line) {
    var items = line.split(',');
    //IGNORE THE LAST TWO ROWS
    if (lineNo < 12) {
      $.each(items, function(itemNo, item) {
        if (itemNo == 0) {
          series1.data.push(parseFloat(item)); 
        } else if (itemNo == 1){
          series2.data.push(parseFloat(item));
        } else if (itemNo == 2){
          series3.data.push(parseFloat(item));
        } else if (itemNo == 3){
          series4.data.push(parseFloat(item));
        } else if (itemNo == 4){
          series5.data.push(parseFloat(item));
        } else if (itemNo == 5){
          series6.data.push(parseFloat(item));
        }
      });
    }
  });
  options.series.push(series1);
  options.series.push(series2);
  options.series.push(series3);
  options.series.push(series4);
  options.series.push(series5);
  options.series.push(series6);
  var chart = new Highcharts.Chart(options);
});
于 2012-06-08T17:51:27.000 に答える