左から 緑〜黄〜赤 に変化する棒グラフをJavaScriptとCSS3で書いてみた

こんな感じのグラフを書いてみた

このエントリの目次

1. jsdo.itに置いています
2. 緑、黄色、赤のRGB
3. RGBで緑、黄色、赤のグラデーションを表すには
4. JavaScriptとCSS3でグラデーションさせる
5. さいごに

1.jsdo.itに置いています

こちらです。
Ubuntu の chrome と firefox で動作確認しています。

2.緑、黄色、赤のRGB

RGBは「Red」、「Green」、「Blue」の頭文字を取ったもので、赤緑青がそれぞれ0〜ffの16進数で表現されます。

緑、黄色、赤をRGBで表現すると、

1. 緑 = #00ff00
2. 黄色 = #ffff00
3. 赤 = #ff0000

となります。

3.RGBで緑、黄色、赤のグラデーションを表すには

下の絵のとおりです。



黄色になるところがグラフの丁度真ん中です。

赤は黄色になるまで正比例で0から255に増していき、それ以降はずっと255です。
緑は黄色になるまでずっと255で、それ以降は0から255で正比例で減っていきます。
青はずっと0です。

4.JavaScriptとCSS3でグラデーションさせる

グラデーションはCSS3 の linear-gradient()関数を使っています。
このサイトに詳しく載っています。

JavaScript はRGBを計算するんですが、棒グラフの長さが50%未満のとき と 50%以上のとき、2つの場合に分けて考えます。

50%未満のとき

このときは、右端の色を計算します。
緑と黄色の中間の色になります。

50%以上のとき

このときは、右端が黄色と赤の間の色になるので、それを計算します。
さらにlinear-gradient()関数の性質上、丁度50%のときの黄色が、グラフの全横幅に対してどの割合の位置になるのかを求める必要があるので、それも計算します。


言葉では分かりづらいと思うので、最初にリンクしたjsdo.itを参考にしていただければ。
JavaScript のところにコメントも細かく書いています。

5.さいごに

CSS3は便利ですねー。

何かのお役に立てれば。
それでは。