Javascript 一页中的多个可视化
我正在使用python可视化库来计算数据源。 我尝试在一个页面中放置多个可视化。两者都是折线图,数据来自每个可视化的单独URLJavascript 一页中的多个可视化,javascript,jquery,python,django,google-visualization,Javascript,Jquery,Python,Django,Google Visualization,我正在使用python可视化库来计算数据源。 我尝试在一个页面中放置多个可视化。两者都是折线图,数据来自每个可视化的单独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" 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>
当我渲染页面时,只有第一个可视化出现,第二个可视化永远不会出现。有人能帮我吗?你可以试试类似的东西
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();
对不起,我还没有测试过自己,只是觉得它能帮你
我的建议是也从GooglejQuery加载
google.load("jquery", "1.2.6");
希望它能帮助你:)你可以试试类似的东西
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();
对不起,我还没有测试过自己,只是觉得它能帮你
我的建议是也从GooglejQuery加载
google.load("jquery", "1.2.6");
希望它能帮助你:)我也遇到过。解决方案是让服务器返回reqId参数。 如果在同一页面上有两个可视化,一个将具有reqId 0,另一个具有reqId 1。确保服务器在响应中正确地返回这些ReqID
如果两个响应都返回“0”,则只会呈现一个可视化(第一个)。我也遇到过这种情况。解决方案是让服务器返回reqId参数。 如果在同一页面上有两个可视化,一个将具有reqId 0,另一个具有reqId 1。确保服务器在响应中正确地返回这些ReqID 如果两个响应都返回“0”,则仅呈现一个可视化(第一个)