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