[Google Charts]面グラフを作成する
Google Chartsで面グラフを作成するサンプルです。面グラフは折れ線グラフの範囲内の部分を塗りつぶしたものです。主に2つ以上の値で累積値を比較するのに使用されます。
サンプル
面グラフのサンプルです。
サンプルコード
<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([ ['年度', '販売価格','経費'], ['H21年度', 1000 ,780], ['H22年度', 1100 ,850], ['H23年度', 1000 ,980], ['H24年度', 980 ,800], ['H25年度', 950 ,780] ]); // オプションの設定 var options = { title: '販売価格と経費の年間推移 ( 単位:円 )', hAxis: {title: '経費'}, vAxis: {title: '販売価格'} }; // 指定されたIDの要素に面グラフを作成 var chart = new google.visualization.AreaChart(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:00621
この記事を書いた人
![]() | 💻 ITスキル・経験 サーバー構築からWebアプリケーション開発。IoTをはじめとする電子工作、ロボット、人工知能やスマホ/OSアプリまで分野問わず経験。 画像処理/音声処理/アニメーション、3Dゲーム、会計ソフト、PDF作成/編集、逆アセンブラ、EXE/DLLファイルの書き換えなどのアプリを公開。詳しくは自己紹介へ |
プチモンテ代表、アーティスト名:プチモンテ | |
🎵 音楽制作 BGMは楽器(音源)さえあれば、何でも制作可能。歌モノは主にロック、バラード、ポップスを制作。歌詞は叙情詩、叙情的な楽曲が多い。楽曲制作は2023年12月中旬 ~ |
オリジナル曲を始めました✨
YouTubeで各楽曲を公開しています🌈
https://www.youtube.com/@petitmonte