前言
在现代 web 开发中，很多应用需要数据可视化的需求，而这一需求通常是通过使用图表来呈现的。使用图表可以让用户更好地理解数据，因此使用图表组件是非常常见的。在 Angular 开发中，我们可以使用 bradyliles-ng2-charts 来快速创建各种类型的图表。
安装 bradyliles-ng2-charts
在使用 bradyliles-ng2-charts 之前，我们需要先安装它。可以使用 npm 进行安装：
npm install --save bradyliles-ng2-charts
使用 bradyliles-ng2-charts
安装好后，我们就可以在 Angular 模块中引入 bradyliles-ng2-charts 模块：
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------------- - ---- ---------------------------- ------ - ------------ - ---- ------------------------ ------ - ------------ - ---- ------------------ ----------- -------- --------------- -------------- ------------- --------------- ---------- --------------- -- ------ ----- --------- --
然后在组件中使用 bradyliles-ng2-charts 呈现图表：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - -------------- ------------ - ---- -----------
------ - ------ ----- - ---- -------------
------------
--------- -----------
--------- -
---- --------------- --------
------- --------- -------------------------- -------------------------- ----------------------------
-------------------------- -------------------------- -------------------------------------
------
--
--
------ ----- ------------ -
------ -------------- --------------- - -
- ----- ---- --- --- --- --- --- ---- ------ ------- -- --
- ----- ---- --- --- --- --- --- ---- ------ ------- -- --
--
------ ---------------- ------- - ----------- ----------- -------- -------- ------ ------- --------
------ ----------------- ------------ - -
----------- -----
------- -
-- -- --- ---- ----- --------- -- - ----------- --- ------- --------
------ -----
------ -
-
--- -----------
--------- -------
--
-
--- -----------
--------- --------
---------- -
------ --------------------
--
------ -
---------- ------
--
--
--
--
-------- -
----------- -
------- ------
------ ------
----- -
------- -------
--
--
--
--
------ ---------------- ------- - -
-
---------------- -------- ---- -- ------
------------ -------- ---- -- ------
--------------------- -------- ---- -- ------
----------------- -------
-------------------------- -------
---------------------- -------- ---- -- ------
--
-
---------------- -------- -- ---- ------
------------ -------- -- ---- ------
--------------------- -------- -- ---- ------
----------------- -------
-------------------------- -------
---------------------- -------- -- ---- ------
--
--
------ --------------- - -----
------ ------------- - -------
-使用指南
常见图表类型
bradyliles-ng2-charts 支持多种图表类型，包括：
- 折线图：
line - 面积图：
area - 条形图：
bar - 簇状条形图：
horizontalBar - 饼图：
pie - 圆环图：
doughnut - 极地区域图：
polarArea - 散点图：
scatter - 气泡图：
bubble
图表数据和标签
图表的数据和标签都可以通过组件的属性进行设置，例如：
public barChartData: ChartDataSets[] = [
{ data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A' },
{ data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B' },
];
public barChartLabels: Label[] = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];图表配置
图表的样式和行为可以通过组件的 ChartOptions 属性进行配置，例如：
-- -------------------- ---- -------
------ ---------------- ------------ - -
----------- -----
------- -
------ -----
------ -
-
--- -----------
--------- -------
--
-
--- -----------
--------- --------
---------- -
------ --------------------
--
------ -
---------- ------
--
--
--
--
--图表颜色
图表的颜色可以通过组件的 Color 属性进行配置，例如：
-- -------------------- ---- -------
------ --------------- ------- - -
-
---------------- -------- ---- -- ------
------------ -------- ---- -- ------
--------------------- -------- ---- -- ------
----------------- -------
-------------------------- -------
---------------------- -------- ---- -- ------
--
-
---------------- -------- -- ---- ------
------------ -------- -- ---- ------
--------------------- -------- -- ---- ------
----------------- -------
-------------------------- -------
---------------------- -------- -- ---- ------
--
--实例演示
下面是一个实际应用的例子，演示如何使用 bradyliles-ng2-charts 创建一个折线图，展示每个月的销售额：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - -------------- ------------ - ---- -----------
------ - ------ ----- - ---- -------------
------------
--------- -----------
--------- -
---- --------------- --------
------- --------- -------------------------- -------------------------- ----------------------------
-------------------------- -------------------------- -------------------------------------
------
--
--
------ ----- ------------ -
------ -------------- --------------- - -
- ----- ------- ------ ------ ----- ------ ------ ------ ------ ------ ------ ----- ------ ------ ------- --
--
------ ---------------- ------- - -
----------
-----------
--------
--------
------
-------
-------
---------
------------
----------
-----------
-----------
--
------ ----------------- ------------ - -
----------- -----
------- -
------ -- ------ - ---------- ------- -- ---------- - ------ ------ - ---
------ -- ------ - ---------- ------- -- ---------- - ------ ------ - ---
--
-------- -
----------- -
------- ------
------ ------
----- - ------- ------ --
---------- ------- ---- -- -
----- ----- - -------------------------------------
-- ------ --- ------ -
------ -----------
-
------ ----------------------------- - ---------------------- - ---
--
--
--
--
------ ---------------- ------- - -
-
---------------- ---------- --- ---- ------
------------ ---------- --- ---- ----
--------------------- ---------- --- ---- ----
----------------- -------
-------------------------- -------
---------------------- ---------- --- ---- ------
--
--
------ --------------- - ------
------ ------------- - -------
-这个例子创建了一个折线图，展示每个月的销售额。数据和标签通过 lineChartData 和 lineChartLabels 进行设置，样式和行为通过 lineChartOptions 进行设置，颜色通过 lineChartColors 进行设置，最后通过指定 lineChartType 来指定图表类型。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c82ccdc64669dde4d74