在一页上展示多个可视化图表
我正在使用python-visualization库来处理数据源。我尝试在同一页面上放置多个可视化图表。两个图表都是折线图，数据来自不同的网址。
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="/site_media/js/jquery-1.2.6.min.js"></script>
<script type="text/javascript">
google.load('visualization', '1', { packages: ['linechart'] });
</script>
<script type="text/javascript">
var visualization1, visualization2;
function drawVisualization1() {
var query1 = new google.visualization.Query('/datasource1/');
query1.send(handleQueryResponse1);
var query2 = new google.visualization.Query('/datasource2/');
query2.send(handleQueryResponse2);
}
function handleQueryResponse1(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var data1 = response.getDataTable();
visualization1 = new google.visualization.LineChart(document.getElementById('visualization1'));
var options = {};
options['width'] = 600;
options['height'] = 200;
visualization1.draw(data1, options);
}
function handleQueryResponse2(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var data2 = response.getDataTable();
visualization2 = new google.visualization.LineChart(document.getElementById('visualization2'));
var options = {};
options['width'] = 600;
options['height'] = 200;
visualization2.draw(data2, options);
}
google.setOnLoadCallback(drawVisualization1);
</script>
<body>
<div id="visualization1" class="span-15"><br /><br /></div>
<div id="visualization2" class="span-15"><br /><br /></div>
</body>
数据源：
def datasource1(request):
data = []
description = {"col1": ("number", "col1"),"col2": ("number", "col2"),}
for i in range(datetime.today().hour + 1):
data.append({"col1":datetime.today().hour,"col2":datetime.today().hour })
data_table = gviz_api.DataTable(description)
data_table.LoadData(data)
return HttpResponse(data_table.ToJSonResponse(columns_order=( "col1","col2",)))
def datasource2(request):
data = []
description = {"col1": ("number", "col1"),"col2": ("number", "col2"),}
for i in range(datetime.today().hour + 1):
data.append({"col1":datetime.today().hour,"col2":datetime.today().hour })
data_table = gviz_api.DataTable(description)
data_table.LoadData(data)
return HttpResponse(data_table.ToJSonResponse(columns_order=( "col1","col2",)))
当我渲染页面时，只有第一个可视化图表显示出来，第二个图表却始终不出现。有人能帮我解决这个问题吗？
2 个回答
0
我也遇到过这个问题。解决办法是让服务器返回 reqId 参数。
如果你在同一页面上有两个可视化图表，一个的 reqId 是 0，另一个是 reqId 1。要确保服务器在响应中正确返回这些 reqId。
如果两个响应都返回 '0'，那么只有一个可视化图表会显示出来（就是第一个）。
0
你可以试试下面的代码：
function Charts(){
var self = this;
self.chart = [];
self.settings = { width: 650, height: 250 };
self.add = function(type, element, dataTable, options){
self.chart.push({
o: new google.visualization[type]($(element)[0]),
data: dataTable,
draw: function(){
var settings = $.extend({}, self.settings, options);
this.o.draw(this.data, settings);
}
});
return self;
};
self.draw = function(){
$.each(self.chart, function(i, chart){
chart.draw();
});
return self;
};
}
然后再用这个：
//var data1 = 'someDataTable',
// data2 = 'anotherDataTable';
charts = new Charts();
var settings = {width:600, height:200 };
charts.add('LineChart', '#visualization1', settings, data1);
charts.add('LineChart', '#visualization2', settings, data2);
charts.draw();
抱歉，我自己没有测试过，只是觉得这样可能对你有帮助。
另外，我建议你从Google加载jQuery库。
google.load("jquery", "1.2.6");
希望这能帮到你 :)