紅葉が美しい時期になりましたね。
余談ですが昨日奈良の観光をして、味文化のギャップに驚きました。
日本といえどいろいろ文化が違ってすごく面白いし、世界はまだまだ広いなぁと。
いい勉強になりました。
さて、今回はcanvasjsを使用してウェブサイトにグラフをさくっと表示させる方法です。
グラフを表示する方法はいくつもあるので、私自身これまではchratjsを使用していたのですが
canvasjsもなかなかおすすめなので紹介します。
canvasjsとは？
canvasjsはなんといっても、簡単なHTMLとJSのみでいろんなグラフが導入できるのがいいところ。
円グラフで作成していたけど、棒グラフに変更したい、というときでも1・2行ソースを書き換えるだけで変更できます。
公式サイトはこちらです。いろんなデモがあるので見ていただいて、実装したいグラフを決定してください。
canvasjs公式サイト
まず私が作成した、デモから！
See the Pen canvasjs demo01 by sayuri (@giraffeweb) on CodePen.0
canvasjs実装方法
最初にcanvasjsのJSを読み込ませます。
このときhead内ではなくfooter以下のbody及びhtml内に読み込ませてください。
以下のような感じになります。
<html> <head> //ここにいろんなcssやJS </head> <body> <header> //メニューやらいろいろコード </header> <div> //コンテンツ <div id="chartContainer"></div> </div> <footer> // </footer> //ここに読み込ませる <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/canvasjs/1.7.0/canvasjs.min.js"></script> </body> </html>
HTMLはごくごく簡単で、上記のようにdivで囲んだchartContainerを設置します。
複数ある場合はchartContainer01、chartContainer02というふうにidを増やしていってくださいね！
cssはそのサイトにあったものを適用させてください。
つぎにjsです。
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer", {
theme: "theme4",
animationEnabled: true,
startAngle: 270,
data: [
{
type: "doughnut",
startAngle: 270,
dataPoints: [
{ y: 80, label: "男性"},
{ y: 13, label: "女性"},
]
}
]
});
chart.render();
}
これは基本的なJSの設定。これにいろいろ記述することでカスタマイズできます。
また、複数設置する場合は、
window.onload = function () {}内にvar chart = new CanvasJS.Chart(“chartContainer”以下を増やしていってくださいね。
chartContainerはHTMLで指定したidなので二つ目の時はchartContainer02のように指定してあげてください。
上記のJSの設定についてひとつひとつ以下で解説しています。
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer", {
theme: "theme4",//テーマは1～4まであります。公式サイトを見てください。
animationEnabled: true,//アニメーション行うかどうか。falseにすればアニメーションは行われません。
data: [
{
type: "doughnut",//グラフの指定をしています。今回はドーナツ型。他にもいろんな指定ができます。
startAngle: 270,//円のスタートです。私は270度からスタートしてます。
dataPoints: [
{ y: 80, label: "男性"},//値の設定です。グラフによって若干書き方がかわります。
{ y: 13, label: "女性"},//値の設定です。グラフによって若干書き方がかわります。
]
}
]
});
chart.render();
}
今回私がこのグラフを実装する際に、正直ラベルが邪魔でした。
でもラベルを消してしまうと、何がなんだかわからない！ということで、いろいろ調べてたら出さない方法を発見！！
ラベルを表示しない方法
ciodepenで実装してみたのでJSのソースを見てみてください。
See the Pen canvasjs demo02 by sayuri (@giraffeweb) on CodePen.0
labelをnameに変えたんです！すると表示されなくなりました～
でもこれじゃ、グラフにマウスオンしないとなんの割合かわかりません。
ということで比率を表示する項目を付けてあげます。
See the Pen canvasjs demo03 by sayuri (@giraffeweb) on CodePen.0
これでなんの項目かわかりましたよね！
他にもいろんなオプションがあるので思い思いにやってみてください～！