【HTML5】チャート簡単作成
IEは使えないですが、スマートフォンなら簡単数行のコードでHTML5チャートを作られるJSライブラリのご紹介です。
ソースコード
|
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 | <!doctype html> <html> <head> <title>Chart.js サンプル</title> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="js/Chart.js"></script> </head> <body> <canvas id="myChart" width="400" height="400"></canvas> <script type="text/javascript"> var ctx = $("#myChart").get(0).getContext("2d"); var data = [ { value: 30, color:"#F38630" }, { value : 50, color : "#E0E4CC" }, { value : 100, color : "#69D2E7" } ] new Chart(ctx).Pie(data); </script> </body> </html> |
注意点
DOMは普通に使えますが、
|
1 | var ctx = document.getElementById("myChart").getContext("2d"); |
jQueryではちょっと変わった使い方で書きます。
|
1 | var ctx = $("#myChart").get(0).getContext("2d"); |
本家サイト
他のタイプのチャートの作成や、オプションのご確認は、本家サイトで行ってください。
Author Profile
スターフィールド編集部
SHARE
