文章/答案/技术大牛

发布

社区首页 >问答首页 >google图表中的多个数据源作为数组

问google图表中的多个数据源作为数组
EN

Stack Overflow用户

提问于 2012-11-23 11:06:49

回答 2查看 2.9K关注 0票数 0

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

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

这里是我的代码

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

上述代码显示水务署。

charts

google-visualization

javascript

回答 2

Stack Overflow用户

回答已采纳

发布于 2012-11-24 06:28:21

代码中很少有错误。

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

到你的主页上。

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

代码的一个工作示例可在小提琴上使用。

票数 0

Stack Overflow用户

发布于 2013-05-23 09:45:28

我对自己的问题有了答案。需要将绑定到每个仪表板的控件分开。一个不能与两个数据源共享两个仪表板的控件。只要有一个单独的控制，它就能工作了。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/13527826

复制

相似问题

问google图表中的多个数据源作为数组
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问google图表中的多个数据源作为数组EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问google图表中的多个数据源作为数组
EN