Question

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

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

我将通过ajax请求获取数据并返回一个数组，然后我会计算数组中的项目数以获得列数。目前我正在模拟这个位，但数据看起来像这样：

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

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

我已经包含了下面的代码，还有一个指向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）将返回“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条形图标签中使用数组索引/变量

1 个答案: