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

我的数据来自格式如下的文本文件。

姓名#姓名#姓名#

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

未捕获的错误：列索引无效 [ii]。应该是 [0-1] 范围内的整数。

4

1 回答 1

3

根据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() 的调用，以便您将行数基于数据中的名称数。

编辑

回答您关于为什么没有数据显示的问题 - 条形图大小来自 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);
于 2012-04-18T05:17:04.613 回答