ストックドッグスマートフォン用の表示で見るストックドッグKatoTakahiro。金融系の会社で働くSEが株やPython、その他諸々について書いています。構成要素の完成ソースコードchart.jsは、キレイな可視化が簡単にできるJavaScriptのライブラリですが、使い方を工夫すればフロントのデザインにも流用できます。データ系を扱うWebサイトであれば、サイトイメージと一致したデザインになると思います。私はこんな感じで使っています。fmbrain.workサンプル4つの構成要素グラフを数秒ごとに変化させるには、普通のchart.jsで描くグラフに4つの追加要素を入れます。基本的なchart.jsのグラフ描画の部分は省きます。ここがわからない方はドットインストールで学びましょう。数秒毎にグラフを変化させるには、数秒毎にグラフに使うデータを変化させる必要があります。(当たり前ですが...)適当に乱数でデータを作りましょう。関数化して、数秒毎に使える形にしましょう。datasets}chart.jsのグラフのアップデート数秒毎のグラフのアップデートは、chart.jsの公式マニュアルにも使われています。www.chartjs.org便利なことにグラフをアップデートをさせるための関数が用意されています。myChart.update();マニュアルにもちゃんと書いてあります。documentation使い方は簡単で、グラフを描画しているクラスのデータを入れ替えたあとに、myChart.update();するだけです。グラフをアップデートさせるコードも数秒毎に実行させるので、関数化します。myChart.update();}数秒ごとのアップデートの実行setIntervalで、先ほどのグラフをアップデートする関数を実行します。2000);グラフからX軸・Y軸などを非表示Y軸やら、マウスオンでチップが表示されるとグラフ感が出てしまうので、これらを非表示にする設定をします。グラフに追加する設定は以下です。凡例の非表示マウスオンしたときのチップの非表示X軸Y軸の非表示グリッド線の非表示chart.jsはグラフに関する追加設定は、optionのところに書いていきます。optionにこんな感じで書いていきます。}面倒なので、グラフの描画の部分ごと貼ります。optionの部分に注目です。}});構成要素の完成これら4つの設定を追加することで、フロントのデザインに流用できるグラフが完成します。ソースコード貼っておくので、見てみてください。(27)注目記事プロフィール金融系の会社で働くSEが株やPython、その他諸々について書いています。読者になるスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。