カタログクリップ

Chart.jsはレスポンシブ対応のjavascriptチャートライブラリです。 レスポンシブ対応を謳っていますが、パイチャート/ドーナッツチャートをスマホなどの幅の狭い画面で表示させると、パイが縮小されすぎて見づらくなってしまいます。 それを防ぐ方法を紹介します。 問題 Chart.jsでパイチャートを描いて、横幅~320 pxのスマホで表示させると次のようにパイ部分が潰れてしまいます。   対策 縦横比はデフォルトでは横長になっています。横幅の小さい画面でも、それを維持しようとするため、凡例(keys/legend)...

pdftkというアプリケーションを使用すると、pdfファイルにパスワードを設定することができます。 このアプリケーションは、linuxで長く使われてきたパワフルなツールです。 パスワードを設定する他にもpdfファイルから必要なページだけ抜き出したり、複数のpdfファイルを結合したり、圧縮したり、パスワードを解除したpdfファイルを作成したりもできます。 多機能な分、初心者にとって使いやすいとは言えませんが、一度覚えてしまうと手放せなくなります。 今回、このアプリケーションを使ってpdfファイルにパスワ...

Chart.jsのパイチャートやドーナッツチャートで、データ割合をパーセント表示する方法を紹介します。 方法 次のような流れで、パーセント表示を行います。 データの合計値を求めます データ値を合計値で割ってデータ割合を求めます ラベルとしてパイ中に表示します データの合計値を求める まず、データの合計値は、次のようにデータセットごとに求めます。 chart.data.datasets.forEach(function (dataset, i) { var dataSum = 0; dataset.data.forEach(function (element){ dataSum += element; }); }); data配...

Chart.jsはレスポンシブ対応のJavascriptチャートライブラリです。 Chart.jsにおいては、グラフのデータ値はデフォルト設定では常に表示されず、マウスポインタをグラフ点に近づけたときにツールチップ表示されるようになっています。 そこで、データ値を常に表示するデータラベルを付ける方法を紹介します。 また、パイチャート等では、パイ中にラベルを表示した方がグラフが見やすくなります。応用例として、データ点付近にラベルを表示する方法も紹介します。 データラベルを追加する方法 Chart.jsのプラグイン...