[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, 8.72], ['H20年度', 14.99 , 10.01 , 9.97, 8.21], ['H21年度', 12.91 , 6.36 , 9.81, 8.59], ['H22年度', 12.98 , 8.97 , 10.03, 8.48], ['H23年度', 13.48 , 9.35 , 10.19, 8.76], ['H24年度', 13.99 , 9.76 , 10.35, 8.75], ['H25年度', 15.53 , 10.49 , 10.83, 8.97] ]); // オプションの設定 var options = { title: '租税の年間推移 ( 単位:兆円 )', isStacked: true // 積み上げ }; // 指定されたIDの要素に段付面グラフを作成 var chart = new google.visualization.SteppedAreaChart(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(英語)で公開されているコードにコメントなどを付加してます。
スポンサーリンク
関連記事
公開日:2015年04月01日
記事NO:00622