ngx-chart中各种图表的用法

ngx-chart中各种图表的用法

live demo地址请戳：https://swimlane.github.io/ngx-charts/#/ngx-charts/bar-vertical
document地址请戳：https://swimlane.gitbooks.io/ngx-charts/content/
github地址请戳：https://github.com/swimlane/ngx-charts
本文主要结合angular2对ngx-chart中常用图表（折线图，条形图）进行说明介绍，各个图表基本大同小异，有不同的地方、需要注意的地方会详细说明，有些部分可能看起来比较冗余、复杂，但原理是不会有什么问题的~各位按需食用~

准备工作

构建一些基本的类。
在live demo和document中都有可以用来做测试的数据，可以参考数据的结构然后构建自己在code中的类。

export class SingleChartData {
    constructor(public name?: string, public value?: number) {}
}

export class MultiChartData {
    constructor(public name?: string, public series?: Array<SingleChartData>) {
        if(series){
            this.series = series;
        }
        else{
            this.series = new Array<SingleChartData>();
        }
    }
}
//用来存放颜色
export class ColorScheme {
    constructor(public domain?: Array<string>) {
        this.domain = new Array<string>();
    }
}

LineChart

在这里详细说明一下LineChart，其他的图表基本都差不多，根据document中列举出来的input构建LineChart类：
先写一个base类，集成了各种chart的共同特性，用来被各个chart继承：

export class BaseChart {
    constructor(
        public view?: Array<number>,
        public scheme?: ColorScheme,
        public customColors?: Array<string>,
        public animations?: boolean,
        public