如何将第二个图表添加到谷歌图表的仪表板中？答案

【问题标题】：How to add second chart into the dashboard in google charts?如何将第二个图表添加到谷歌图表的仪表板中？
【发布时间】：2017-06-19 20:30:00
【问题描述】：

我想显示 3 个图表和一个控制器。我有一个图表和一个控制器。现在我需要使用同一个数据库（电子表格链接）来创建除饼图之外的另外两个图表，例如条形图或折线图或....到目前为止我的代码如下。

我最近开始使用 javascript，这只是我的第一周，所以我不知道如何让它工作。任何帮助表示赞赏。

附：您可以使用任何您想要的图表列。

<html>

<head>
  <!--Load the AJAX API-->
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
    // Load the Visualization API and the controls package.
    google.charts.load('current', {
      'packages': ['corechart', 'controls']
    });

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

    // Callback that creates and populates a data table,
    // instantiates a dashboard, a range slider and a pie chart,
    // passes in the data and draws it.
    function drawDashboard() {

      // Create our data table.
      var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1PlT8k6qXsCkOCEEJFn7apKYgDunLi1Lzmnmo_AKQBXc/edit#gid=0');

      query.setQuery('SELECT C,H LIMIT 10 OFFSET 3');
      query.send(handleQueryResponse);
    }

    function handleQueryResponse(response) {

      if (response.isError()) {
        alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
        return;
      }

      var data = response.getDataTable();


      var data_view = new google.visualization.DataView(data);
      data_view.setColumns([
        // 0'th column formatted to string.
        {
          calc: function(data, row) {
            return data.getFormattedValue(row, 0);
          },
          type: 'string'
        },
        // 1th column.
        1
      ]);

      // Create a dashboard.
      var dashboard = new google.visualization.Dashboard(
        document.getElementById('dashboard_div'));

      // Create a range slider, passing some options
      var donutRangeSlider = new google.visualization.ControlWrapper({
        'controlType': 'NumberRangeFilter',
        'containerId': 'filter_div',
        'options': {
          'filterColumnIndex': 1
        }
      });

      // Create a pie chart, passing some options
      var pieChart = new google.visualization.ChartWrapper({
        'chartType': 'PieChart',
        'containerId': 'chart_div',
        'options': {
          'width': 300,
          'height': 300,
          'pieSliceText': 'value',
          'legend': 'right'
        }
      });

      // Establish dependencies, declaring that 'filter' drives 'pieChart',
      // so that the pie chart will only display entries that are let through
      // given the chosen slider range.
      dashboard.bind(donutRangeSlider, pieChart);

      // Draw the dashboard.
      dashboard.draw(data_view);
    }
  </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>


</body>

</html>

【问题讨论】：

标签： javascript html charts google-visualization

【解决方案1】：

如果使用相同的数据源，则只需在与现有图表相同的功能中添加更多图表...

一定要添加容器<div>

仪表板将采用一系列控件和/或图表...

dashboard.bind(donutRangeSlider, [pieChart, colChart, lineChart]);

请参阅以下工作 sn-p...

<html>

<head>
  <!--Load the AJAX API-->
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
    // Load the Visualization API and the controls package.
    google.charts.load('current', {
      'packages': ['corechart', 'controls']
    });

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

    // Callback that creates and populates a data table,
    // instantiates a dashboard, a range slider and a pie chart,
    // passes in the data and draws it.
    function drawDashboard() {

      // Create our data table.
      var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1PlT8k6qXsCkOCEEJFn7apKYgDunLi1Lzmnmo_AKQBXc/edit#gid=0');

      query.setQuery('SELECT C,H LIMIT 10 OFFSET 3');
      query.send(handleQueryResponse);
    }

    function handleQueryResponse(response) {

      if (response.isError()) {
        alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
        return;
      }

      var data = response.getDataTable();


      var data_view = new google.visualization.DataView(data);
      data_view.setColumns([
        // 0'th column formatted to string.
        {
          calc: function(data, row) {
            return data.getFormattedValue(row, 0);
          },
          type: 'string'
        },
        // 1th column.
        1
      ]);

      // Create a dashboard.
      var dashboard = new google.visualization.Dashboard(
        document.getElementById('dashboard_div'));

      // Create a range slider, passing some options
      var donutRangeSlider = new google.visualization.ControlWrapper({
        'controlType': 'NumberRangeFilter',
        'containerId': 'filter_div',
        'options': {
          'filterColumnIndex': 1
        }
      });

      // Create a pie chart, passing some options
      var pieChart = new google.visualization.ChartWrapper({
        'chartType': 'PieChart',
        'containerId': 'chart_div',
        'options': {
          'width': 300,
          'height': 300,
          'pieSliceText': 'value',
          'legend': 'right'
        }
      });

      // Create a column chart
      var colChart = new google.visualization.ChartWrapper({
        'chartType': 'ColumnChart',
        'containerId': 'chart_div_col',
        'options': {
          'width': 300,
          'height': 300,
          'pieSliceText': 'value',
          'legend': 'right'
        }
      });

      // Create a line chart
      var lineChart = new google.visualization.ChartWrapper({
        'chartType': 'LineChart',
        'containerId': 'chart_div_line',
        'options': {
          'width': 300,
          'height': 300,
          'pieSliceText': 'value',
          'legend': 'right'
        }
      });

      // Establish dependencies, declaring that 'filter' drives 'pieChart',
      // so that the pie chart will only display entries that are let through
      // given the chosen slider range.
      dashboard.bind(donutRangeSlider, [pieChart, colChart, lineChart]);

      // Draw the dashboard.
      dashboard.draw(data_view);
    }
  </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 id="chart_div_col"></div>
    <div id="chart_div_line"></div>
  </div>


</body>

</html>

【讨论】：