🐙

宣言的なJSフレームワーク Chart.jsと連携

2022/05/16に公開約3,400字

概要

Vue.jsのサンプルでChart.jsを使ったものがあったので、それをdata-x.jsでも作ってみよう。
v0.6.1以降の書式に対応(2022-06-15)

https://qiita.com/yamazaki3104/items/c793d77a19f104c2a63e

動作

フレームワーク

v0.6.1以降

https://github.com/mogera551/data-x.js/

Chart.js

chart.jsを使うためには、chartオブジェクトを作って操作する。

html
<canvas id="chart"></canvas>
JavaScript
const chart = new Chart(document.getElementById('chart').getContext('2d'), ...);

ViewModelに初期化完了時の処理タイミングを追加

html要素を展開したあと、chartオブジェクトを生成する必要があるので、ViewModelの初期化完了時にcontext.postProcessの処理を呼べるようにした。

JavaScript
context = {};
class AppViewModel {
  "@@chart";
  initChart() {
    const canvas = document.getElementById('chart').getContext('2d');
    this.chart = new Chart(canvas, ...);
  }
  "#eventInit"() {
    context.postProcess(() => this.initChart());
  }
}

解説

index.html

https://github.com/mogera551/data-x.js/blob/v0.6.1/demo/chart/index.html

Chart.jsのロード。

https://github.com/mogera551/data-x.js/blob/v0.6.1/demo/chart/index.html#L3-L3

main.html

https://github.com/mogera551/data-x.js/blob/v0.6.1/demo/chart/index-spa/html/main.html

グラフを表示するcanvas

https://github.com/mogera551/data-x.js/blob/v0.6.1/demo/chart/index-spa/html/main.html#L1-L1

main.js

https://github.com/mogera551/data-x.js/blob/v0.6.1/demo/chart/index-spa/module/main.js

生成したchartオブジェクトを格納

https://github.com/mogera551/data-x.js/blob/v0.6.1/demo/chart/index-spa/module/main.js#L3-L3

chartオブジェクトを生成。ラベルと値の配列を設定する。

https://github.com/mogera551/data-x.js/blob/v0.6.1/demo/chart/index-spa/module/main.js#L4-L13

ラベルと値の配列。配列に変化があった場合、変更を通知できるように、配列をnotifiable化する。

https://github.com/mogera551/data-x.js/blob/v0.6.1/demo/chart/index-spa/module/main.js#L15-L21

datasとしてラベルと同じ数の要素を持つ配列を生成する。その配列分、datas.*.labelとdatas.*.valueを展開する。datas.*.labelは、labels.*を、datas.*.valueはvalues.*を参照する。

https://github.com/mogera551/data-x.js/blob/v0.6.1/demo/chart/index-spa/module/main.js#L22-L30

結果としてdatasは、

Javascript
"@datas" = [
  { label:"red", value:33 },
  { label:"green", value:55 },
  { label:"blue", value:11 },
];
"@datas.*.label";
"@datas.*.value";

のように見える。

新規追加するラベルを格納

https://github.com/mogera551/data-x.js/blob/v0.6.1/demo/chart/index-spa/module/main.js#L32-L32

新しいラベルを追加、値はランダムな整数。
ラベル、値を追加する。新規追加するラベルをクリア。チャートをアップデート。

https://github.com/mogera551/data-x.js/blob/v0.6.1/demo/chart/index-spa/module/main.js#L33-L38

ラベルと値を削除。削除するインデックスは、$1引数で取得する。チャートをアップデート。

https://github.com/mogera551/data-x.js/blob/v0.6.1/demo/chart/index-spa/module/main.js#L39-L43

初期化処理完了後、initChart()を実行。
eventInitが呼ばれるときは、まだブロックのhtml要素は展開されていない。

https://github.com/mogera551/data-x.js/blob/v0.6.1/demo/chart/index-spa/module/main.js#L44-L46

プロパティ間の依存関係。配列に変化があった場合、labels、valuesの変更が通知され、datasを変更する。

https://github.com/mogera551/data-x.js/blob/v0.6.1/demo/chart/index-spa/module/main.js#L49-L51

main.bind.css

https://github.com/mogera551/data-x.js/blob/v0.6.1/demo/chart/index-spa/css/main.bind.css

datasのループ用

https://github.com/mogera551/data-x.js/blob/v0.6.1/demo/chart/index-spa/css/main.bind.css#L1-L3

繰り返す要素。datas.*.valueは、数値として扱う

https://github.com/mogera551/data-x.js/blob/v0.6.1/demo/chart/index-spa/css/main.bind.css#L5-L11

追加するラベルが空の場合、追加ボタンを無効にする。

https://github.com/mogera551/data-x.js/blob/v0.6.1/demo/chart/index-spa/css/main.bind.css#L13-L15

感想

  • 他のフレームワークのサンプルを見て、実現できるかを試すと足りない部分が見えてくる。
  • 追加と削除でchartのupdateをしているのは、なんとなくダサい。

Discussion

ログインするとコメントできます