npm 包 @anxorl/ng2-charts 使用教程-JavaScript中文网-JavaScript教程资源分享门户

npm 包 @anxorl/ng2-charts 使用教程

AI 编程助手，豆包旗下的编程助手，提供智能补全、智能预测、智能问答等能力，节省开发时间，释放脑海中的创造力，支持 VSCode，点击体验 AI

简介

@anxorl/ng2-charts 是一个基于 Angular2+ 的图表库。它是基于 Chart.js 开发的，并提供了 Angular 组件，使其在 Angular 项目中的使用变得更加容易。本文将介绍如何使用该包来创建图表。

安装

在使用 @anxorl/ng2-charts 之前，你需要先安装这些依赖库：

chart.js
ng2-charts
rxjs

--- ------- -------- ---------- ---- ------

安装完后，你需要将 ChartModule 导入到你项目的模块中：

------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ----------- - ---- ---------------------

------ - ------------ - ---- ------------------

-----------
  ------------- -
    ------------
  --
  -------- -
    --------------
    -----------
  --
  ---------- ---
  ---------- --------------
--
------ ----- --------- - -

使用

使用 @anxorl/ng2-charts 构建图表的基本步骤如下：

准备数据
创建一个新的图表对象
在 HTML 中使用组件
配置图表的选项和数据

下面，我们将一步步来演示如何使用这个库。

准备数据

在使用任何图表库时，你首先需要准备数据。这里我们使用一个 line 类型的示例数据：

------ ----- ---------- --------------- - -
  - ----- ---- --- --- --- --- --- ---- ------ ------- -- --
  - ----- ---- --- --- --- --- --- ---- ------ ------- -- -
--
 
------ ----- ------------ ------- - ----------- ----------- -------- -------- ------ ------- --------

ChartDataSets 是图表数据的一个接口，它接受一个 data 数组和一个 label 标签。数组中的每个元素将用来绘制一个点。

Label 是一个类型，该类型接收用于标记每个点的标签。

创建图表对象

------ ----------------- ------------ - -
  ----------- -----
--
 
------ ---------------- ------- - ------------
------ -------------- --------- - -------
------ --------------- - -----
------ ---------------- - ---
 
------ -------------- --------------- - ----------

在这个对象中，我们定义了一系列的选项以及所需的数据。其中 lineChartOptions 对象设置了图表的配置项；lineChartLabels 定义了标签；lineChartType 定义了图表的类型（这里是线性图）；lineChartData 则指定了数据。在组件 app.component.ts 中定义了以上代码。

在 HTML 中使用组件

------- ---------
        --------------------------
        --------------------------
        ----------------------------
        --------------------------
        ---------------------------
        ----------------------------
-
---------

这里直接在 app.component.html 中放置一个 canvas 组件即可。在这个组件中，我们会使用基本的 baseChart 指令来传递该组件所需的各种选项数据。

最终的图表效果如下：

总结

在本文中，我们介绍了如何使用 @anxorl/ng2-charts 包来构建图表。虽然本文提供的示例仅包含一个简单的图表，但你可以使用相同的技术来创建更多复杂的图表。

为了更加深入地了解 @anxorl/ng2-charts 的使用，你可以参考其官方文档，其中包含了各种图表类型的示例和概述。

来源：JavaScript中文网，转载请联系管理员！本文地址：https://www.javascriptcn.com/post/6005630081e8991b448e0d3f