2

我正在使用 google-chart-api 使用 ChartWrapper 类和 ControlWrapper 类绘制图形。这是我一直在使用的代码。

这是加载硬编码数据的功能。

   function drawVisualization() {
    // Prepare the data
    var data = google.visualization.arrayToDataTable([
      ['TimeLine', 'Time-Option', 'LOC', 'Comments'],
      ['Monthly', '1', 200, 20],
      ['Monthly', '2', 300, 30],
      ['Weekly', '1', 150, 15],
      ['Weekly', '3', 35, 3],
      ['Daily', '1', 230, 23],
      ['Daily', '2', 178, 17],

    ]);

这是我的 ControlWrapper。

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

这是我的 ChartWrapper。

        var lineChart = new google.visualization.ChartWrapper({
        'chartType': 'LineChart',
        'containerId': 'chart',
        'options': {
          'width': 900,
          'height': 500,
          'chartArea': {top: 0, right: 0, bottom: 0}
        },

        'view': {'columns': [1, 2]}
      });

   new google.visualization.DashBoard(document.getElementById('chart')).bind(timelinePicker, lineChart).draw(data);
}
    google.setOnLoadCallback(drawVisualization);

并查看图表，

  <body>
  <div id="chart">
  <table>
    <tr style='vertical-align: top'>
      <td style='width: 300px; font-size: 0.9em;'>
        <div id="control"></div>
      </td>
      <td style='width: 600px'>
        <div style="float: left;" id="chart"></div>
      </td>
    </tr>
  </table>
  </div>
  </body>

但是，我仍然没有得到任何输出。知道这里出了什么问题吗？

4

1 回答 1

4

强烈建议：始终尝试先调试自己的代码。如果您使用 firebug 或类似工具来捕获错误，那么其中有很多粗心的错误很容易被捕获。

错误 #1：仪表板 -> 仪表板

错误的：new google.visualization.DashBoard(document.getElementById('chart')).bind(timelinePicker, lineChart).draw(data);

右：新 google.visualization.Dashboard(document.getElementById('chart')).bind(timelinePicker, lineChart).draw(data);`

错误 #2：时间线 -> 时间线

错误的：'filterColumnLabel': 'Timeline',

对：'filterColumnLabel': 'TimeLine',

错误 #3：图表 -> 仪表板

错误的：new google.visualization.Dashboard(document.getElementById('chart')).bind(timelinePicker, lineChart).draw(data);

对：new google.visualization.Dashboard(document.getElementById('dashboard')).bind(timelinePicker, lineChart).draw(data);

更正 HTML（您有两个带有“图表”ID 的 div）：

  <body>
  <div id="dashboard">
  <table>
    <tr style='vertical-align: top'>
      <td style='width: 300px; font-size: 0.9em;'>
        <div id="control"></div>
      </td>
      <td style='width: 600px'>
        <div style="float: left;" id="chart"></div>
      </td>
    </tr>
  </table>
  </div>
  </body>

最终工作版本

<!--
You are free to copy and use this sample in accordance with the terms of the
Apache license (http://www.apache.org/licenses/LICENSE-2.0.html)
-->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<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 data = google.visualization.arrayToDataTable([
          ['TimeLine', 'Time-Option', 'LOC', 'Comments'],
          ['Monthly', '1', 200, 20],
          ['Monthly', '2', 300, 30],
          ['Weekly', '1', 150, 15],
          ['Weekly', '3', 35, 3],
          ['Daily', '1', 230, 23],
          ['Daily', '2', 178, 17],  
        ]);

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

        var lineChart = new google.visualization.ChartWrapper({
          'chartType': 'LineChart',
          'containerId': 'chart',
          'options': {
            'width': 900,
            'height': 500,
            'chartArea': {top: 0, right: 0, bottom: 0}
          },

          'view': {'columns': [1, 2]}
        });

        new google.visualization.Dashboard(document.getElementById('dashboard')).bind(timelinePicker, lineChart).draw(data);
      }

      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="control"></div>
          </td>
          <td style='width: 600px'>
            <div style="float: left;" id="chart"></div>
          </td>
        </tr>
      </table>
    </div>
  </body>
</html>
于 2013-03-22T00:15:16.410 回答