グラフを描画する

<html>
  <head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">

      // Load the Visualization API and the piechart package.
      google.charts.load('current', {'packages':['corechart']});

      // Set a callback to run when the Google Visualization API is loaded.
      google.charts.setOnLoadCallback(drawChart);

      // Callback that creates and populates a data table, 
      // instantiates the pie chart, passes in the data and
      // draws it.
      function drawChart() {

      // Create the data table.
      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Topping');
      data.addColumn('number', 'Slices');
      data.addRows([
        ['Mushrooms', 3],
        ['Onions', 1],
        ['Olives', 1],
        ['Zucchini', 1],
        ['Pepperoni', 2]
      ]);

      // Set chart options
      var options = {'title':'How Much Pizza I Ate Last Night',
                     'width':400,
                     'height':300};

      // Instantiate and draw our chart, passing in some options.
      var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    }
    </script>
  </head>

  <body>
//Div that will hold the pie chart
    <div id="chart_div" style="width:400; height:300"></div>
  </body>
</html>

最後にグラフを描画します。まず、使用するグラフクラスのインスタンスをインスタンス化してから、そのインスタンスで draw() を呼び出す必要があります。

グラフをインスタンス化する

グラフの種類は、グラフのドキュメントに記載されているさまざまなクラスに基づいています。たとえば、円グラフは google.visualization.PieChart クラスをベースとし、棒グラフは google.visualization.BarChart クラスを基準とします。円グラフと棒グラフは、このチュートリアルの最初に読み込んだ corechart パッケージに含まれます。ただし、ページにツリーマップまたはマップチャートを表示したい場合は、「ツリーマップ」または「ジオマップ」パッケージを追加で読み込む必要があります。

Google グラフのコンストラクタは、ただ一つのパラメータ（ビジュアリゼーションを描画する DOM 要素への参照）を取ります。

  var chart = new google.visualization.PieChart(document.getElementById('chart_div'));

グラフを描画する

データとオプションを準備したら、グラフを描画できます。

チャートを保持する HTML 要素（通常は <div>）が必要です。この要素への参照をグラフに渡す必要があるため、document.getElementById() を使用して参照を取得する際に使用する ID を割り当てます。この要素内にあるものはすべて、描画時にグラフに置き換えられます。この <div> 要素を明示的にサイズ設定すべきかどうかを考慮しますが、今のところは <div> HTML でグラフサイズを指定します。

すべてのグラフは、データを保持する DataTable（または DataView）オブジェクトとオプションのグラフ オプション オブジェクトという 2 つの値を受け取る draw() メソッドをサポートしています。options オブジェクトは必須ではありません。無視したり、グラフのデフォルト オプションを使用する場合は null を渡したりできます。

draw() を呼び出すと、ページにグラフが描画されます。データまたはオプションを変更してグラフを更新する場合は、そのたびに draw() メソッドを呼び出す必要があります。

draw() メソッドは非同期です。つまり、すぐに返されますが、返されるインスタンスはすぐに利用できない場合があります。多くの場合、これで問題ありません。グラフは最終的に描画されます。ただし、draw() の呼び出し後にグラフの値を設定または取得する場合は、そのイベントに値が設定されたことを示す ready イベントがスローされるのを待つ必要があります。イベントをリッスンする方法については、次のページで説明します。

トラブルシューティング

ページにグラフが描画されない場合は、次の方法をお試しください。

  • 入力ミスを探します。JavaScript では大文字と小文字が区別されることに注意してください。
    • JavaScript デバッガを使用します。Firefox では、JavaScript コンソール、Venkman Debugger、または Firebug アドオンを使用できます。Chrome では、デベロッパー ツール（Shift+Ctrl+J）を使用できます。
  • Google Visualization API のディスカッション グループを検索します。質問に対する投稿が見つからない場合は、その問題を説明したウェブページへのリンクとともに、グループに投稿します。

 

 

 

詳細情報