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

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

<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" という部分が円グラフを指定しており、ここを変更することで円グラフ以外のチャートを作ることもできます。

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




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