---------2018年:現在に至る2017年:フリーランスとして2社目の常駐案件で某IT企業の新領域開発部門のフロントエンド開発を担当。合計3つのプロジェクトに参加。2016年:フリーランスエンジニアとして独立。個人的な思いとしてはキャリアの再スタート。某旅行関連サイトのフロントエンド開発を担当。2009年:友人と起業。営業代理店やイベント事業等を取締役として経営。UI/UX目次Chart.jsを軽く使ってみたこんにちは!フロントエンドエンジニアのキヨシ太夫です!今日は簡単にチャートやグラフを表示できるChart.jsについて備忘録的に。実際にドキュメントを読むと結構できることが多くて、本当に触り程度しか触っていませんがwwwフロントエンド開発の参考になれば!!Chart.jsとはグラフやチャートを簡単に表示できます。技術的にはhtml5のcanvasとjavascripttを使っています。W3XCXUNQXH9UFR7ユースケースの考察まあ基本的には、業務系ウェブアプリなんかは使いそうですね。BIツール系は使えるかと。ちなみにこのライブラリはVue.jsでも使用可能なようです。Vue用のものがあるみたいです。詳細は各々調べてもらえれば。今回要件とりあえずは今回は触る程度で!結構できることが多そうなので、あんまり凝りすぎるとものすごい時間がかかりそうなのでwwwということでよく使いそうな、ラインチャート、棒グラフ、レーダーチャート、ドーナッツグラフに絞ります。グラフ化するデータもリアルなものがよいと考えました。グラフ:個人睡眠時間グラフレーダーチャート:IT人材自己評価レーダードーナッツグラフ:先月のLP制作案件の各作業日数ちなみに全部実際の私のデータですwww実は睡眠時間とか毎日データ取っているんですwww意識高いでしょ?ww私自分の生活をライフログとしてデータ取っています。自動でデータ取っているわけではないので、多少の大雑把さはありますが。今回は、表示だけの実装を要件とします。実際のユースケースではそもそもグラフ化するデータをajaxで取ってきて動的に表示させるってのが多いかと思いますが、そこら辺は今回は外します。実装Chart.jsの呼び出し今回はCDNを使います。各グラフにデータを設定します。触った感じ、グラフ化するのはすごく楽ですね。実装上大変なのは、データを動的に引っ張ってくる箇所の実装。ここら辺はvue.jsだと早そうですが。アプリによるでしょうね。あとはデザインですかね。デフォルトのデザインもかっこいいのですが、アプリによって合う合わないがあるかと思います。デザイナーがデザインすると言っても実はWebデザインという領域では、意外とグラフやチャートのUI/UXって知見があるデザイナーは少ないんではないかと。ドキュメントデザインとWebデザインの両方を理解してのデザインって結構なハードルな気が。この部分だけにこだわり過ぎてもね。プライオリティ的にデフォルトのデザインに落ち着くのが妥当ですかね。W3XCXUNQXH9UFR7最後に今回はかなり簡単に触ってみるということをやってみました。深い部分までやっていけたら記事にしようと思います。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。Reserved.-。