Webサービスシェアこんにちは。デザイナーのハルエです。最近ちょくちょくグラフを用いた制作物に関わることがあり、案件によってはエンジニアさんにお願いしたりIllustratorのグラフツールで作ったりしていたのですが、なんやかんやで時間とられちゃうんですよね。オシャレでスマートにさくっとハイテンションで作れるものはないかと探してみました。そこで見つけたのがこれ。「Chart.js」。愛くるしい動きをしてくれます。デザインもフラットでいい!ポートフォリオやプレゼンなんかにもきっと役立ちますよ。Chart.jsとは?折れ線グラフ、棒グラフ、円グラフ、レーダーチャートなど、6種類のグラフが簡単に描けてしまうJavascriptのライブラリです。HTML5のCanvasを使って描画され、表示の際の気持ちいいアニメーションの動きが特徴的です。分かりやすいマークアップなので、誰でも簡単に編集ができるようになっています。すべてのモダンブラウザで表示可能で、IE7から対応しています。Chart.jsドキュメント(オプションの指定など)Chart.jsで表示できる6種類のグラフ線グラフ棒グラフレーダーチャート円グラフ鶏頭図(円グラフの一種)ドーナツチャートChart.jsの導入方法まずはChart.jsの公式サイトで「Download」ボタンをクリック。ZIP」ボタンをクリックして圧縮ファイルをダウンロードしてください。以上でダウンロードは完了です。PCへのダウンロードが終わりましたらzipファイルを解凍して開いてください。インクルード次に表示したいページのHTMLファイルに、ダウンロードしてきた「Chart.js」をインクルードします。</head></html>これで準備は整いましたので、実際にグラフを作ってみましょう。今回はドーナツチャートをサンプルとして描いてみます。描画したい領域にcanvasタグを使います。width="500"></canvas>サンプルでは高さ500px、幅500pxに設定してみました。id名は任意の名前をつけてください。ここでは「sample」にしています。ドーナツチャートの設定どんなドーナツがいいかここで設定できます。script内の最後の行でcanvasタグに付与したid属性に書き換えてください。Chart(document.getElementById("sample").getContext("2d")).Doughnut(doughnutData);</script>たったこれだけです。割合とカラーを決めて終わりなんで、ドーナツめっちゃ簡単でした。他のグラフも難易度はほとんど変わりません。出来上がったドーナツチャートがこちら!DEMO動きが心地よいですね。グラフ内容や制作環境の条件がクリアできれば実践でも十分使えるライブラリです。オプションの指定で自由にカスタマイズできるので、幅広い案件に柔軟に対応してくれそうです。次グラフ描画のあるぴったりの案件がきたら提案してみよう。ANALYZE」を導入後、CVR改善に成功した品川美容外科のWeb担当者に話を聞いてきた。POSTLIGへの自由なメッセージお待ちしています頂いたご意見への回答は行っておりません。