グラフを描画する

<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 パッケージに含まれています。ただし、ページにツリーマップまたは地理グラフが必要な場合は、追加で「treemap」パッケージまたは「geomap」パッケージを読み込む必要があります。

Google のグラフのコンストラクタは、単一のパラメータ（可視化を描画する DOM 要素への参照）を受け取ります。

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

グラフを描画する

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

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

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

draw() を呼び出すと、グラフがページ上に描画されます。データやオプションを変更してグラフを更新するたびに、draw() メソッドを呼び出してください。

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

トラブルシューティング

ページにグラフが描画されない場合は、次の方法で問題を解決できることがあります。

  • 入力ミスを探します。JavaScript では大文字と小文字が区別されます。
    • JavaScript デバッガを使用します。Firefox では、JavaScript コンソール、 Venkman Debugger、または Firebug アドオンを使用できます。Chrome の場合は、デベロッパー ツール（Shift+Ctrl+J）を使用します。
  • GoogleVisualization API のヘルプグループを検索します。疑問の答えとなる投稿が見つからない場合は、問題を実証するウェブページへのリンクと一緒にグループに質問を投稿してください。

 

 

 

詳細情報