ngx-chart中各种图表的用法

最新推荐文章于 2024-08-10 07:50:10 发布

Sophie1797

最新推荐文章于 2024-08-10 07:50:10 发布

阅读量3.9k

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/m0_37981481/article/details/79558976

版权

本文介绍了如何在Angular应用中使用ngx-chart库来创建LineChart和GroupedBarChart。通过详细说明LineChart的构造和tooltip配置，以及GroupedBarChart的数据格式和区别，帮助开发者理解和实现各类图表。同时，提到了其他图表的通用方法，强调了不同图表在HTML标签、数据结构和tooltip模板上的差异。

摘要由CSDN通过智能技术生成

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