2

ChartWrapper クラスと ControlWrapper クラスを使用してグラフを描画するために google-chart-api を使用しています。これが私が使用しているコードです。

これは、ハードコードされたデータをロードする関数です。

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

右: new 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 を持つ 2 つの 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 に答える