在动画 Google 条形图标签中使用数组 index/variables

Question

我的数据库中有一系列 table，想用 google 图表来显示这些数据。我也希望它有很好的动画效果，我从某个地方找到了一个很好的代码片段来帮助解决这个问题，我正在修改它。

由于我数据库中的 table 不同，我不知道每个 table 会有多少列，因此不知道图表应该有多少条，直到通过 ajax 进行查询（最多 5 个）。

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

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

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

我已经将下面的代码和 link 添加到 jsfiddle 中，它将向您展示问题所在。出了什么问题？

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

Jsfiddle here

代码：

function drawVisualization() {
// Create and populate the data table.
var Columns = ['Tracker', '1', '2', '3'];
var Information = ['A', 475, 450, 190];
//var Columns1 = Columns[1]; //uncomment this and comment out the line below to see the problem
var Columns1 = 1;
var NumColumns = Columns.length -1;
//alert(Columns1); // to see what Columns1 is
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(Columns[1]),
    calc: function () {return 0;}
}]);
}else if(NumColumns == 2) {
view.setColumns([0, {
    type: 'number',
    label: data.getColumnLabel(Columns[1]),
    calc: function () {return 0;}
}, {
    type: 'number',
    label: data.getColumnLabel(Columns[2]),
    calc: function () {return 0;}
}]);

}else if(NumColumns == 3){

view.setColumns([0, {
    type: 'number',
    label: data.getColumnLabel(Columns1), //this does not work if the variable Columns1 is set to Columns[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});

Answer 1

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

label: data.getColumnLabel(1),

我认为这是指原始列名称中标记为 (1) 的列。相反，(1) 实际上指的是列号（即如果数据系列中的第一列被称为 "A"，getColumnLabel(1) 将 return "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});

在动画 Google 条形图标签中使用数组 index/variables

Using array index/variables in Animated Google Barchart Labels

javascript

arrays

google-visualization