前回「手間をかけずに動きのあるサイトを作ろう」という記事を書いたのですが、
今日は第二弾です。
ある案件でグラフを見せるコンテンツがあったのですが、ただpng画像を貼りつけるだけではつまらない！ということで何かないか探していると
ありました、ありました!
「Chart.js」
というjsを見つけました。こちらがめちゃくちゃクオリティが高い!!!!
canvasタグを使っていますのでhtml5での記述が必要になります。
グラフの種類も
線グラフ・棒グラフ・レーダーチャート・円グラフ・ドーナツチャートなど多彩です。
今回はドーナツを作成してみたいと思います。
設置もそんなに難しくなく、
headタグに
jquaryと<script src=”Chart.js”></script>
jquaryと<script src=”Chart.js”></script>
を記述して
hrmlタグに<canvas id=”sample” height=”500″ width=”500″></canvas>
を記述します。
その下に<script>タグを追記します。
value: の値は％
color:に好きな色を入れます。
全部で100%になるようにします。
<script>
var doughnutData = [
{
value: 23,
color:”#3fbfbe”
},
{
value: 29,
color:”#f63a6d”
},
{
value: 17,
color:”#005bac”
},
{
value: 8,
color:”#ffb554″
},
{
value: 23,
color: “#00ac12”
}
];var myDoughnut = new Chart(document.getElementById(“sample”).
getContext(“2d”)).Doughnut(doughnutData);
var doughnutData = [
{
value: 23,
color:”#3fbfbe”
},
{
value: 29,
color:”#f63a6d”
},
{
value: 17,
color:”#005bac”
},
{
value: 8,
color:”#ffb554″
},
{
value: 23,
color: “#00ac12”
}
];var myDoughnut = new Chart(document.getElementById(“sample”).
getContext(“2d”)).Doughnut(doughnutData);
</script>
自分の好きな色も使えてcssで幅を％表記にするとなんとレスポンシブにも対応できます!!すばらしい！！！
サンプルがこちら
んもー、動きがかわいい!!
こんなに簡単に動きがあるグラフ！イラレでドーナツ作るのも大変ですよね！
一度おためしを！オススメです。