スポンサーリンク

Ionic2でグラフ(1)

アプリといえば、やっぱりグラフが描けるようになりたい!

https://www.joshmorony.com/adding-responsive-charts-graphs-to-ionic-2-applications/

上記を写経してみたい。

(環境)
Windows8.1
Node 6.9.1
cordova 6.5.0
Ionic 2.2.2
VisualStudioCode
Git 2.8.1

(1)Ionic2アプリを blankで作成

image

(2)Chart.jsのインストール

npm install chart.js --save

(3)src/pages/home/ 以下を修正

src/pages/home/home.html
image

src/pages/home/home.scss
image

src/pages/home/home.ts
image

image

image

(4)ionic serve

image

あれれ、エラー

image

Cannot find module “chart.js” と出てしまう。ググっても対処法分からず。

ionic3になってしまったからなのかな?

メールアドレスを登録して、ソースコードをダウンロード

npm install

npm install @ionic/app-scripts@latest --save-dev

npm install

ionic serve

image

image

image

おお!感動

ionic platform add android

ionic build android

image

image

image

apkファイルを自分のスマホ(タブレット)にメールしてインストール

arrows Tab F-03G

Screenmemo_share_2017-04-08-07-39-10

うむ、これは面白い!自分で1から作れるとよいのに、、、

なんか、これ、よさそう。exampleものっていて、使えるかな???試してみたい

http://valor-software.com/ng2-charts/
image

image

スポンサーリンク