Google Chart问题

Question

我正在尝试使用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);

我的数据来自一个格式相似的文本文件。

名 ＃ 名称 ＃ 名称 ＃

当我查看chrome控制台时，执行图表的代码时会出现此错误：

  

未捕获错误：无效的列索引饮料[ii]。应该是一个整数   在[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);

这会将Beer名称添加到每行的第一列。我不知道你想要的在第二列，但如果你想在那里添加一些数据，你可以在for循环中包含第二行：

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

然而另一个注意事项是 - 您创建变量'rows'，但从不使用它。我认为可能应该直接调用下面的addRows（），以便根据数据中的名称数量来确定行数。

---

修改

回答您关于无数据显示原因的问题 - 条形图大小来自DataTable中的第二列（即数字列）。在上面的代码中，我只填充了第一列。我现在明白数据中的每一行都包含一个整数，所以我稍微修改了一下代码。你可以试试这个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);