超cool!!フラットで可愛い動きのチャートがHTML5で作れる「Chart.js」入門ガイド
- Tag To
- Chart.js
- JavaScript
- チュートリアル
やばい、こいつ可愛い。使い方もむっちゃ簡単でこんなcoolなチャートが出来るなんて。ポートフォリオにも、情報を説明する時にも、どんな時にでも役に立つ事間違いなし!開発者に感謝しつつ、そんな「Chart.js」を紹介していきたいと思います!
Chart.jsとは?
デザイナーや開発者がの簡単にグラフを表示出来るjsで、表示方法はHTML5のcanvasを利用して表示させます。コード的にはオブジェクト指向のコードで誰でも簡単に編集でき表示ができるようになっています。
詳しくは本家サイトへ
こんな感じのチャートが作れます
Chart.jsの実装方法
初めにChart.jsをダウンロードしよう
に行き、赤枠に囲ってある Download をクリックして下さい。
次に GitHub に飛びますので赤枠で囲ってある ZIP をクリックしますとダウンロード出来ますのでダウンロードして下さい。
ダウンロードが終わりましたらファイルを解凍して開いて下さい。
解凍しましたらトップに Chart.js がありますので、それをサイトにアップロードしましょう。階層はどこでもいいです。jQuery等と全く同じ要領で。
次はチャートを表示したいページのファイルにChart.jsをインクルードしましょう。
html
<script src="アップロードした階層のディレクトリ名/Chart.js"></script>
これでチャートを表示出来る準備は整いましたーパチパチ。
6種類のチャートの説明と表示する方法
次はチャートの種類を順番に説明していきます。
Line charts
おそらく一番凡庸性が高いチャートだと思いますのでこれだけ覚えているだけでいいかも。
html
<canvas id="line" height="450" width="600"></canvas>
javascript
var lineChartData = {
labels : ["January","February","March","April","May","June","July"],
datasets : [
{
fillColor : "rgba(220,220,220,0.5)",
strokeColor : "rgba(220,220,220,1)",
pointColor : "rgba(220,220,220,1)",
pointStrokeColor : "#fff",
data : [65,59,90,81,56,55,40]
},
{
fillColor : "rgba(151,187,205,0.5)",
strokeColor : "rgba(151,187,205,1)",
pointColor : "rgba(151,187,205,1)",
pointStrokeColor : "#fff",
data : [28,48,40,19,96,27,100]
}
]
}
var myLine = new Chart(document.getElementById("line").getContext("2d")).Line(lineChartData);
Bar charts
比較すると気とかに使えそうな感じがしますよね。
html
<canvas id="bar" height="450" width="600"></canvas>
javascript
var barChartData = {
labels : ["January","February","March","April","May","June","July"],
datasets : [
{
fillColor : "rgba(220,220,220,0.5)",
strokeColor : "rgba(220,220,220,1)",
data : [65,59,90,81,56,55,40]
},
{
fillColor : "rgba(151,187,205,0.5)",
strokeColor : "rgba(151,187,205,1)",
data : [28,48,40,19,96,27,100]
}
]
}
var myLine = new Chart(document.getElementById("bar").getContext("2d")).Bar(barChartData);
Radar charts
能力値を表したり色々と。
html
<canvas id="radar" height="450" width="450"></canvas>
javascript
var radarChartData = {
labels : ["Eating","Drinking","Sleeping","Designing","Coding","Partying","Running"],
datasets : [
{
fillColor : "rgba(220,220,220,0.5)",
strokeColor : "rgba(220,220,220,1)",
pointColor : "rgba(220,220,220,1)",
pointStrokeColor : "#fff",
data : [65,59,90,81,56,55,40]
},
{
fillColor : "rgba(151,187,205,0.5)",
strokeColor : "rgba(151,187,205,1)",
pointColor : "rgba(151,187,205,1)",
pointStrokeColor : "#fff",
data : [28,48,40,19,96,27,100]
}
]
}
var myRadar = new Chart(document.getElementById("radar").getContext("2d")).Radar(radarChartData,{scaleShowLabels : false, pointLabelFontSize : 10});
Pie charts
一番連想しやすいのは時間割とかに使えそうですね。
html
<canvas id="pie" height="450" width="450"></canvas>
javascript
var pieData = [
{
value: 30,
color:"#F38630"
},
{
value : 50,
color : "#E0E4CC"
},
{
value : 100,
color : "#69D2E7"
}
];
var myPie = new Chart(document.getElementById("pie").getContext("2d")).Pie(pieData);
Polar area charts
このチャートだけ特殊でグラフがランダムで場所変わります、何に使えるかは謎。
html
<canvas id="polarArea" height="400" width="400"></canvas>
javascript
var chartData = [
{
value : Math.random(),
color: "#D97041"
},
{
value : Math.random(),
color: "#C7604C"
},
{
value : Math.random(),
color: "#21323D"
},
{
value : Math.random(),
color: "#9D9B7F"
},
{
value : Math.random(),
color: "#7D4F6D"
},
{
value : Math.random(),
color: "#584A5E"
}
];
var myPolarArea = new Chart(document.getElementById("polarArea").getContext("2d")).PolarArea(chartData);
Doughnut charts
見た目が一番!という方とドーナツ好きならこれを。
html
<canvas id="doughnut" height="850" width="850"></canvas>
javascript
var doughnutData = [
{
value: 30,
color:"#F7464A"
},
{
value : 50,
color : "#46BFBD"
},
{
value : 100,
color : "#FDB45C"
},
{
value : 40,
color : "#949FB1"
},
{
value : 120,
color : "#4D5360"
}
];
var myDoughnut = new Chart(document.getElementById("doughnut").getContext("2d")).Doughnut(doughnutData);
ブラウザに可視表示された瞬間にチャートを表示させてみよう
実は、このまま使いますとページを読み込んだ瞬間にチャートが表示されてしまいます。
そこでChart_Dynamic_Viewというプラグインを作りましたので
ブラウザに可視表示された瞬間に表示したいって人は使って下さい。
あ、後このプラグインはjQueryありきですので、もしjQueryをインクルードしていない方はインクルードお願いします。
使い方と仕様の説明をしたいと思います。(ちょっと難しいかも...)
まず初めにChart.js と全く同じ要領でダウンロードしてインクルードして下さい。
<script src="アップロードした階層のディレクトリ名/Chart_Dynamic_View.js"></script>
次はCSSの追加もお願いします。
.canvas_chart {
min-height: 100px;
}
次はチャートを表示したい場所に
<div class="canvas_chart" id="任意の名前"></div>
と、記述します。
着火ポイントは class="canvas_chart" で
紐付けは id="任意の名前" です。
で、次は紐付けされた 任意の名前 という名前のhtmlを
表示させたいページと同じディレクトリに配置して下さい。
任意の名前.htmlの中身はこんな感じで(表示したいチャートの記述を)
<!doctype html>
<html>
<head>
</head>
<body>
<canvas id="任意の名前" height="450" width="600"></canvas>
<script>
var lineChartData = {
labels : ["January","February","March","April","May","June","July"],
datasets : [
{
fillColor : "rgba(220,220,220,0.5)",
strokeColor : "rgba(220,220,220,1)",
pointColor : "rgba(220,220,220,1)",
pointStrokeColor : "#fff",
data : [65,59,90,81,56,55,40]
},
{
fillColor : "rgba(151,187,205,0.5)",
strokeColor : "rgba(151,187,205,1)",
pointColor : "rgba(151,187,205,1)",
pointStrokeColor : "#fff",
data : [28,48,40,19,96,27,100]
}
]
}
var myLine = new Chart(document.getElementById("任意の名前").getContext("2d")).Line(lineChartData);
</script>
</body>
</html>
これでいい感じにチャートを表示出来るようになりました!
わーパチパチ。
レスポンシブ対応のテクニック
様々なデバイスで見られるこのご時世、このままの表示だと大きさが固定のチャートになってしまいますので対策もしましょう。
今回はCSSをいじるだけでいいように考えました。
このCSSを記述するだけでレスポンシブにも対応出来ます。
canvas {
height: auto !important;
width: 50% !important;
}
更にChart_Dynamic_Viewを使う時は読み込むcanvasにclassを付けといて事前にcss定義をしとけば自由に大きさを操作できます。
こんな感じで
canvas {
height: auto !important;
width: 50% !important;
}
.line_canvas {
height: auto !important;
width: 60% !important;
}
.bar_canvas {
height: auto !important;
width: 60% !important;
}
.radar_canvas {
height: auto !important;
width: 60% !important;
}
こうすればcanvasよりクラスのline_canvasの方が強いので
line_canvasの記述が適応されます。
まとめ
いやーcanvas楽しいっすね!
このjsは簡単に楽しくHTML5が体感出来るのが良い所だと思っています。
あと真面目にチャートを表示すれば本気で使えるかと。今回はサーバサイドのスクリプト言語を使わない感じの説明でしたが、使えば楽にチャートを表示できそうですね!
