初めまして、18卒で入社したWebチームのコヤマです。 先日公開した、ベトナム開発拠点のLPのコーディングを担当しました。 その際にグラフの描画に使用したChart.jsで、「あれれ~?」「どうやるんだ?」って疑問解消してたら完成した話です。 ※Chart.jsの導入と、公式ドキュメントでサクッと出来る内容は割愛してます。 Chart.jsとは こだわらなければ、簡単に綺麗なグラフが描画できます。 大抵の事は、ドキュメントに書いてあるので↓参照 サイト: Chart.js | Open source HTML5 Charts for your website chartjs.orgより 今回バージョンは、Chart.js Ver.2.7.2を使用します。 ドーナツチャートを用意して試行錯誤 初期状態 左がデザインチームからいただいたデザインで、右は公式ドキュメントからコピペして描画したグラ
![JavaScript: Chart.jsでグラフ描画にトライした話](https://cdn-ak-scissors.b.st-hatena.com/image/square/003d389199a86cf70d05d1cfb43db9e627bab0ef/height=288;version=1;width=512/https%3A%2F%2Ftechracho.bpsinc.jp%2Fwp-content%2Fuploads%2F2018%2F12%2Ftrying_chartjs_eyecatch.png)