「グラフ関連」の版間の差分
ナビゲーションに移動
検索に移動
Ippei Suzuki (トーク | 投稿記録) ページの作成:「== 概要 == * Flashを使わずに、DBとJavaScriptだけでグラフを描画するようなアプリケーションを作成する。 * 引数としてグラフIDと…」 |
Ippei Suzuki (トーク | 投稿記録) 編集の要約なし |
||
| 12行目: | 12行目: | ||
* [https://jp.vuejs.org Vue.js] | * [https://jp.vuejs.org Vue.js] | ||
* [https://vue-chartjs.org/ja/ vue-chartjs] | * [https://vue-chartjs.org/ja/ vue-chartjs] | ||
=== 表示の流れ === | |||
# グラフに関するデータをMySQLに格納しておく | |||
# LaravelでAPIを設計しデータを取得、JSONとして出力 | |||
# VueでAPIを叩いてデータを受け取り、テンプレートに渡す（極力加工しない） | |||
# グラフを表示 | |||
=== DB設計について === | |||
従来のリレーションで固く結び付いたテーブル構造から、あまり改変のない部分についてはリレーションしない形へと変更する。 | |||
具体的には | |||
* ラベルだけのテーブルを廃止し、ラベルはデータテーブルに統合 | |||
* グラフセットとグラフのリレーションを廃止し、グラフセットに含まれるグラフリストと並び順はJSON形式で格納する | |||
* 実際にほとんど使われていなかった「グラフタイプ」は廃止 | |||
またLaravelのEloquent ORMの仕様に合わせるために、カラム名を変更 | |||
* timestamp → updated_at | |||
* created_at（新設） | |||
2019年6月26日 (水) 15:00時点における版
概要
- Flashを使わずに、DBとJavaScriptだけでグラフを描画するようなアプリケーションを作成する。
- 引数としてグラフIDと期間を受け付ける。
- 現行のグラフと同様に、複数の折れ線グラフを1つにまとめる必要がある
基本設計
使用アプリケーション
表示の流れ
- グラフに関するデータをMySQLに格納しておく
- LaravelでAPIを設計しデータを取得、JSONとして出力
- VueでAPIを叩いてデータを受け取り、テンプレートに渡す（極力加工しない）
- グラフを表示
DB設計について
従来のリレーションで固く結び付いたテーブル構造から、あまり改変のない部分についてはリレーションしない形へと変更する。 具体的には
- ラベルだけのテーブルを廃止し、ラベルはデータテーブルに統合
- グラフセットとグラフのリレーションを廃止し、グラフセットに含まれるグラフリストと並び順はJSON形式で格納する
- 実際にほとんど使われていなかった「グラフタイプ」は廃止
またLaravelのEloquent ORMの仕様に合わせるために、カラム名を変更
- timestamp → updated_at
- created_at（新設）