【JavaScript 基礎】徐々にバーが伸びてゆくグラフの作り方

選挙速報の得票数集計結果のグラフなど、徐々に棒グラフの棒が伸びていくようなグラフ。

JSグラフを作る

JavaScriptで作成したこのようなグラフの作り方の情報は存在するのですが、どれもアレンジが効いていて「グラフを作る」のみのシンプルな情報を見つけるのに苦労しました。

同じような境遇の方に向け、JavaScript版徐々にバーが伸びてゆくグラフ”部分のみ”のコードを共有します。

JS版「徐々にバーが伸びてゆくグラフ」

今回作成するJavaScript版「徐々にバーが伸びてゆくグラフ」の仕上がり状態を、以下の簡易動画で示します。

徐々にバーが伸びてゆくグラフのソースコード

徐々にバーが伸びてゆくグラフのソースは以下です。

グラフのバーに当たる部分は今回は画像で対応しているため、適当な大きさの”graph.gif”を作成しておきます。

適当なというのは、実際に表示されるバーの長さはJavaScript側で計算しているため、最大長さに設定した“graph.gif”をひとつ用意するという意味です。

今回は横方向のバーですが、widthをheightに変えると縦に棒が伸びるグラフになります。

PR プログラミング&Webデザイン奮闘記

なんだかんだでプログラミングまたはWebデザイン関係のスクールは3校ほど受講しました。スクールは物体のないサービスなので、その質はばらつきが激しいと痛感。受講してみたがオススメはできないスクールさんも正直ありました。(もちろんそちらのスクールさんへは本ブログからはリンクなどしておりません。)

通学型:仕事しながらなので土日の講座を受講しました。料金は高いですが、対面なので先生は気合い入れて教えてくださるし、なにより同士となる生徒さんとのコミュニケーションは通学型でしか手に入らないと思いました。仕事で悩みがあったのかいきなり泣き出す生徒さんに出会ったこともあり、そんな人間臭い出会いも良い思い出です。

オンライン型:オンライン型のスクールは私はこちら↓の侍エンジニア塾さんにお世話になりました。
私は当時、長期では通えなかったので侍エンジニア塾さんは1ヶ月コースがある点が良かったです。
私には都合が良いスクールでしたが契約する前に必ず体験を勧めます
無料ですしね。
詳しくは侍エンジニア塾さんの公式ページをご確認ください。

タイトルとURLをコピーしました