canvasとは
Canvasとは、ブラウザ上に図を描くために策定された仕様です。
これまでHTML上で図を表現するためには、GIFやJPEGといったフォーマットの画像を用意する必要がありました。また、条件に応じて表示する図を変化させたり、アニメーションを実現するために、FlashやJavaアプレットが使われてきました。
Canvasは、FlashやJavaのようにプラグインを使わずに、JavaScriptベースで図を描くことができます。
Canvasは、もともとはAppleが発祥で、当初、Mac OSでおなじみのDashboardで使われた技術仕様です。その後、Apple、Mozilla Foundation、Opera Softwareといったブラウザベンダが立ち上げたWHATWGという団体にて策定作業が行われていた「Web Applications」と呼ばれる規格に採用されました。
Chart.js
折れ線グラフ、棒グラフ、円グラフ、レーダーチャートなど、6種類のグラフが描けるJavascriptのライブラリです。
HTML5のCanvasを使って描画され、誰でも簡単に編集ができるようになっています。
作例
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>円グラフ</title> <style> h1 { text-align: center; } #box { width: 800px; margin: 50px auto 0; } </style> </head> <body> <h1>円グラフ</h1> <div id="box"> <canvas id="myChart"></canvas> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script> <script> var ctx = document.getElementById("myChart"); var myDoughnutChart = new Chart(ctx, { type: 'doughnut', data: { labels: ["A型", "O型", "B型", "AB型"], datasets: [{ backgroundColor: [ "#BB5179", "#EBB350", "#6ABB77", "#29A3D5" ], data: [38, 31, 21, 10] }] }, options: { title: { display: true, text: '血液型 割合' } } }); </script> </body> </html>