Chart.jsにToggle機能を追加しカラムの表示/非表示を切り替える


実現したいこと

体調グラフ機能, ボタンのON/OFFでカラムの表示/非表示を切り替える

メンターから, Ajaxは学習コストが高いのでjQueryでやった方が早くできるとアドバイスを頂いた。

各カラムのボタンのtoggleによって, 対応するdatasetを追加したり、削除したりできるようにしたい。

どう実装するのか?

この記事についているデモの通りに実装していく。

How to add a dataset toggle to Chart.js?

大まかな流れは、

  • ToggleするリンクをHTML作成し, class名をカラム名 + enabledとする
  • JavascriptenableCheck関数を作成
    • 各カラムのクラス名にenabledが付いているかを判定
    • trueなら変数にグラフのdatasetを代入, falseならnilを代入
  • jQuery.readyenableCheckを実行
  • リンクをクリック時にグラフを削除し, enableCheckを再度実行した上でグラフ描画を行う

結果

Image from Gyazo

datasetとlabelなどの値は一旦固定にして, Toiggle機能のみ実装した。

次回はRailsで全カラムのデータをブラウザにレスポンスできるようにする。

その他の作業

jQuery 要素を表示/非表示にする(toggle) を参考にボタンのtoggleを試しに作成する

プロを目指す人のためのRuby入門