Javascript google charts dashboard api中作为数组的多个数据源_Javascript_Charts_Google Visualization

Javascript google charts dashboard api中作为数组的多个数据源

javascript charts google-visualization

Javascript google charts dashboard api中作为数组的多个数据源,javascript,charts,google-visualization,Javascript,Charts,Google Visualization,我做了什么？我正在构建一个包含多个数据的仪表板。数据以数组的形式存在我需要实施什么？在本教程的帮助下，我已经实现了仪表板，但我无法实现其他数据源这是我的代码 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>

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

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

这是我的代码

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


谷歌可视化API示例
load（'visualization'，'1.1'，{packages:['controls']}）；
函数drawVisualization（）{
//准备数据
var data1=google.visualization.arrayToDataTable([
[‘名称’、‘类型’、‘预检查报警’、‘后检查报警’]，
[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([
[‘名称’、‘类型’、‘预检查报警’、‘后检查报警’]，
[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 categoryPicker=new google.visualization.ControlWrapper({
“controlType”：“CategoryFilter”，
“containerId”：“control2”，
“选项”：{
'filterColumnLabel'：'Type'，
“用户界面”：{
“标签固定”：“垂直”，
“allowTyping”：false，
“allowMultiple”：false
}
}
});
//定义饼图
var columns\u alarms=new google.visualization.ChartWrapper({
“chartType”：“ColumnChart”，
“集装箱运输”：“图表1”，
“选项”：{
“宽度”：600，
‘高度’：600，
“图例”：“无”，
“标题”：“警报”，
'chartArea'：{'left'：15，'top'：15，'right'：0，'bottom'：0}，
//“文本”：“标签”
},
//指示饼图使用第0列（名称）和第3列（已吃甜甜圈）
//从“数据”数据表中。
“视图”：{“列”：[0,2,3]}
});
//定义一个表
var table_alarms=新的google.visualization.ChartWrapper({
“图表类型”：“表格”，
“集装箱运输”：“图表2”，
“选项”：{
“宽度”：“300px”
}
});
var columns\u kpi=new google.visualization.ChartWrapper({
“chartType”：“ColumnChart”，
“集装箱运输”：“图表4”，
“选项”：{
“宽度”：600，
‘高度’：600，
“图例”：“无”，
“标题”：“警报”，
'chartArea'：{'left'：15，'top'：15，'right'：0，'bottom'：0}，
//“文本”：“标签”
},
//指示饼图使用第0列（名称）和第3列（已吃甜甜圈）
//从“数据”数据表中。
“视图”：{“列”：[0,2,3]}
});
//定义一个表
var table_kpi=新的google.visualization.ChartWrapper({
“图表类型”：“表格”，
“集装箱运输”：“图表5”，
“选项”：{
“宽度”：“300px”
}
});
//创建仪表板
新的google.visualization.Dashboard（document.getElementById（'Dashboard\u alarms'））。
新的google.visualization.Dashboard（document.getElementById（'Dashboard_kpi'））。
//建立绑定，同时声明滑块和类别
//选择器将驱动两个图表。
绑定（[categoryPicker]、[columns\u kpi、table\u kpi、columns\u alarms、table\u alarms]）。
//绘制整个仪表板。
抽签（数据1）；
抽签（数据2）；
}
setOnLoadCallback（drawVisualization）；

上面的代码呈现WSD。

代码中几乎没有错误

 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\u alarms

和

dashboard\u kpi

引用元素，但html中没有这些元素。你应该添加标签

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

到您的html

如果使用Firefox，可以使用调试javascript代码。Goole chrome可能也有一个javascrpt调试器。使用javascript调试器，您可以诊断此类问题的原因

代码的一个工作示例可以在上找到。

我得到了我自己问题的答案。需要将绑定到每个仪表板的控件分开。不能为两个仪表板使用两个数据源共享一个控件。只要有一个单独的控件，一切都可以正常工作