javascript - 如何在 Google Charts 仪表板中运行两个查询并使用控件显示两个图表

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

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

我最终尝试运行单个 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>

最佳答案

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

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

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

根据release notes ...

The version of Google Charts that remains available via the jsapi loader is no longer being updated consistently. Please use the new gstatic loader from now on.

第二，您应该只使用google.setOnLoadCallback每页一次

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

下一步chartType不正确，需要存在于 packages 中已加载

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

对于 Material 图表，加载包:'bar' --> chartType: 'Bar'

(不建议使用 Material 图表，有几个选项不起作用)

最后，由于图表包装器是使用仪表板绘制的，
不需要这些选项 --> '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>

关于javascript - 如何在 Google Charts 仪表板中运行两个查询并使用控件显示两个图表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39887008/

javascript - 如何在 Google Charts 仪表板中运行两个查询并使用控件显示两个图表

上一篇：javascript - Firefox 中半透明矩形的 SVG 网格

下一篇：javascript - xhr 未定义 | Mithril js