Chart

这边是 Chart.js 的小练习，主要就是模拟股票上上下下的线图。

安装

npm install ng2-charts chart.js --save

app.module.ts 中引入 ChartsModule

在 stock.module.ts 中引入，这边如果不引入，在 html 中 stock.page.html canvas 属性会找不到。

stock.page.html

stock.page.ts
line 12 lineChartDate 就是我们的资料。
line 15 lineChartLabels 就是X轴。
line 17 lineChartOptions 这边有一些可以设置，我这边设置 Y 轴，最大值 506 ，最小值 414，另外还有响应式。
line 24 lineChartColors 主要就是资料点的颜色，涨的时候要红，跌的时候要绿。

ngOnInit() 中 一开始在设置 X轴的初始资料，从 09:00 到下午 13:30 。
接着开始跑一个 setInterval 每一秒跑一次，这边纯粹就是用乱数模拟股票上上下下而已，把资料塞到 lineChartDate 中，另外就是设置 lineChartColors 的颜色，涨的时候要红点，跌的时候要绿点。

结果

小结语
简单的Chart小练习，希望大家天天涨停发大财!