Chart.jsに触れてみた

Chart.jsを軽く使ってみた

こんにちは！ウェブエンジニアのジワタネホです！

今日は簡単にチャートやグラフを表示できるChart.jsについて備忘録的に。

実際にドキュメントを読むと結構できることが多くて、本当に触り程度しか触っていませんがwww

フロントエンド開発の参考になれば！！

Chart.jsとは

グラフやチャートを簡単に表示できます。

技術的にはhtml5のcanvasとjavascripttを使っています。

公式サイト

https://www.chartjs.org/

Github

https://github.com/chartjs/Chart.js

Demo

http://zihuatanejo.jp/demoes/chart.html

Demoのgitリポジトリ

https://github.com/yuki-yoshida-z/demoes

• G Suite Basic プラン割引コード : W6LALVTW7UNVCYU
• G Suite Business プラン割引コード : W3XCXUNQXH9UFR7

ユースケースの考察

まあ基本的には、業務系ウェブアプリなんかは使いそうですね。

特にBIツール系は使えるかと。

ちなみにこのライブラリはVue.jsでも使用可能なようです。

Vue用のものがあるみたいです。

詳細は各々調べてもらえれば。

今回要件

とりあえずは今回は触る程度で！

結構できることが多そうなので、あんまり凝りすぎるとものすごい時間がかかりそうなのでwww

ということでよく使いそうな、ラインチャート、棒グラフ、レーダーチャート、ドーナッツグラフに絞ります。

で、どうせならグラフ化するデータもリアルなものがよいと考えました。

• ラインチャート：ZTM月間記事投稿数推移
• 棒グラフ：個人睡眠時間グラフ
• レーダーチャート：IT人材自己評価レーダー
• ドーナッツグラフ：先月のLP制作案件の各作業日数

ちなみに全部実際の私のデータですwww

実は睡眠時間とか毎日データ取っているんですwww

意識高いでしょ？ww

私自分の生活をライフログとしてデータ取っています。

まあ自動でデータ取っているわけではないので、多少の大雑把さはありますが。

あくまで自分の生活の分析用なのですが、まさかこんな所で役に立つとはwww

• G Suite Basic プラン割引コード : W6LALVTW7UNVCYU
• G Suite Business プラン割引コード : W3XCXUNQXH9UFR7

手順

• Chart.jsの呼び出し
• データの設定

今回は、表示だけの実装を要件とします。

なので大分簡単。

実際のユースケースではそもそもグラフ化するデータをajaxで取ってきて動的に表示させるってのが多いかと思いますが、そこら辺は今回は外します。

実装

Chart.jsの呼び出し

今回はCDNを使います。

触りたいだけなので。

データの設定

各グラフにデータを設定します。

感想

触った感じ、グラフ化するのはすごく楽ですね。

おそらく実装上大変なのは、データを動的に引っ張ってくる箇所の実装。

ここら辺はvue.jsだと早そうですが。アプリによるでしょうね。

あとはデザインですかね。

デフォルトのデザインもかっこいいのですが、アプリによって合う合わないがあるかと思います。

で、デザイナーがデザインすると言っても実はWebデザインという領域では、意外とグラフやチャートのUI/UXって知見があるデザイナーは少ないんではないかと。

ドキュメントデザインとWebデザインの両方を理解してのデザインって結構なハードルな気が。

まあこの部分だけにこだわり過ぎてもね。。

まあプライオリティ的にデフォルトのデザインに落ち着くのが妥当ですかね。

• G Suite Basic プラン割引コード : W6LALVTW7UNVCYU
• G Suite Business プラン割引コード : W3XCXUNQXH9UFR7

最後に

今回はかなり簡単に触ってみるということをやってみました。

いずれもう少し深い部分までやっていけたら記事にしようと思います。

今回はここまで！！