記事の詳細
GoogleChartsを使用して温度計のようなゲージを表示する
前回は棒グラフや折れ線グラフの表示に関して記事にしました。
今回は、下記の温度計のようなゲージを表示する方法を紹介します。
温度計のようなゲージを表示するサンプルプログラム
下記サイトを参考にしてサンプルプログラムを作成しました。
Visualization: Gauge | Charts | Google Developers
以下サンプルプログラムになります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {'packages':['gauge']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Label', 'Value'], // 見出し ['Low', 8], // 一つ目のゲージのラベルと値（針の示す位置） ['Mid', 53], // 二つ目 ['High', 93] // 三つ目 ]); var options = { width: 600, height: 200, // 表示範囲の横幅・縦幅 max: 100, min: 0, // ゲージの最大値・最小値 redFrom: 90, redTo: 100, // 赤枠の最大値・最小値 greenColor: '#3f9cff', greenFrom: 0, greenTo: 10, // 青枠の最大値・最小値(※本来は緑枠ですが、色を指定して変えています) yellowFrom: 70, yellowTo: 90, // 黄枠の最大値・最小値 majorTicks: ['1','2','3','4','5'], // 基準となる5つの大目盛りのラベル minorTicks: 5 // 大目盛りまでの目盛りの個数 }; var chart = new google.visualization.Gauge(document.getElementById('chart_div')); chart.draw(data, options); } </script> <div id="chart_div" style="width: 600px; height: 200px;"></div> |
サンプルプログラムを実際に動かすと、下記のようなゲージが表示されます。
上記のサンプルはゲージが三つありますが、表示を一つにすることも可能です。
一つにする場合は、下記のような記述になります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {'packages':['gauge']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Label', 'Value'], // 見出し ['Low', 8] // 一つ目のゲージのラベルと値（針の示す位置） ]); var options = { width: 200, height: 200, // 表示範囲の横幅・縦幅 max: 100, min: 0, // ゲージの最大値・最小値 redFrom: 90, redTo: 100, // 赤枠の最大値・最小値 greenColor: '#3f9cff', greenFrom: 0, greenTo: 10, // 青枠の最大値・最小値(※本来は緑枠ですが、色を指定して変えています) yellowFrom: 70, yellowTo: 90, // 黄枠の最大値・最小値 majorTicks: ['1','2','3','4','5'], // 基準となる5つの大目盛りのラベル minorTicks: 5 // 大目盛りまでの目盛りの個数 }; var chart = new google.visualization.Gauge(document.getElementById('chart_div')); chart.draw(data, options); } </script> <div id="chart_div" style="width: 200px; height: 200px;"></div> |
ちょっと動きが欲しいときは、タイマーをセットして針を動かすと良いかもしれません。
サンプルプログラムは下記になります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {'packages':['gauge']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Label', 'Value'], // 見出し ['Low', 0], // 一つ目のゲージのラベルと値（針の示す位置） ['Mid', 0], // 二つ目 ['High', 0] // 三つ目 ]); var options = { width: 600, height: 200, // 表示範囲の横幅・縦幅 max: 100, min: 0, // ゲージの最大値・最小値 redFrom: 90, redTo: 100, // 赤枠の最大値・最小値 greenColor: '#3f9cff', greenFrom: 0, greenTo: 10, // 青枠の最大値・最小値(※本来は緑枠ですが、色を指定して変えています) yellowFrom: 70, yellowTo: 90, // 黄枠の最大値・最小値 majorTicks: ['1','2','3','4','5'], // 基準となる5つの大目盛りのラベル minorTicks: 5 // 大目盛りまでの目盛りの個数 }; var chart = new google.visualization.Gauge(document.getElementById('chart_div')); chart.draw(data, options); setTimeout(function() { data.setValue(0, 1, 8); // data配列の"(何行目,何列目,変更値)"を指定する chart.draw(data, options); // 再描画 }, 1000); setTimeout(function() { data.setValue(1, 1, 53); chart.draw(data, options); }, 1500); setTimeout(function() { data.setValue(2, 1, 93); chart.draw(data, options); }, 2000); } </script> <div id="chart_div" style="width: 600px; height: 200px;"></div> |
上記はsetTimeoutを活用して読み込み後に一度だけゲージの値を変更して動きのあるゲージを表示しています。
ゲージを常に動かしたい場合はsetIntervalを使って常に動かしても面白いかもしれませんね！（用途は不明ですが…ｗ）
更にちょっと補足をすると、上記サンプルの”data.setValue”の箇所を下記に変更すると、指定した秒数の後にゲージのラベルが変化します。
|
1 |
data.setValue(0, 0, 'change'); |
こちらも用途は不明ですが、針とリンクさせて面白い動きをさせることはできそうですねｗ
実際に作ってみるとこんな感じになります！
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {'packages':['gauge']}); google.charts.setOnLoadCallback(drawChart2); function drawChart2() { var gaugelabel = ['わー', 'きゃー','ぎゃー','ぴー','ひょー','うぇー','ひゅー','やー','ぶー','はい']; var data = google.visualization.arrayToDataTable([ ['Label', 'Value'], // 見出し ['お楽しみ', 0], // 一つ目のゲージのラベルと値（針の示す位置） ['お楽しみ', 0], // 二つ目 ['お楽しみ', 0] // 三つ目 ]); var options = { width: 600, height: 200, // 表示範囲の横幅・縦幅 max: 100, min: 0, // ゲージの最大値・最小値 redFrom: 90, redTo: 100, // 赤枠の最大値・最小値 greenColor: '#3f9cff', greenFrom: 0, greenTo: 10, // 青枠の最大値・最小値(※本来は緑枠ですが、色を指定して変えています) yellowFrom: 70, yellowTo: 90, // 黄枠の最大値・最小値 majorTicks: ['1','2','3','4','5'], // 基準となる5つの大目盛りのラベル minorTicks: 5 // 大目盛りまでの目盛りの個数 }; var chart = new google.visualization.Gauge(document.getElementById('chart_div2')); chart.draw(data, options); setInterval(function() { var setlabel = gaugelabel[Math.floor(Math.random() * 10)]; var setnum = Math.floor(Math.random() * 100); data.setValue(0, 0, setlabel); data.setValue(0, 1, setnum); chart.draw(data, options); }, 100); setInterval(function() { var setlabel = gaugelabel[Math.floor(Math.random() * 10)]; var setnum = Math.floor(Math.random() * 100); data.setValue(1, 0, setlabel); data.setValue(1, 1, setnum); chart.draw(data, options); }, 150); setInterval(function() { var setlabel = gaugelabel[Math.floor(Math.random() * 10)]; var setnum = Math.floor(Math.random() * 100); data.setValue(2, 0, setlabel); data.setValue(2, 1, setnum); chart.draw(data, options); }, 200); } </script> <div id="chart_div2" style="width: 600px; height: 200px;"></div> |
用途はサッパリ不明ですね…ｗ
Google Chartsはかなり楽にグラフが作れるので、Webサイトのちょっとしたギミックに設置すると見栄えが良くなるかもしれませんね！
ではまた！
この記事であなたの課題を解決することができましたか？
疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。
ほかの投稿も読んでみませんか？
コメント
この記事へのトラックバックはありません。
相模原のお店やサービスをどんどん紹介！
飲食店
サービス
この記事へのコメントはありません。