記事の詳細

前回は棒グラフや折れ線グラフの表示に関して記事にしました。

コピペでOK!「Chart.js」を活用してWebページに棒グラフや折れ線グラフを表示する方法
Webページで折れ線グラフや棒グラフを表現する方法を調べてみたら「Chart.js」を使った非常に簡単な実装方法があったのでご紹介します。グラフを作成する際の準備「Char...

今回は、下記の温度計のようなゲージを表示する方法を紹介します。
ゲージサンプル

温度計のようなゲージを表示するサンプルプログラム

下記サイトを参考にしてサンプルプログラムを作成しました。
Visualization: Gauge | Charts | Google Developers

以下サンプルプログラムになります。

サンプルプログラムを実際に動かすと、下記のようなゲージが表示されます。

上記のサンプルはゲージが三つありますが、表示を一つにすることも可能です。
一つにする場合は、下記のような記述になります。

ちょっと動きが欲しいときは、タイマーをセットして針を動かすと良いかもしれません。
サンプルプログラムは下記になります。

上記はsetTimeoutを活用して読み込み後に一度だけゲージの値を変更して動きのあるゲージを表示しています。
ゲージを常に動かしたい場合はsetIntervalを使って常に動かしても面白いかもしれませんね!(用途は不明ですが…w)

更にちょっと補足をすると、上記サンプルの”data.setValue”の箇所を下記に変更すると、指定した秒数の後にゲージのラベルが変化します。

こちらも用途は不明ですが、針とリンクさせて面白い動きをさせることはできそうですねw
実際に作ってみるとこんな感じになります!

用途はサッパリ不明ですね…w

Google Chartsはかなり楽にグラフが作れるので、Webサイトのちょっとしたギミックに設置すると見栄えが良くなるかもしれませんね!

ではまた!

 

この記事であなたの課題を解決することができましたか?

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

The following two tabs change content below.
網干 裕介

網干 裕介

Webサイト制作の際に活用するJavaScript、PHP等のプログラム関係を担当しています。過去にはC、C++、C#等を活用したソフトウェア開発も行っていました。小難しい記事を書くことが多いのですが、本人はそこまで小難しい性格……じゃなければ良いなぁと思ってます!

ほかの投稿も読んでみませんか?

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

AD

ページ上部へ戻る