手間をかけずに動きのあるサイトを作ろう 【その2】

前回「手間をかけずに動きのあるサイトを作ろう」という記事を書いたのですが、
今日は第二弾です。

ある案件でグラフを見せるコンテンツがあったのですが、ただpng画像を貼りつけるだけではつまらない!ということで何かないか探していると

ありました、ありました!

Chart.js

「Chart.js」
というjsを見つけました。こちらがめちゃくちゃクオリティが高い!!!!
canvasタグを使っていますのでhtml5での記述が必要になります。

グラフの種類も
線グラフ・棒グラフ・レーダーチャート・円グラフ・ドーナツチャートなど多彩です。

今回はドーナツを作成してみたいと思います。

設置もそんなに難しくなく、

headタグに
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);

</script>

自分の好きな色も使えてcssで幅を%表記にするとなんとレスポンシブにも対応できます!!すばらしい!!!

サンプルがこちら

んもー、動きがかわいい!!
こんなに簡単に動きがあるグラフ!イラレでドーナツ作るのも大変ですよね!

一度おためしを!オススメです。