Frontend

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

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

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

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

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

続きを読む

動的に生成したSVG形式画像データを、IMGタグに埋め込んで表示する方法!


クライアントサイドにあるsvgデータを、ユーザが右クリック保存でダウンロードできるように、imgタグに埋め込む方法を紹介します。データをajax + phpなどで取得したり、javascript(D3.js)などで生成した場合に使います。

続きを読む

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

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

続きを読む