Question

我做了什么？ 我正在构建一个包含多个数据的仪表板。数据采用数组形式。

我需要实施什么？ 我已经在教程的帮助下实现了仪表板，但我无法实现其他数据源。

这是我的代码

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>

<title>
          Google Visualization API Sample
        </title>

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load('visualization', '1.1', {packages: ['controls']});
</script>
<script type="text/javascript">

function drawVisualization() {

// Prepare the data
      var data1 = google.visualization.arrayToDataTable([
        ['Name', 'Type', 'Precheck Alarms', 'Postcheck Alarms'],
        ['Michael' , 'Type1', 12, 5],
        ['Elisa', 'Type2', 20, 7],
        ['Robert', 'Type1', 7, 3],
        ['John', 'Type1', 54, 2],
        ['Jessica', 'Type2', 22, 6],
        ['Aaron', 'Type1', 3, 1],
        ['Margareth', 'Type2', 42, 8],
        ['Miranda', 'Type2', 33, 6]
      ]);
       var data2 = google.visualization.arrayToDataTable([
        ['Name', 'Type', 'Precheck Alarms', 'Postcheck Alarms'],
        ['Michael' , 'Type1', 12, 5],
        ['Elisa', 'Type2', 20, 7],
        ['Robert', 'Type1', 7, 3],
        ['John', 'Type1', 54, 2],
        ['Jessica', 'Type2', 22, 6],
        ['Aaron', 'Type1', 3, 1],
        ['Margareth', 'Type2', 42, 8],
        ['Miranda', 'Type2', 33, 6]
      ]);     

  // Define a category picker control for the Type column



 var categoryPicker = new google.visualization.ControlWrapper({
    'controlType': 'CategoryFilter',
    'containerId': 'control2',
    'options': {
      'filterColumnLabel': 'Type',
      'ui': {
      'labelStacking': 'vertical',
        'allowTyping': false,
        'allowMultiple': false
      }
    }
  });

  // Define a Pie chart
  var columns_alarms = new google.visualization.ChartWrapper({
    'chartType': 'ColumnChart',
    'containerId': 'chart1',
    'options': {
      'width': 600,
      'height': 600,
      'legend': 'none',
      'title': 'Alarms',
      'chartArea': {'left': 15, 'top': 15, 'right': 0, 'bottom': 0},
      //'pieSliceText': 'label'
    },
    // Instruct the piechart to use colums 0 (Name) and 3 (Donuts Eaten)
    // from the 'data' DataTable.
    'view': {'columns': [0, 2,3]}
  });

  // Define a table


 var table_alarms = new google.visualization.ChartWrapper({
    'chartType': 'Table',
    'containerId': 'chart2',
    'options': {
      'width': '300px'
    }
  });
 var columns_kpi = new google.visualization.ChartWrapper({
    'chartType': 'ColumnChart',
    'containerId': 'chart4',
    'options': {
      'width': 600,
      'height': 600,
      'legend': 'none',
      'title': 'Alarms',
      'chartArea': {'left': 15, 'top': 15, 'right': 0, 'bottom': 0},
      //'pieSliceText': 'label'
    },

    // Instruct the piechart to use colums 0 (Name) and 3 (Donuts Eaten)
    // from the 'data' DataTable.
    'view': {'columns': [0, 2,3]}
  });

  // Define a table
  var table_kpi = new google.visualization.ChartWrapper({
    'chartType': 'Table',
    'containerId': 'chart5',
    'options': {
      'width': '300px'
    }
  });

  // Create a dashboard
  new google.visualization.Dashboard(document.getElementById('dashboard_alarms')).
  new google.visualization.Dashboard(document.getElementById('dashboard_kpi')).
      // Establish bindings, declaring the both the slider and the category
      // picker will drive both charts.
      bind([categoryPicker], [columns_kpi, table_kpi,columns_alarms, table_alarms]).
      // Draw the entire dashboard.
      draw(data1);
      draw(data2);

}


      google.setOnLoadCallback(drawVisualization);
    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div id="dashboard">
      <table>
        <tr style='vertical-align: top'>
          <td style='width: 300px; font-size: 0.9em;'>
            <div id="control1"></div>
            <div id="control2"></div>
            <div id="control3"></div>
          </td>
          <td style='width: 600px'>
            <div style="float: left;" id="chart1"></div>
            <div style="float: left;" id="chart2"></div>
            <div style="float: left;" id="chart3"></div>
            <div style="float: left;" id="chart4"></div>
            <div style="float: left;" id="chart5"></div>
          </td>
        </tr>
      </table>
    </div>
  </body>
</html>

以上代码呈现WSD。

Answer 1

您的代码中几乎没有错误。

 new google.visualization.Dashboard(document.getElementById('dashboard_alarms')).
 new google.visualization.Dashboard(document.getElementById('dashboard_kpi')).

应该是

 new google.visualization.Dashboard(document.getElementById('dashboard_alarms'));
 new google.visualization.Dashboard(document.getElementById('dashboard_kpi')).

（“。”应该是第一行末尾的“;”）

同样在两行中，您引用ID为dashboard_alarms和dashboard_kpi的元素，但您的html中没有这些元素。您应该添加标签

<div id="dashboard_alarms"/>
<div id="dashboard_kpi"/>

到您的HTML。

如果您使用的是Firefox，则可以使用firebug来调试JavaScript代码。 Goole chrome也可能有一个javascrpt调试器。使用javascript调试器，您可以诊断出这些问题的原因。

jsfiddle提供了代码的工作示例。

Answer 2

我得到了自己问题的答案。需要分开绑定到每个仪表板的控件。对于两个仪表板，无法与两个数据源共享控件。只需要一个单独的控件就可以了。

多个数据源作为谷歌图表仪表板api中的数组

2 个答案: