Javascript 谷歌图表问题

我试图使用谷歌图表，但不是硬编码。我试图用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);

var=data.split（“\n”）；
var ii=0；
//创建图表
var data=new google.visualization.DataTable（）；
data.addColumn（'string'，'Beer'）；
data.addColumn（'number'，'Beers'）；
var rows=0.1.1/2；
数据。添加行（76）；
//iprints数据
而（ii<1.1）{
数据。设定值（二、饮料[二]、饮料[二+1]）；
ii=ii+2；
}
//设置图表选项
var options={'title'：'Drinks'，
“宽度”：400，
‘高度’：300}；
//实例化并绘制图表，传入一些选项。
var chart=new google.visualization.BarChart（document.getElementById（'chart_div'））；
图表绘制（数据、选项）；

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

名字 # 名称 # 名称 #

当我在chrome控制台中查看时，在执行生成图表的代码时会出现以下错误：

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

根据，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);

然而，还有一个注意事项——您创建了一个变量“rows”，但从未使用过它。我认为它可能应该进入下面的addRows（）调用中，以便根据数据中的名称数计算行数

---

编辑

在回答您关于为什么没有显示数据的问题时，条形图的大小来自DataTable中的第二列（即数字列）。在上面的代码中，我只填充了第一列。现在我知道数据中的每一行都包含一个整数，所以我对代码做了一些修改。您可以在这里试用（也包括在下面）

var-beers='Budweiser\n50\nTsingdao\n10\nSam-Adams\n15'；
var饮料=啤酒。拆分（“\n”）；
//创建数据表。
var data=new google.visualization.DataTable（）；
data.addColumn（'string'，'Beer'）；
data.addColumn（'number'，'Beers'）；
data.addRows（1.length/2）；
//设置图表选项
var options={'title'：'Drinks'，
“宽度”：400，
‘高度’：300}；
//iprints数据
对于（变量i=0；i<0.length-1；i+=2）{
数据设置值（i/2，0，饮料[i]）；
data.setValue（i/2,1，parseInt（（饮料[i+1]））；
}
//实例化并绘制图表，传入一些选项。
var chart=new google.visualization.BarChart（document.getElementById（'chart_div'））；
图表绘制（数据、选项）；

根据，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);

然而，还有一个注意事项——您创建了一个变量“rows”，但从未使用过它。我认为它可能应该进入下面的addRows（）调用中，以便根据数据中的名称数计算行数

---

编辑

在回答您关于为什么没有显示数据的问题时，条形图的大小来自DataTable中的第二列（即数字列）。在上面的代码中，我只填充了第一列。现在我知道数据中的每一行都包含一个整数，所以我对代码做了一些修改。您可以在这里试用（也包括在下面）

var-beers='Budweiser\n50\nTsingdao\n10\nSam-Adams\n15'；
var饮料=啤酒。拆分（“\n”）；
//创建数据表。
var data=new google.visualization.DataTable（）；
data.addColumn（'string'，'Beer'）；
data.addColumn（'number'，'Beers'）；
data.addRows（1.length/2）；
//设置图表选项
var options={'title'：'Drinks'，
“宽度”：400，
‘高度’：300}；
//iprints数据
对于（变量i=0；i<0.length-1；i+=2）{
数据设置值（i/2，0，饮料[i]）；
data.setValue（i/2,1，parseInt（（饮料[i+1]））；
}
//实例化并绘制图表，传入一些选项。
var chart=new google.visualization.BarChart（document.getElementById（'chart_div'））；
图表绘制（数据、选项）；

据我所知，您将0。应该是啤酒名称，然后下一个值是啤酒的编号。进行您所说的第一次更改时，会显示一个图表，但不会将任何内容放入其中。如果您运行此html代码，您可以直观地看到我尝试使用不同的值生成的内容：Hi@Mike，我将我的答案编辑得更清楚一点，并链接到一个运行版本的javascript代码。听起来像是drinks.length是一个奇数，因此drinks.length/2以.5结尾。我认为您应该仔细检查数据字符串的格式，确保其稳定，或者添加一些代码来处理长度为奇数的情况。应该是啤酒名称，然后下一个值是啤酒的编号。进行您所说的第一次更改时，会显示一个图表，但不会将任何内容放入其中。如果您运行此html代码，您可以直观地看到我尝试使用不同的值生成的内容：Hi@Mike，我将我的答案编辑得更清楚一点，并链接到一个运行版本的javascript代码。听起来像是drinks.length是一个奇数，因此drinks.length/2以.5结尾。我认为您应该仔细检查数据字符串的格式，确保其稳定，或者添加一些代码来处理长度奇数的情况。为什么我的帖子被否决1？为什么我的帖子被否决1？

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