まだプログラマーですが何か?

プログラマーネタとアスリートネタ中心。たまに作成したウェブサービス関連の話も http://twitter.com/dotnsf

タグ:chart

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

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


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

今回はこの Chart.js を使って円グラフを作る例を紹介します:
2018030900


<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: 'pie',
  data: {
    labels: [ "Red", "Green", "Blue" ],
    datasets: [{
      backgroundColor: [
        "#ff0000",
        "#00ff00",
        "#0000ff"
      ],
      data: [ 150, 100, 20 ]
    }]
  }
});
</script>

  :
  :

キャンバスの 2D コンテキストを取得し、グラフ種類、ラベル、色、そして数値データを指定して描画しています。上記コードの "pie" という部分が円グラフを指定しており、ここを変更することで円グラフ以外のチャートを作ることもできます。

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




なんとなく直感的にというか、 ウェブで簡単に使えるグラフ描画ライブラリだと思ってます。

このページのトップヘ