Frontend

Chart.jsで、ラベルやデータ値を常に表示する方法。パイチャートで便利!

Chart.jsはレスポンシブ対応のJavascriptチャートライブラリです。

Chart.jsにおいては、グラフのデータ値はデフォルト設定では常に表示されず、マウスポインタをグラフ点に近づけたときにツールチップ表示されるようになっています。

そこで、データ値を常に表示するデータラベルを付ける方法を紹介します。

また、パイチャート等では、パイ中にラベルを表示した方がグラフが見やすくなります。応用例として、データ点付近にラベルを表示する方法も紹介します。

続きを読む

レンジ入力欄(スライダー)の現在値を表示する方法

HTML5でサポートされたレンジ入力欄(スライダー)は、そのままではユーザーが現在値を知ることができません。ユーザーのスライダー操作を感知して、現在値を表示する方法を紹介します。javascriptを使用します。複数のスライダーにも一つのコードで対応します。

続きを読む