堆栈内存溢出
  繁体   English   中英

如何在 Google Charts 仪表板中运行两个查询并显示两个带有控件的图表

[英]How do I run two queries and display two charts with controls in a Google Charts dashboard

 原文  2016-10-06 03:24:25  3   1    javascript/ google-visualization/ google-query-language

问题描述

我在尝试使用对 Google 工作表的两个查询来设置包含两个图表和两个控件包装器的 Google 图表仪表板时遇到了问题。

我已经通过这里的许多示例演示了来自单一来源的多个图形，或对多个图表的多个查询，但没有控制方面。

我最终尝试对单个 Google 工作表运行两个查询，每个查询根据查询字符串从工作表中提取一组不同的数据，然后在图表中显示数据。 还有一个 filterColumn 控件包装器，用于从数据表中选择数据。

我有以下代码适用于一个查询和图形。 当我尝试将过程加倍以便我可以在一页中显示两者时，会出现一个或另一个图形，但不会同时出现。 我知道这可能与查询之间的冲突有关，但我不明白。 我尝试构建一个函数来运行由 google.setOnLoadCallback 函数启动的两个查询。 然而，这并没有奏效。 我尝试使用其他示例作为指南来组合各个部分，但这些都不起作用。 这是最接近的版本，当我连续刷新几次时，有时会加载一个图表，有时会加载另一个，但不会同时加载。

如果有人能指出我正确的方向，我将不胜感激。

<html>    
<head>
    <title>Google visualisation demo: chart query controls</title>

    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
        // Load the Visualization API and the controls package.
        // Packages for all the other charts you need will be loaded
        // automatically by the system.
        google.load('visualization', '1.1', {
            'packages': ['controls', 'linechart', 'corechart']
        });

        // Set a callback to run when the Google Visualization API is loaded.
        google.setOnLoadCallback(initialize);
        google.setOnLoadCallback(initialize2);

        function initialize() {
            var queryString = encodeURIComponent("select B, ((5-avg(F))*.4) + ((5-avg(G))*.4) + ((5-avg(H))*.2) + ((5-avg(I))*.125) + ((5-avg(J))*.125) where C contains 'Sept 26' and E contains 'Forced' group by B");

            // Replace the data source URL on next line with your data source URL.
            var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1_DuiDpbRyegaN0zYR4iYp8ZXefO-kIV-F054e9aIcIY/gviz/tq?gid=1757506986&headers=1&tq=' + queryString);

            // Send the query with a callback function.
            query.send(drawDashboard);
        }

        function initialize2() {
            var queryString2 = encodeURIComponent("select B, ((5-avg(F))*.4) + ((5-avg(G))*.4) + ((5-avg(H))*.2) + ((5-avg(I))*.125) + ((5-avg(J))*.125) where C contains 'Sept 26' and E contains 'Unforced' group by B");

            var query2 = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1_DuiDpbRyegaN0zYR4iYp8ZXefO-kIV-F054e9aIcIY/gviz/tq?gid=1757506986&headers=1&tq=' + queryString2);

            // Send the query with a callback function.
            query2.send(drawDashboard2);
        }

        function drawDashboard(response) {
            var data = response.getDataTable();
            // Everything is loaded. Assemble your dashboard...
            var namePicker = new google.visualization.ControlWrapper({
                'controlType': 'CategoryFilter',
                'containerId': 'filter_div',
                'options': {
                    'filterColumnLabel': 'Sample ID',
                    'ui': {
                        'labelStacking': 'vertical',
                        'allowTyping': false,
                        'allowMultiple': false
                    }
                }
            });
            var laptimeChart = new google.visualization.ChartWrapper({
                'chartType': 'Bar',
                'containerId': 'chart_div',
                'dataSourceUrl': 'https://docs.google.com/spreadsheets/d/1_DuiDpbRyegaN0zYR4iYp8ZXefO-kIV-F054e9aIcIY/gviz/tq?gid=1757506986&headers=1',
                'query': "select B, ((5-avg(F))*.4) + ((5-avg(G))*.4) + ((5-avg(H))*.2) + ((5-avg(I))*.125) + ((5-avg(J))*.125) where C contains 'Sept 26' and E contains 'Forced' group by B",
                'options': {
                    'width': 1600,
                    'height': 800,
                    axes: {
                        x: {
                            0: {
                                side: 'top',
                                label: 'Sample ID'
                            } // Top x-axis.
                        }
                    },
                    chart: {
                        title: 'Aging Panel Results',
                        subtitle: 'Beer force-aged for 2 weeks',
                    },
                    'legend': {
                        position: 'none'
                    },
                    'colors': ['#ed8907']
                }
            });

            var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div')).
            bind(namePicker, laptimeChart).
            draw(data)
        }

        function drawDashboard2(response2) {
            var data2 = response2.getDataTable();
            // Everything is loaded. Assemble your dashboard...
            var namePicker2 = new google.visualization.ControlWrapper({
                'controlType': 'CategoryFilter',
                'containerId': 'filter_div2',
                'options': {
                    'filterColumnLabel': 'Sample ID',
                    'ui': {
                        'labelStacking': 'vertical',
                        'allowTyping': false,
                        'allowMultiple': false
                    }
                }
            });
            var laptimeChart2 = new google.visualization.ChartWrapper({
                'chartType': 'Bar',
                'containerId': 'chart_div2',
                'options': {
                    'width': 1600,
                    'height': 800,
                    axes: {
                        x: {
                            0: {
                                side: 'top',
                                label: 'Sample ID'
                            } // Top x-axis.
                        }
                    },
                    chart: {
                        title: 'Aging Panel Results',
                        subtitle: 'Beer aged 2 weeks',
                    },
                    'legend': {
                        position: 'none'
                    },
                    'colors': ['Red']
                }
            });

            var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div2')).
            bind(namePicker2, laptimeChart2).
            draw(data2)
        }
    </script>

</head>

<body>

    <!--Div that will hold the dashboard-->
    <div id="dashboard_div">
        <!--Divs that will hold each control and chart-->
        <div id="filter_div"></div>
        <div id="chart_div"></div>
    </div>

    <div id="dashboard_div2">
        <!--Divs that will hold each control and chart-->
        <div id="filter_div2"></div>
        <div id="chart_div2"></div>
    </div>

</body>

</html>

1 个解决方案

解决方案1
 1 已采纳  2016-10-06 21:29:09

首先，需要使用loader.js来加载库，

这个...
<script src="https://www.gstatic.com/charts/loader.js"></script>

不是这个……
<script src="https://www.google.com/jsapi"></script>

根据发行说明...

通过jsapi加载器保持可用的 Google Charts 版本不再持续更新。 请从现在开始使用新的 gstatic 加载器。

其次，你应该每页只使用一次google.setOnLoadCallback

它也可以包含在google.charts.load语句中，如下例所示

接下来， chartType不正确，需要存在于加载的packages

对于核心图表，加载包'corechart'并使用 --> chartType: 'BarChart'

对于材料图表，加载包： 'bar' --> chartType: 'Bar'

（不推荐使用材质表，几个选项都不行）

最后，由于图表包装器是使用仪表板绘制的，
不需要这些选项 --> 'dataSourceUrl'或'query'

请参阅以下工作片段... 

 google.charts.load('current', { callback: function () { var queryString = encodeURIComponent("select B, ((5-avg(F))*.4) + ((5-avg(G))*.4) + ((5-avg(H))*.2) + ((5-avg(I))*.125) + ((5-avg(J))*.125) where C contains 'Sept 26' and E contains 'Forced' group by B"); var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1_DuiDpbRyegaN0zYR4iYp8ZXefO-kIV-F054e9aIcIY/gviz/tq?gid=1757506986&headers=1&tq=' + queryString); query.send(drawDashboard); var queryString2 = encodeURIComponent("select B, ((5-avg(F))*.4) + ((5-avg(G))*.4) + ((5-avg(H))*.2) + ((5-avg(I))*.125) + ((5-avg(J))*.125) where C contains 'Sept 26' and E contains 'Unforced' group by B"); var query2 = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1_DuiDpbRyegaN0zYR4iYp8ZXefO-kIV-F054e9aIcIY/gviz/tq?gid=1757506986&headers=1&tq=' + queryString2); query2.send(drawDashboard2); }, packages: ['controls', 'corechart'] }); function drawDashboard(response) { var namePicker = new google.visualization.ControlWrapper({ controlType: 'CategoryFilter', containerId: 'filter_div', options: { filterColumnLabel: 'Sample ID', ui: { labelStacking: 'vertical', allowTyping: false, allowMultiple: false } } }); var laptimeChart = new google.visualization.ChartWrapper({ chartType: 'BarChart', containerId: 'chart_div', options: { width: 1600, height: 800, axes: { x: { 0: { side: 'top', label: 'Sample ID' } } }, chart: { title: 'Aging Panel Results', subtitle: 'Beer force-aged for 2 weeks', }, legend: { position: 'none' }, colors: ['#ed8907'] } }); var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div')). bind(namePicker, laptimeChart). draw(response.getDataTable()); } function drawDashboard2(response) { var namePicker = new google.visualization.ControlWrapper({ controlType: 'CategoryFilter', containerId: 'filter_div2', options: { filterColumnLabel: 'Sample ID', ui: { labelStacking: 'vertical', allowTyping: false, allowMultiple: false } } }); var laptimeChart = new google.visualization.ChartWrapper({ chartType: 'BarChart', containerId: 'chart_div2', options: { width: 1600, height: 800, axes: { x: { 0: { side: 'top', label: 'Sample ID' } } }, chart: { title: 'Aging Panel Results', subtitle: 'Beer force-aged for 2 weeks', }, legend: { position: 'none' }, colors: ['#ed8907'] } }); var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div2')). bind(namePicker, laptimeChart). draw(response.getDataTable()); }
 <script src="https://www.gstatic.com/charts/loader.js"></script> <div id="dashboard_div"> <div id="filter_div"></div> <div id="chart_div"></div> </div> <div id="dashboard_div2"> <div id="filter_div2"></div> <div id="chart_div2"></div> </div>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 使用Google Charts API显示两个图表 如何在仪表板中添加按钮以在两种类型的谷歌图表之间切换 Google图表将鼠标悬停在两个图表上 使用IE显示两个图表 如何停止Google图表为单个图表创建两个SVG？ 如何使用Google图表在两个输入文件/数组之间切换？ Google在一页上绘制两个条形图 如何使用 Google Charts API 绘制两个材质图表而一个不为空？ 如何在一个页面上添加两个Google图表？ Google Charts Pie：如何在0开始两个值？
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM