javascript - 谷歌图表问题

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 控制台时，执行生成图表的代码时出现此错误:

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');

但是，还有一点需要注意 - 您创建了一个变量“rows”，但从未使用过它。我认为它可能应该立即进入对 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);