一、介绍
ember-basic-charts 是一个用于创建基本的图表的 Ember.js 应用程序。使用 Ember.js 框架和 D3.js 库作为基础，它可以为您提供一些方便的工具，以创建您想要的各种图表。此包是从 ember-charts 库继承而来，但是，他摒弃了 Ember CLI Addon 工具链并支持 npm 和其他模块捆绑器。
二、安装
要开始使用此包，您需要先在您的项目中安装它。在终端中运行以下命令：
npm install ember-basic-charts --save
三、使用
要开始使用该库，您需要在您的应用程序中包含以下行：
-- -------------------- ---- -------
------ - --------- - ---- --------------------------------------
------ ------- -------------------------
------ -
--------------------------
----- --------- - ------- --------- ----------
----- ---- - -------------------- ----
---------------- ------
-
---这将创建一个名为 data 的属性，并将其设置为图表数据。
接下来，您需要在您的应用程序中创建一个组件。您可以使用以下代码：
-- -------------------- ---- -------
-- -----------------------------
------ ----- ---- --------
------ - -- - ---- ------------------------------------
------ - --------- - ---- --------------------------------------
------ - -------- - ---- -------------------------------------
------ ------- ------------------------
----------- ----------------
-------- ------
------------------ --------- ----------
------ ------------
------ ----------
----------- ----
------------ ----
------ -
--------------------------
----- --------- - ------- --------- ----------
----- ---- - -------------------- ----
---------------- ------
--
------------------ -
--------------------------
----- --- - ------------------------
----- ----- - --- ------------- ----------------------- -------------------------
----------------------------------
----------------------------------
------------------------------- ---------- ---------
-
---默认情况下，此组件将呈现一条线形图（可通过 chartWidth 和 chartHeight 属性进行自定义）。
最后，您可以在模板中包含此组件：
{{basic-chart}}这将渲染您的图表！
四、示例代码
以下是一个可自定义的例子：
-- -------------------- ---- -------
-- ------------------------------
------ ----- ---- --------
------ - --------- - ---- --------------------------------------
------ ------- -------------------------
------ -
--------------------------
----- --------- - ------- --------- ----------
----- ---- - -------------------- ----
---------------- ------
--
-------- -
------------- -
----- --------- - ------- --------- --------- --------- ------
----- ---- - -------------------- ----
---------------- ------
-
-
----- -------------------- ---- ------- ------------- -------------- --------------- ----------------- --------------- --------- -- ------- -------- ---------------------- --------------
现在，您可以看到完全自由的基本图表的功能！此库具有高度的定制性，并可以与许多其他的 D3 库一起使用。希望这篇文章对你有帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005672e81e8991b448e3afb