viser-ng
1.安装viser-ng
wujiayus-MacBook-Pro:demo wjy$ npm install viser-ng
npm WARN viser-ng@2.4.2 requires a peer of zone.js@^0.7.2 but none is installed. You must install peer dependencies yourself.
+ viser-ng@2.4.2
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 viser-ng@2.4.2 requires a peer of zone.js@^0.7.2 but none is installed. You must install peer dependencies yourself.
+ reflect-metadata@0.1.12
然后打开: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>