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

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

Google Chartsで複合グラフを作成するサンプルです。複合グラフは棒グラフと折れ線グラフなどを複合したグラフです。業務などでは頻繁に使用される利用頻度の高いグラフです。

サンプル

棒グラフと折れ線グラフによる複合グラフのサンプルです。

サンプルコード

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">

  // ライブラリのロード
  // name:visualization(可視化),version:バージョン(1),packages:パッケージ(corechart)
  google.load('visualization', '1', {'packages':['corechart']});     
         
  // グラフを描画する為のコールバック関数を指定
  google.setOnLoadCallback(drawChart);

  // グラフの描画   
  function drawChart() {         
        
    // 配列からデータの生成
    var data = google.visualization.arrayToDataTable([
      ['年度', '所得税', '法人税','消費税','平均'],
      ['H19年度',  16.08 , 14.74 , 10.27, 13.69],
      ['H20年度',  14.99 , 10.01 ,  9.97, 11.6],            
      ['H21年度',  12.91 ,  6.36 ,  9.81,  9.6],
      ['H22年度',  12.98 ,  8.97 , 10.03, 10.6], 
      ['H23年度',  13.48 ,  9.35 , 10.19, 11.0],
      ['H24年度',  13.99 ,  9.76 , 10.35, 11.3],
      ['H25年度',  15.53 , 10.49 , 10.83, 12.2]  
    ]);

    // オプションの設定
    var options = {
      title: '租税の年間推移 ( 単位：兆円 )',
      seriesType: "bars",         // グラフの種類(line:折れ線,bars:棒グラフ,candlesticks:ローソク足, steppedArea:段付面グラフ)
      series: {3: {type: "line"}} // 平均だけを折れ線グラフにする(数値:配列の順番(0から開始),type:seriesTypeと同等)
    };        
                
    // 指定されたIDの要素にコンボチャートを作成
    var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));

    // グラフの描画
    chart.draw(data, options);
  }
  
</script>
</head>
<body>
  
  <!--  グラフの描画エリア -->
  <div id="chart_div" style="width: 100%; height: 350px"></div>
  
</body>
</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：00619