谷歌圖表問題

Question

我想使用谷歌圖表，但不是硬編碼它。我想用一個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); 

我的數據來自一個格式如此的文本文件。

名 ＃ 名 ＃ 名 ＃

當我看着鉻控制檯我得到時執行代碼，使圖表此錯誤：

Uncaught Error: Invalid column index drinks[ii]. Should be an integer in the range [0-1].

Answer 1

根據Google Visualizations API ，data.setValue（）的第二個參數應該是列索引。您已經將兩列（「啤酒」和「啤酒」），所以你只能用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); 

這將增加啤酒的名字每行中的第一列。我不知道你在第二列想要的東西，但如果你想添加一些數據，有作爲，你可能包括for循環的第二條線：

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

另外一個音符，但是 - 你創建一個變量「行」，但從不使用它。我認爲它可能應該進入到下面的addRows（）調用中，以便根據數據中的名稱數量來確定行數。

---

編輯

在回答您爲什麼沒有數據顯示出來的問題 - 在條形圖尺寸來自在數據表中的第二列（即，數列）。在上面的代碼中，我只填充了第一列。我現在明白數據中的每一行都包含一個整數，所以我稍微修改了代碼。您可以在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);