ホーム > カテゴリ > HTML5・JavaScript >

[Google Charts]棒グラフを作成する

Google Chartsで棒グラフを作成するサンプルです。棒グラフは折れ線グラフや円グラフなどのように一般的に使用されているグラフです。2つ以上の値を比較する際に用いられます。

サンプル

棒グラフのサンプルです。(標準)

棒グラフ(横)

棒グラフ(積み上げ)

サンプルコード

  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4. <script type="text/javascript" src="https://www.google.com/jsapi"></script>
  5. <script type="text/javascript">
  6.  
  7.   // ライブラリのロード
  8.   // name:visualization(可視化),version:バージョン(1),packages:パッケージ(corechart)
  9.   google.load('visualization', '1', {'packages':['corechart']});     
  10.          
  11.   // グラフを描画する為のコールバック関数を指定
  12.   google.setOnLoadCallback(drawChart);
  13.  
  14.   // グラフの描画   
  15.   function drawChart() {         
  16.         
  17.     // 配列からデータの生成
  18.     var data = google.visualization.arrayToDataTable([
  19.       ['年度', '所得税', '法人税','消費税'],
  20.       ['H19年度',  16.08 , 14.74 , 10.27],
  21.       ['H20年度',  14.99 , 10.01 ,  9.97],            
  22.       ['H21年度',  12.91 ,  6.36 ,  9.81],
  23.       ['H22年度',  12.98 ,  8.97 , 10.03], 
  24.       ['H23年度',  13.48 ,  9.35 , 10.19],
  25.       ['H24年度',  13.99 ,  9.76 , 10.35],
  26.       ['H25年度',  15.53 , 10.49 , 10.83]  
  27.     ]);
  28.  
  29.     // オプションの設定
  30.     var options = {
  31.       title: '租税の年間推移 ( 単位：兆円 )',
  32.     };        
  33.     
  34.     /* 積み上げ棒グラフ
  35.     // オプションの設定
  36.     var options = {
  37.       title: '租税の年間推移 ( 単位：兆円 )',
  38.       isStacked: true
  39.     };    
  40.     */
  41.                  
  42.     // 指定されたIDの要素に棒グラフを作成
  43.     var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
  44.  
  45.   /* 横グラフ
  46.     // 指定されたIDの要素に棒グラフを作成
  47.     var chart = new google.visualization.BarChart(document.getElementById('chart_div'));    
  48.   */ 
  49.     // グラフの描画
  50.     chart.draw(data, options);
  51.   }
  52.   
  53. </script>
  54. </head>
  55. <body>
  56.   
  57.   <!--  グラフの描画エリア -->
  58.   <div id="chart_div" style="width: 100%; height: 350px"></div>
  59.   
  60. </body>
  61. </html>

サンプルの解説(Javascript)

1. google.load()でライブラリをロードします。
2. google.setOnLoadCallback(drawChart)でコールバックを設定します。
3. コールバック先のdrawChart()でグラフを描画します。

<データの生成>
サンプルの書式を参考に改変すれば、データを増減できます。データを生成する方法はarrayToDataTable()とDataTable()の2種類あります。共に見出し部分は「'(シングルクォーテーション)」または「"(ダブルクォーテーション)」で括る必要があります。

サンプルの解説(HTML)

Javascript側で指定した「id=chart_div」の要素を使用して

<div id="chart_div" style="width: 100%; height: 350px"></div>

でグラフの描画エリアを指定します。widthやheightなどは自由に変更できます。

グラフ関連記事の目次

Google Chartsの使い方とまとめ

出典

ここで公開されているサンプルはGoogle Charts(英語)で公開されているコードにコメントなどを付加してます。





関連記事


前の記事：[Google Charts]円グラフを作成する
次の記事：[Google Charts]散布図を作成する

公開日：2015年04月01日
記事NO：00616