Javascript 在动画Google条形图标签中使用数组索引/变量

我的数据库中有一系列的表，我想用谷歌图表来显示这些数据。我也希望它能很好地动画化，我从某处找到了一个很好的代码片段，可以帮助我完成这项工作，我正在修改它

由于数据库中的表是不同的，我不知道每个表将有多少列，因此也不知道图表应该有多少条，直到通过ajax查询最多5条

我将通过ajax请求获取数据并返回一个数组，然后计算数组中的项数以获得列数。目前我正在模拟这个位，但数据如下所示：

var Columns = ['Tracker', '1', '2', '3'];
var Information = ['A', 475, 450, 190];

但是，当我尝试使用标识符获取列标签时，图表会中断

我已经包含了下面的代码以及一个指向JSFIDLE的链接，该链接将向您展示这个问题。出什么事了

另外，如果你们中有人能想出一个更好的方法来实现这一点，而不需要重复的代码和垃圾if子句——出于某种原因，我自己找不到更好的方法来实现这一点

代码：

---

所以我解决了这个问题，并将答案发布给任何可能尝试做同样事情的人。我遇到的问题是由于对这一行的误解：

label: data.getColumnLabel(1),

我认为这是指原始列名中标记为1的列。相反，1实际上是指列号，即如果数据系列中的第一列被称为A，则getColumnLabel1将返回A

因此，如果您想实现我试图实现的目标，只需执行以下操作：

function drawVisualization() {
// Create and populate the data table.
var Columns = ['Tracker', 'A', 'B', 'C'];
var Information = ['A', 475, 450, 190];
var NumColumns = Columns.length -1;
/*for (index = 1; index < Columns.length; ++index) {
var ColumnName = Columns[index];
var CorrespondingData = Information[index];

}*/

var data = google.visualization.arrayToDataTable([
    Columns,
    Information
]);

// use a DataView to 0-out all the values in the data set for the initial draw
var view = new google.visualization.DataView(data);
if(NumColumns == 1){
view.setColumns([0, {
    type: 'number',
    label: data.getColumnLabel(1),
    calc: function () {return 0;}
}]);
}else if(NumColumns == 2) {
view.setColumns([0, {
    type: 'number',
    label: data.getColumnLabel(1),
    calc: function () {return 0;}
}, {
    type: 'number',
    label: data.getColumnLabel(2),
    calc: function () {return 0;}
}]);

}else if(NumColumns == 3){

view.setColumns([0, {
    type: 'number',
    label: data.getColumnLabel(1),
    calc: function () {return 0;}
}, {
    type: 'number',
    label: data.getColumnLabel(2),
    calc: function () {return 0;}
}, {
    type: 'number',
    label: data.getColumnLabel(3),
    calc: function () {return 0;}
}]);
}
// Create and draw the visualization.
var chart = new      google.visualization.ColumnChart(document.getElementById('visualization'));

var options = {
    title:"Sub-Region vs Region vs Budget",
    legend: 'bottom',
    hAxis: {
        title: ""
    },
    animation: {
        duration: 1000
    },
    vAxis: {
        // set these values to make the initial animation smoother
        minValue: 0,
        maxValue: 600
    }
};

var runOnce = google.visualization.events.addListener(chart, 'ready', function () {
    google.visualization.events.removeListener(runOnce);
    chart.draw(data, options);
});

chart.draw(view, options);

// you can handle the resizing here - no need to recreate your data and charts from scratch
$(window).resize(function() {
    chart.draw(data, options);
});
}
google.load('visualization', '1', {packages: ['corechart'], callback: drawVisualization});

function drawVisualization() {
// Create and populate the data table.
var Columns = ['Tracker', 'A', 'B', 'C'];
var Information = ['A', 475, 450, 190];
var NumColumns = Columns.length -1;
/*for (index = 1; index < Columns.length; ++index) {
var ColumnName = Columns[index];
var CorrespondingData = Information[index];

}*/

var data = google.visualization.arrayToDataTable([
    Columns,
    Information
]);

// use a DataView to 0-out all the values in the data set for the initial draw
var view = new google.visualization.DataView(data);
if(NumColumns == 1){
view.setColumns([0, {
    type: 'number',
    label: data.getColumnLabel(1),
    calc: function () {return 0;}
}]);
}else if(NumColumns == 2) {
view.setColumns([0, {
    type: 'number',
    label: data.getColumnLabel(1),
    calc: function () {return 0;}
}, {
    type: 'number',
    label: data.getColumnLabel(2),
    calc: function () {return 0;}
}]);

}else if(NumColumns == 3){

view.setColumns([0, {
    type: 'number',
    label: data.getColumnLabel(1),
    calc: function () {return 0;}
}, {
    type: 'number',
    label: data.getColumnLabel(2),
    calc: function () {return 0;}
}, {
    type: 'number',
    label: data.getColumnLabel(3),
    calc: function () {return 0;}
}]);
}
// Create and draw the visualization.
var chart = new      google.visualization.ColumnChart(document.getElementById('visualization'));

var options = {
    title:"Sub-Region vs Region vs Budget",
    legend: 'bottom',
    hAxis: {
        title: ""
    },
    animation: {
        duration: 1000
    },
    vAxis: {
        // set these values to make the initial animation smoother
        minValue: 0,
        maxValue: 600
    }
};

var runOnce = google.visualization.events.addListener(chart, 'ready', function () {
    google.visualization.events.removeListener(runOnce);
    chart.draw(data, options);
});

chart.draw(view, options);

// you can handle the resizing here - no need to recreate your data and charts from scratch
$(window).resize(function() {
    chart.draw(data, options);
});
}
google.load('visualization', '1', {packages: ['corechart'], callback: drawVisualization});