介绍
ng2-charts-extended 是一个基于 Angular 的图表插件。它可以让你在 Angular 应用中使用图表，包括横向和纵向的柱状图、线图、圆饼图、散点图、雷达图等。
ng2-charts-extended 扩展了 ng2-charts 包，支持更多定制化的设置。它的 API 非常实用，使用起来也非常方便。
安装
使用 npm 安装 ng2-charts-extended:
npm install ng2-charts-extended --save
配置
首先需要把 ChartsModule 添加到你的 AppModule 中：
import { ChartsModule } from 'ng2-charts-extended';
@NgModule({
imports: [ChartsModule],
// ...
})
export class AppModule { }然后，在你的组件中使用 ng2-charts-extended：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - -------------- ------------ - ---- -----------
------ - ------ ----- - ---- ----------------------
------------
--------- -----------------
--------- -
---- --------------- --------
------- ---------
--------------------------
--------------------------
----------------------------
--------------------------
--------------------------
---------------------------
-----------------------------------
---------------------------------------------
------
-
--
------ ----- ------------------ -
------ -------------- --------------- - -
- ----- ---- --- --- --- --- --- ---- ------ ------- -- --
- ----- ---- --- --- --- --- --- ---- ------ ------- -- -
--
------ ---------------- ------- - ----------- ----------- -------- -------- ------ ------- --------
------ ----------------- ------------ - -
----------- -----
--
------ ---------------- ------- - -
-
------------ --------
---------------- -----------------------
--
--
------ --------------- - -----
------ ------------- - -------
------ --------------- ----- ---- - -
------ --------------- ----- ---- - -
-内容
对于 ng2-charts-extended，以下是一些常见的基本操作使用案例指南：
1. 柱状图
柱状图是一种常用的图形类型，常用于数据可视化。
<canvas baseChart
[datasets]="barChartData"
[labels]="barChartLabels"
[options]="barChartOptions"
[colors]="barChartColors"
[legend]="barChartLegend"
[chartType]="barChartType"></canvas>-- -------------------- ---- -------
------ ---------------- ------------ - -
----------- -----
------- - ------ ----- ------ ---- --
-------- -
----------- -
------- ------
------ ------
-
-
--
------ --------------- ------- - -------- ------- ------- ------- ------- ------- --------
------ ------------- --------- - ------
------ -------------- - -----
------ ------------- --------------- - -
- ----- ---- --- --- --- --- --- ---- ------ ------- -- --
- ----- ---- --- --- --- --- --- ---- ------ ------- -- -
--2. 饼图
饼图是一种常用的图形类型，用于展示占比。
<canvas baseChart
[datasets]="pieChartData"
[labels]="pieChartLabels"
[options]="pieChartOptions"
[colors]="pieChartColors"
[legend]="pieChartLegend"
[chartType]="pieChartType"></canvas>-- -------------------- ---- -------
------ ---------------- ------------ - -
----------- -----
--
------ --------------- ------- - ---------- ------- --------- ------- ----------- --------
------ ------------- -------- - ----- ---- -----
------ ------------- --------- - ------
------ -------------- - -----
------ -------------- - -
-
---------------- --------------------- ---------------------- ---------------------
--
--3. 折线图
折线图是一种常用的图形类型，常用于数据可视化。
<canvas baseChart
[datasets]="lineChartData"
[labels]="lineChartLabels"
[options]="lineChartOptions"
[colors]="lineChartColors"
[legend]="lineChartLegend"
[chartType]="lineChartType"></canvas>-- -------------------- ---- -------
------ -------------- --------------- - -
- ----- ---- --- --- --- --- --- ---- ------ ------- -- --
- ----- ---- --- --- --- --- --- ---- ------ ------- -- -
--
------ ---------------- ------- - ----------- ----------- -------- -------- ------ ------- --------
------ ----------------- ------------- - - ----------- --- -- - -
----------- -----
------- - ------ ----- ------ ---- --
----------- -
------------ -
-
----- -------
----- -----------
-------- -----------
------ --------
------------ ---------
------------ --
------ - -------- ----------- -------- ---- --
--
--
--
--
------ ---------------- ------- - -
- -- ----
---------------- ------------------------
------------ ----------------------
--------------------- ----------------------
----------------- -------
-------------------------- -------
---------------------- -----------------------
--
- -- -----
---------------- ---------------------
------------ -------------------
--------------------- -------------------
----------------- -------
-------------------------- -------
---------------------- ------------------
--
--
------ --------------- - -----
------ ------------- - -------4. 散点图
散点图是一种常用的图形类型，常用于数据可视化。
<canvas baseChart
[datasets]="scatterChartData"
[options]="scatterChartOptions"
[colors]="scatterChartColors"
[legend]="scatterChartLegend"
[chartType]="scatterChartType"></canvas>-- -------------------- ---- -------
------ ----------------- --------------- - -
-
----- -
- -- --- -- -- --
- -- --- -- -- --
- -- --- -- --- --
- -- ---- -- -- --
- -- --- -- -- --
--
------ ------- ---
------------ ---
--
-
----- -
- -- ---- -- -- --
- -- ---- -- --- --
- -- ---- -- --- --
- -- --- -- --- --
- -- ---- -- --- --
--
------ ------- ---
--
--
------ -------------------- ------------ - -
----------- -----
------- -
------ -- ------ - ---- ---- ---- -- - ---
------ -- ------ - ---- ---- ---- -- - ---
--
--
------ ------------------- ------- - -
-
---------------- --------------------
------------ --------------------
--
-
---------------- --------------------
------------ --------------------
--
--
------ ------------------ - -----
------ ----------------- --------- - ----------总结
通过本教程，我们学习了如何使用 ng2-charts-extended 包创建柱状图、饼图、折线图和散点图。当然，这些只是最简单的一些例子，在实际使用中，ng2-charts-extended 给我们提供了更多的 API 来实现更加复杂的图形。我们相信，学习 ng2-charts-extended，一定会让你的数据可视化更加得心应手。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055f2b81e8991b448dcc0e