2

データソースの計算に python-visualization ライブラリを使用しています。1 つのページに複数のビジュアライゼーションを配置しようとしました。どちらも折れ線グラフで、データは各ビジュアライゼーションの個別の 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 番目のビジュアライゼーションは表示されません。誰かが私を助けることができますか？

4

2 に答える 2

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

申し訳ありませんが、自分自身をテストしていません。それがあなたを助けることができると思っただけです。

また、GooglejQueryからも読み込むことをお勧めします。

google.load("jquery", "1.2.6");

それがあなたを助けることを願っています:)

于 2009-09-19T18:38:58.160 に答える
0

私にも起こりました。解決策は、サーバーが reqId パラメータを返すことでした。同じページに 2 つのビジュアライゼーションがある場合、一方には reqId 0 があり、もう一方には reqId 1 があります。サーバーがこれらの reqId を応答で適切に返すことを確認してください。

両方の応答が '0' を返す場合、1 つのビジュアライゼーションのみがレンダリングされます (最初のビジュアライゼーション)。

于 2010-10-03T16:27:12.433 に答える