やったこと
神グラフジェネレータ
https://k-karen.github.io/vue-chartjs-sample/
Vue.js + vue-chartjs + git hub-pages ( + Vuetify )
で簡単なグラフ(折れ線・円・棒)を書けるSPAを作りました。
リポジトリ: https://github.com/k-karen/vue-chartjs-sample
神グラフ とは
先日、Twitterで話題になった年収400万円と800万円の比較のグラフや、
古からネタになっているWindowsのversionのグラフなどの割とシンプルなグラフのことです。
サンプル
使い方
① - 各行を削除できます(入れ替え機能は実装していません)
② - 表示(⑦)した画像が表示されるエリア、画像を非表示にする で非表示にできます
③ - 行を追加できます
④ - このボタンの左側のcolorのinput formに入れた色で色を統一できます
⑤ - すべての行色をランダムに振り直します
⑥ - localStorageにグラフを保存します。上のドロップダウンリストから読込めます
⑦ - pngでページ右側(画面が狭いとページ下部)にグラフを出力します
⑧ - 選択中のlocalStorageのデータを削除します
⑨ - グラフのタイプ(棒/折れ線/円) を切り替えられます(フォームのデータは消えます)
上限・下限は、そのフォームの値よりも上の項目の値の最大・最小値が優先されます。
グラフの上限 = max(項目の上限, 上限フォームの値)
グラフの下限 = min(項目の下限, 下限フォームの値)
使用例
一度ホーム画面に追加すればオフラインでも使用でき、
localStorageを利用してSaveもできるので、
いつでもご自身のスマホにクソグラフネタを蓄積することができます。
参考リンクなど
Vue.js, git hub-pages
親コンポーネントと子コンポーネントの双方向バインディング
https://qiita.com/Sa2Knight/items/544b3f157108b96033fe
(折れ線グラフの色だけ、rgbaで受け取れるようにしたのですが、
そのcomponentを作るときに参考にしました)
travisでgh-pagesへ自動デプロイ
https://qiita.com/dorarep/items/010a8a7c278ff0107520
(記事はnuxtのものですが、vueでも設定することはほとんど同じでした)
自分の記事です(vue.config.jsを設定しようねという記事)
https://qiita.com/k-karen/items/9c8b38f54509369c5946
vue-chartjs
vue-chartjs
https://vue-chartjs.org/
componentの呼び方使い方だけはこれを見ればわかります
chartjs
https://www.chartjs.org/
実際は入力した数値以外にもoptionをあれこれ設定しているのですが、
optionについてはvue-chartjsのサイトにはあまり詳しく乗っていないので、
chartjsの方を参考にするか、都度ググりました。
最後に
実装内容を紹介しようと思ったのですが(特別なことはあまりないので)、
コードが汚すぎてキツかったので、諦めました。
作ったものをデプロイして公開するのは初めてなので、至らぬ点あるかと思いますが、
不具合などあればご報告いただければ力の及ぶ範囲では修正したいと思います。
皆様も積極的に数値を可視化し神グラフを量産、
最高の神グラフライフをお送りいただければと思います。
ここまで読んでくださった方々ありがとうございました。