Chart.jsでいい感じの色を自動で割り当てる！ - 虎の穴開発室ブログ

こんにちは、虎の穴ラボのH.Kです。 今回はChart.jsで可変の表示要素に対していい感じの色を割り当てる方法をご紹介します。 この記事で解決する課題 取得したデータによって比較対象に当たる要素数が可変になるようなグラフ（Chart.js）に綺麗に色をつける 自動で色を割り振った完成形 Chart.jsとは 簡単にグラフを描画できるライブラリです。 パラメータで受け取った値を元にキャンバス要素にグラフを出力してくれます。 円グラフ、折れ線グラフなど多くの形式で表示することが可能です。 また、自動で縦軸や横軸の値を調整してくれるので、値さえ用意すれば簡単に出力できるのが魅力です。 社内で使用しているツールのグラフ表示に使用しています。 www.chartjs.org 解決方法 早速、解決方法ですが、以下の手法を取ることにより解決しました。 HSL色空間を用いる 要素数から色相の角度を計算し

[zonomuro]

これ使えそう

[xssss]

これは便利ですね！