一个页面中的多个可视化效果

2024-10-01 13:41:48 发布

您现在位置：Python中文网/ 问答频道 /正文
12343 3

我使用python可视化库来计算数据源。 我试着在一个页面中放置多个可视化效果。两者都是折线图和数据来自一个单独的网址为每个可视化。在

<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>

数据源：

^{pr2}$

当我呈现页面时，只有第一个可视化显示出现，第二个可视化永远不会出现。有人能帮我吗？在


Tags： textbrdivnewresponsevar可视化type
2条回答
网友
1楼 · 编辑于 2024-10-01 13:41:48

你可以试试

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;        
    };
}

然后呢

^{pr2}$

对不起，我还没有测试，只是觉得它能帮你。在

我的建议是从googlejquery加载。在

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

希望对您有帮助：）

网友
2楼 · 编辑于 2024-10-01 13:41:48

也发生在我身上。返回给服务器的参数是reqId。 如果在同一页面上有两个可视化效果，一个将具有reqId 0，另一个具有reqId 1。确保服务器在响应中适当地返回这些reqid。在

如果两个响应都返回“0”，则仅呈现一个可视化效果（第一个）。在

相关问题 更多 >

    编程相关推荐