[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
この記事を書いた人
![]() | 💻 ITスキル・経験 サーバー構築からWebアプリケーション開発。IoTをはじめとする電子工作、ロボット、人工知能やスマホ/OSアプリまで分野問わず経験。 画像処理/音声処理/アニメーション、3Dゲーム、会計ソフト、PDF作成/編集、逆アセンブラ、EXE/DLLファイルの書き換えなどのアプリを公開。詳しくは自己紹介へ |
プチモンテ代表、アーティスト名:プチモンテ | |
🎵 音楽制作 BGMは楽器(音源)さえあれば、何でも制作可能。歌モノは主にロック、バラード、ポップスを制作。歌詞は叙情詩、叙情的な楽曲が多い。楽曲制作は2023年12月中旬 ~ |
オリジナル曲を始めました✨
YouTubeで各楽曲を公開しています🌈
https://www.youtube.com/@petitmonte