Angular视觉化套件(Day19)

当我们初步了解Angular的框架後，接着我要介绍一套视觉化套件-ZingChart

ZingChart is a self-contained, dependency-free library that’s compatible with all browsers. We >are dedicated to shipping quality commercial software for your web application.

self-contained:

The library is totally contained. This means the entire state, data, and configuration of any >chart can be saved as a JSON packet. This single source of truth makes it very easy to pass >around chart information in an application.

ZingChart已经把library包含进去了~

Dependency Free:

The library has ZERO non-native browser dependencies. This allows for strong backwards >compatibility and easy integration across any web platform.

相容性高、相当容易在平台之间移转

ZingChart不但在各种框架下都有支援，当然也包括Angular罗!

zingchart-angular:

zingchart-angular is an Angular Typescript directive to allow ZingChart to work dynamically >with data. Quickly add charts to your Angular application with our ZingChart component. This >guide assumes some basic working knowledge of Angular.

zingchart为Angular准备的ts组件

安装方式如下

npm install zingchart-angular --legacy-peer-deps 

接着我们在app.module.ts引入这个模组

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    ZingchartAngularModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

在component里面新增他的设定属性 app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  config:zingchart.graphset = {
    type: 'line',
    series: [{
      values: [3,6,4,6,4,6,4,6]
    }],
  };
}

最後在html模板上插入zingchart-angular

<zingchart-angular [config]="config" [height]="500"></zingchart-angular>

储存後就可以看到页面show出

更多ZingChart套件的使用方式，让我们之後再继续说明吧!