highlightjs– tag –

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

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のプラグイン...

ブラウザ+apache + php + mysql 環境において、mysqlの同時接続可能数には余裕があるのに、ブラウザで同時接続できない！ということが起こり、原因を調べてみましたので紹介します。 これは実はブラウザのクッキーが原因であって、ブラウザを介せずmysqlやapacheを叩いてみると同時接続できるのでした。 同時接続できるかのテストコード 次のようなmysqliで mysqlへ接続するfoo.phpプログラムを設置し、ブラウザで5秒以内に数回アクセスしてみます。 <?php $config = parse_ini_file('./shared/config.ini'); $...