Chart.js は棒グラフや折れ線グラフなどの各種グラフやチャートを描画するための JavaScript ライブラリです。グラフを描くだけならかなり簡単に使うことができて便利です。また MIT ライセンスが採用されており、商用を含めた柔軟な利用が可能になっています。

今回はこの Chart.js を使って「ポーラーチャート」を作る例を紹介します：



ポーラーチャートは円グラフやドーナツグラフに似ています。円グラフやドーナツグラフでは円全体を 100% と見なして、その中の割合を（色別などに）分類表示する、というものです。　一方ポーラーチャートでは量が多いほど大きな面積で表示されます。存在している要素が全て同じ角度を持ったパイの形で表示されるため、仮に特定の要素の値がゼロでもゼロであることがわかりやすくなっている（※）という特徴があります。

※上図の例だと左上に紫色っぽい部分がほんの少しだけ存在しています。量が少なくてグラフ上ではほぼ見えていないのですが、ここに空間ができることで少なくともここにデータが存在していることが明確になっています。


このポーラーチャートを Chart.js で表示するには以下のようなコードを記述します。Chart 作成時の type 属性に 'polarArea' を指定することでポーラーチャートを描画します：

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.min.js"></script>

  :
  :

<canvas id="myChart"></canvas>

  :
  :

<script>
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart( ctx, {
  type: 'polarArea',
  data: {
    labels: [ "Red", "Yellow", "Green", "Cyan", "Blue", "Magenta" ],
    datasets: [{
      backgroundColor: [
        "#ff0000",
        "#ffff00",
        "#00ff00",
        "#00ffff",
        "#0000ff",
        "#ff00ff"
      ],
      data: [ 150, 100, 20, 80, 40, 5 ]
    }]
  }
});
</script>

  :
  :

この内容を実際にこのページ内に埋め込むと以下のようになります：


縦や横の積み上げ式の棒グラフに近い用途で使え、かつ最小値が小さくて、積み上げた時に潰れてしまうようなケースでもデータとしての存在を明確にできる、という特徴を持ったチャートだと思っています。

タグ ：

#chart

#chart.js

#polarchart