我经验相对较少，请多包容。
我正在使用Google可视化API开发一个简单的仪表盘。我是用vb.net进行开发的。我的apsx上有带注释的时间轴、强度图和一组表格。
我想要做的事情是根据用户选择的日期范围更新强度图和表格，使用的工具是带注释的时间轴。
我希望只更新这些可视化内容而不需要完整地重新加载页面。显然，一个很好的方法是将可视化内容分成自包含的apsx页面，并使用jQuery将它们“加载”到一个div中。
我说显然，因为这并没有起作用。当我尝试使用jQuery更新包含Google可视化的apsx时，在浏览器中会出现“从www.google.com加载数据”的消息，它会一直运行而且永远不会返回。我向一位经验丰富的开发人员咨询了此事，他束手无策，但认为这可能是Google API和jQuery之间的冲突。
非常感谢您提供的任何提示、建议或替代解决方案！
我刚刚编写了一些可以帮助你的代码。已测试过BarChart、ColumnChart、LineChart和AreaChart，对我来说运行良好（按设计不会正确地运行PieCharts）。
主要构造函数代码：
function Charts (options){
var self = this;
self.chart = [];
self.dataTable = new google.visualization.DataTable();
self.settings = $.extend({
colors:['#98D8F4','#E85500','#B3CF2F', '#FEB800', '#FFA1C5', '#D984FF', '#DD9D75'],
width: 960, height: 600,
}, options);
self.add = function(type, element){
self.chart.push({
element: $(element),
o: new google.visualization[type]($(element)[0]),
draw: function(dataTable, options){
this.element.html('');
this.o.draw(dataTable, options);
}
});
};
self.draw = function(options){
var settings = $.extend({}, this.settings, options);
$.each(self.chart, function(i, chart){
chart.draw(self.dataTable, settings)
})
};
self.parseData = function(labels, legends, data){
var countRows = data[0].length;
self.dataTable.addColumn('string', 'Name');
$.each(legends, function(i, legend){
self.dataTable.addColumn('number', legend);
})
self.dataTable.addRows(countRows);
$.each(labels, function(i, label){
self.dataTable.setValue(i, 0, label);
$.each(data, function(k, entry){
self.dataTable.setValue(i, k+1, data[k][i]);
})
})
return self.dataTable;
};
}
您可以将数据以数组形式传递以构建图表（在调用绘制方法之前，您必须始终解析数据）
var labels = [ "Kaspersky","Symantec","G-Data","Avira" ],
legends = [ "Antivirensoftware (kostenpflichtig)","Antivirensoftware (kostenlos)","Internetsecurity (kostenpflichtig)","Internetsecurity (kostenlos)","Sonstiges, keine Angabe","Beta-Test KIS 2010", "Something Else" ],
data = [ [46,4,7,33],[3,1,2,38],[42,12,14,7],[2,0,1,1],[43,8,14,18],[4,3,0,1],[1,2,4,2]];
除了脚本有点复杂之外，您可以轻松绘制图表。
var charts = new Charts();
charts.parseData(labels, legends, data);
charts.add('ColumnChart', '#column-chart');
charts.add('BarChart', '#bar-chart');
charts.draw({title: 'Antivirus Comparison Chart', titleY:'Points'});
并且轻松刷新
charts.parseData(otherLabels, otherLegends, otherData);
charts.draw({title: 'Antivirus Comparison Chart with Other Data', titleY:'Points'});
google.load("jquery", "1.3.2");
google.load('visualization', '1', {'packages':['piechart','barchart','columnchart']});
google.setOnLoadCallback(function() {
/* script here */
});