選挙速報の得票数集計結果のグラフなど、徐々に棒グラフの棒が伸びていくようなグラフ。
JavaScriptで作成したこのようなグラフの作り方の情報は存在するのですが、どれもアレンジが効いていて「グラフを作る」のみのシンプルな情報を見つけるのに苦労しました。
同じような境遇の方に向け、JavaScript版徐々にバーが伸びてゆくグラフ”部分のみ”のコードを共有します。
JS版「徐々にバーが伸びてゆくグラフ」
今回作成するJavaScript版「徐々にバーが伸びてゆくグラフ」の仕上がり状態を、以下の簡易動画で示します。
徐々にバーが伸びてゆくグラフのソースコード
徐々にバーが伸びてゆくグラフのソースは以下です。
グラフのバーに当たる部分は今回は画像で対応しているため、適当な大きさの”graph.gif”を作成しておきます。
適当なというのは、実際に表示されるバーの長さはJavaScript側で計算しているため、最大長さに設定した“graph.gif”をひとつ用意するという意味です。
今回は横方向のバーですが、widthをheightに変えると縦に棒が伸びるグラフになります。
