javascript之一个页面中的多个可视化

我正在使用 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"> 
        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",))) 

当我渲染页面时，只有第一个可视化出现，第二个可视化永远不会出现。有人可以帮助我吗？

请您参考如下方法:

你可以尝试类似的东西

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"); 

希望对你有帮助:)