0

Google チャートを使用しようとしていますが、ハードコーディングはしていません。グラフに while ループを設定しようとしています。これが私のコードです：

var drinks = data.split("\n");
    var ii = 0;

    //create chart
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Beer');
    data.addColumn('number', 'Beers');
    var rows = drinks.length / 2;
    data.addRows(76);

    //iprints data
    while(  ii < drinks.length-1 ) {
        data.setValue( ii, drinks[ii], drinks[ii+1]  );

        ii = ii +2;
    }

        // Set chart options
        var options = {'title':'Drinks',
                       'width':400,
                       'height':300};

        // Instantiate and draw our chart, passing in some options.
        var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
        chart.draw(data, options);

私のデータは、このようにフォーマットされたテキスト ファイルから来ています。

名前 # 名前 # 名前 #

クロムコンソールを見ると、チャートを作成するコードが実行されると、次のエラーが表示されます。

不明なエラー: 列インデックスの飲み物 [ii] が無効です。[0-1] の範囲の整数である必要があります。

4

1 に答える 1

3

Google Visualizations APIによると、data.setValue() の 2 番目の引数は列インデックスである必要があります。2 つの列 ('Beer' と 'Beers') を追加したので、0 または 1 しか使用できません。

私はこのようなことを試してみます:

var drinks = data.split("\n");
var ii = 0;

//create chart
var data = new google.visualization.DataTable();
data.addColumn('string', 'Beer');
data.addColumn('number', 'Beers');
var rows = drinks.length / 2;
data.addRows(76);

//iprints data
for ( ii = 0 ; ii < drinks.length - 1 ; ii++ ) {
    data.setValue( ii, 0, drinks[ii]);
}

// Set chart options
var options = {'title':'Drinks',
               'width':400,
               'height':300};

// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data, options);

これにより、各行の最初の列にビールの名前が追加されます。2 列目に何が必要かわかりませんが、そこにもデータを追加したい場合は、for ループに 2 行目を含めることができます。

data.setValue( ii, 1, 'some other data');

ただし、もう 1 つ注意してください。変数「rows」を作成しますが、決して使用しないでください。おそらくすぐ下の addRows() の呼び出しに入って、データ内の名前の数に基づいて行数を決定する必要があると思います。

編集

データが表示されない理由についての質問への回答 - 棒グラフのサイズは、DataTable の 2 列目 (数値列) から取得されます。上記のコードでは、最初の列のみを入力しました。データの 1 行おきに整数が含まれていることがわかりましたので、コードを少し変更しました。このjsFiddleで試すことができます(以下にも含まれています)。

var beers = 'Budweiser\n50\nTsingdao\n10\nSam Adams\n15';
var drinks = beers.split("\n");

// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Beer');
data.addColumn('number', 'Beers');
data.addRows(drinks.length / 2);

// Set chart options
var options = {'title':'Drinks',
               'width':400,
               'height':300};

//iprints data
for ( var i = 0 ; i < drinks.length - 1 ; i += 2 ) {
    data.setValue(i/2, 0, drinks[i]);
    data.setValue(i/2, 1, parseInt((drinks[i+1])));
}

// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data, options);
于 2012-04-18T05:17:04.613 に答える