Angular学习笔记25：使用viser-ng开发页面中的图表

viser-ng

官网：https://viserjs.github.io/

1.安装viser-ng

wujiayus-MacBook-Pro:demo wjy$ npm install viser-ng
npm WARN [email protected] requires a peer of zone.js@^0.7.2 but none is installed. You must install peer dependencies yourself.

+ [email protected]

2. 安装必要的依赖：reflect-metadata / rxjs / zone.js（通常rxjs/zone.js在新建Angular项目的时候就会安装）

 npm install reflect-metadata

wujiayus-MacBook-Pro:demo wjy$ npm install reflect-metadata
npm WARN [email protected] requires a peer of zone.js@^0.7.2 but none is installed. You must install peer dependencies yourself.

+ [email protected]

然后打开：package.json

检查：

Angular版本 2.4 及以上

reflect-metadata版本 0.1 及以上

rxjs版本 5 及以上

zone.js版本 0.7 及以上

这样viser-ng就算输安装完成了；如果出现报错，执行：

npm install

npm audit fix

3.引入viser-ng到AppModule

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';

import {AppComponent} from './app.component';
import {DemoComponent} from './demo/demo.component';
import {FruitsListComponent} from './fruits-list/fruits-list.component';
import {FruitDetailComponent} from './fruit-detail/fruit-detail.component';
import {TestChartDemoComponent} from './test-chart-demo/test-chart-demo.component';
import {ViserModule} from 'viser-ng';

@NgModule({
  declarations: [
    AppComponent,
    DemoComponent,
    FruitsListComponent,
    FruitDetailComponent,
    TestChartDemoComponent
  ],
  imports: [
    BrowserModule,
    ViserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
}

4.创建一个新的组件进行测试

wujiayus-MacBook-Pro:demo wjy$ ng g component testChartDemo
CREATE src/app/test-chart-demo/test-chart-demo.component.css (0 bytes)
CREATE src/app/test-chart-demo/test-chart-demo.component.html (34 bytes)
CREATE src/app/test-chart-demo/test-chart-demo.component.spec.ts (679 bytes)
CREATE src/app/test-chart-demo/test-chart-demo.component.ts (303 bytes)
UPDATE src/app/app.module.ts (706 bytes)

5.做一个基础的折线图

模版文件（HTML）：

<div>
  <v-chart [forceFit]="forceFit" [height]="height" [data]="data" [scale]="scale">
    <v-tooltip></v-tooltip>
    <v-axis></v-axis>
    <v-line position="year*value"></v-line>
    <v-point position="year*value" shape="circle"></v-point>
  </v-chart>
</div>

类文件（TS文件）：写入数据

import {Component, OnInit} from '@angular/core';

@Component({
  selector: 'app-test-chart-demo',
  templateUrl: './test-chart-demo.component.html',
  styleUrls: ['./test-chart-demo.component.css']
})
export class TestChartDemoComponent implements OnInit {
  forceFit = true;
  height = 400;
  data = [
    {year: '1991', value: 3},
    {year: '1992', value: 4},
    {year: '1993', value: 3.5},
    {year: '1994', value: 5},
    {year: '1995', value: 4.9},
    {year: '1996', value: 6},
    {year: '1997', value: 7},
    {year: '1998', value: 9},
    {year: '1999', value: 13},
  ];
  scale = [{
    dataKey: 'value',
    min: 0,
  }, {
    dataKey: 'year',
    min: 0,
    max: 1,
  }];

  constructor() {
  }

  ngOnInit() {
  }

}

6.显示组件test-chart-demo

<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
</div>
<app-demo></app-demo>


<h3>水果展示</h3>
<app-fruits-list></app-fruits-list>


<app-test-chart-demo></app-test-chart-demo>

7.保存编译，查看界面