読者です 読者をやめる 読者になる 読者になる

開発memo

ツクタ技研のNickUdonによる開発関連のトピック

monacaクラウドIDEとChart.jsでグラフを描画する

動作環境

ポイント

  • JS/CSSコンポーネントの追加と削除を利用する
  • 描画するons-pageが呼ばれたときに処理をする
  • サンプルコードがChart.js v1の場合互換性がない

 

 

手順

今回はOnsen UI v2 + JS Navigationでテストしました。

f:id:Nick-Udon:20161206144427p:plain

 

JS/CSSコンポーネントの追加から検索すると複数出てきます。

今回は以下のコンポーネントを利用しました。

f:id:Nick-Udon:20161206145556p:plain

 

chart.min.jsのみロードさせます

f:id:Nick-Udon:20161206150058p:plain

 

index.htmlを編集します

今回はpage2に遷移すると、レーダーチャートが表示されるようにしてみました。

 

なお、グラフ描画に関するコードは公式ドキュメントから引用しています。

Chart.js | Documentation

 

26行目 } else if (page.matches('#second-page')) {

以下にグラフのdata,ctx(描画するcamvasのid)を記述することで、

 

103行目 <canvas id="chart-canvas"></canvas>

に描画されます。

 

f:id:Nick-Udon:20161206151347p:plainf:id:Nick-Udon:20161206151404p:plain

Page2に遷移したときにアニメーション付きで表示されます。

 

参考URL