一个页面中的多个可视化效果
一个页面中的多个可视化效果
提问于 2009-09-19 14:24:52
我使用python- library库来计算数据源。我试图在一个页面中放入多个可视化内容。这两个都是折线图，每个可视化的数据都来自单独的URL。
<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
Stack Overflow用户
发布于 2009-09-19 18:38:58
你可以尝试像这样的东西
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");希望它能帮助你:)
Stack Overflow用户
发布于 2010-10-04 00:27:12
我也遇到过这种情况。解决方案是让服务器返回reqId参数。如果您在同一个页面上有两个可视化，其中一个将具有reqId 0，另一个将具有reqId 1。请确保服务器在响应中适当地返回这些reqIds。
如果两个响应都返回'0‘，则只会呈现一个可视化(第一个)。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/1448638
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号