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 gradient?: boolean,
        public tooltipDisabled?: boolean,
        public tooltipTemplate?: TemplateRef<string>,
        public activeEntries?: Array<object>
    ) {
        this.view = [700, 400];
        this.gradient = false;
        this.scheme = new ColorScheme();
        this.customColors = new Array<string>();
        this.activeEntries = new Array<object>();
    }
}

然后让LineChart继承BaseChart

export class LineChart extends BaseChart {
    constructor(
        public schemeType?: string,
        public legend?: boolean,
        public legendTitle?: string,
        public xAxis?: boolean,
        public yAxis?: boolean,
        public showGridLines?: boolean,
        public roundDomains?: boolean,
        public showXAxisLabel?: boolean,
        public showYAxisLabel?: boolean,
        public xAxisLabel?: string,
        public yAxisLabel?: string,
        public xAxisTickFormatting?: Function,
        public yAxisTickFormatting?: Function,
        public seriesTooltipTemplate?: TemplateRef<any>,
        public xScaleMin?: any,
        public xScaleMax?: any,
        public yScaleMin?: number,
        public yScaleMax?: number,
        public rangeFillOpacity?: number,
        public timeline?: boolean,
        public autoScale?: boolean,
        public curve?: Function
        public results?: Array<MultiChartData>,
        public referenceLines?: Array<object>,
        public showRefLines?: boolean,
        public showRefLabels?: boolean,
    ) {
        super();
        this.results = new Array();
    }
}

然后写一个生成图表的函数：

getLineChart(student:Student) {
    //传入的参数可以是固定的数据，可以是从http请求来的数据
    let colorDomain = new Array("#FFA1B5", "#86C7F3", "#5aa454");
    //在类里写一个属性叫studentLineChart来存放这个图表
    this.studentLineChart= new LineChart();
    this.studentLineChart.view=[1700,400];
    this.studentLineChart.results=new Array();
    this.studentLineChart.scheme.domain = colorDomain;
    this.studentLineChart.results=this.generateStudentStatisticLineChartResult(student);
    //generateStudentStatisticLineChartResult(student)是你自己定义的一个将原始数据进行处理之后，得到的要展示出来的数据的函数（（捂脸）好拗口）
}

然后在html里展示~

<ngx-charts-line-chart
    [view]="studentLineChart.view"
    [scheme]="studentLineChart.scheme"
    [results]="studentLineChart.results"
    [gradient]="studentLineChart.gradient"
    [xAxis]="studentLineChart.xAxis"
    [yAxis]="studentLineChart.yAxis"
    [legend]="studentLineChart.legend"
    [showXAxisLabel]="studentLineChart.showXAxisLabel"
    [showYAxisLabel]="studentLineChart.showYAxisLabel"
    [xAxisLabel]="studentLineChart.xAxisLabel"
    [yAxisLabel]="studentLineChart.yAxisLabel"
    [autoScale]="studentLineChart.autoScale">
    <ng-template #seriesTooltipTemplate let-items="model">
        <p style="font-size:20px;margin:1px 0 0 0;">{{items[0].name}}</p>
        <ul style="text-align:left">
            <li *ngFor="let item of items">
                {{item.series}}: {{item.value | number}}
            <br>
            </li>
        </ul>
    </ng-template>
</ngx-charts-line-chart>

<ngx-charts-line-chart></ngx-charts-line-chart> 这一对标签表示这是一个LineChart，不同的图表标签不同，具体哪一个是什么标签，在对应图表document页面最上面的例子中的代码中可以找到。
这里的seriesTooltipTemplate是LineChart算是特有的属性吧，因为Line一般会有好几条，所以在某一个横坐标下会有一竖排交点，也就是这些线在这个横坐标下的纵坐标值，所以这一竖排点就构成了series。seriesTooltipTemplate是把鼠标移动到某一条x=n的直线的位置上显示出来的tooltip内容，在上面html中，<ng-template #seriesTooltipTemplate let-items="model"> 中的items就是表示某一竖排点的集合，<li *ngFor="let item of items">，其实就是遍历这一竖排的所有点。
items、item可能看起来会有点迷糊：
items[0].name 是这一竖排最上面的那个点对应的横坐标值，由于这一竖排点都是一个横坐标所以都是一样的。
item.series 是这条线的名字，也就是右边legend上显示的值。
item.value 是纵坐标的值。

GroupedBarChart

类的定义与生成图表方式与上面差不多，注意参考一下document中的数据，虽然格式看起来与LineChart相同，但是同样的地方放的数据不太一样，仔细看一下document给的数据，然后对应自己想要展示的数据对号入座。
上文说到，seriesTooltipTemplate是LineChart特有的属性，其他的图表都是tooltipTemplate，区别是：
seriesTooltipTemplate是鼠标移动到某一竖线上显示的tooltip，而tooltipTemplate是鼠标移动到数据块上显示的tooltip，特别的，数据块在LineChart中其实就是数据点。

<ng-template #tooltipTemplate let-item="model">
    <p style="font-size:20px;margin:1px 0 0 0;">{{item.series}}</p>
    <ul style="text-align:left">
        <li>
            {{item.name}}: {{item.value | number}}
            <br>
        </li>
    </ul>
</ng-template>

注意区别一下：
item.name 是这一组条中你鼠标移动上去的那个条的名字，也就是右边legend上显示的值，注意区分。
item.series 是GroupedBarChart的横坐标值，注意区分。
item.value 是纵坐标的值。

其他各种图

把上面两个图介绍完以后，其他图基本照猫画虎就ok，需要注意的点有：
1.注意各种图在html中的标签不同。
2.注意各种图的results中，数据的格式与代表的意义，这里参考对应document里面的示例数据就可以找到规律啦。
3.注意各种图的tooltip的模板中的item的各个属性分别代表图的哪一部分，主要区别就在折线图与条形图这两个当中。