简介
Ember.js 是一个基于 Web 的框架，用于构建单页面应用程序（SPA）。它的核心思想是开发者使用组件来构建应用程序，并自动处理组件之间的依赖关系。
其中，nvd3 是一个使用 D3.js 渲染图表的 JavaScript 库。它提供了多种图表类型和自定义配置选项，使得绘制图表变得简单。
ember-nvd3-shim 是一个将 nvd3 库包装成 Ember 插件的 npm 包，它使得在 Ember 应用程序中使用 nvd3 变得简单快捷。
本文将介绍如何在 Ember 应用程序中使用 ember-nvd3-shim ，并提供详细示例以及有深度的指导意义。
安装
要使用 ember-nvd3-shim ，首先你需要确保你的计算机已安装 Node.js 和 npm。安装完成后，打开命令行工具，创建一个新的 Ember 应用程序：
npm install -g ember-cli ember new my-app cd my-app
然后，使用 npm 安装 ember-nvd3-shim：
npm install --save-dev ember-nvd3-shim
使用
使用 ember-nvd3-shim ，你需要将它作为你的 Ember 应用程序的一个依赖项。
在你的应用程序中，将 ember-nvd3-shim 添加到你的 package.json 文件中：
-- -------------------- ---- -------
-
------- ---------
---------- --------
--------------- ---
------------------ -
------------ ----------
------------------ ---------
--------------------- ----------
--------------------------------------- ---------
------------------------------- ---------
------------------ ---------
------------------ ---------
---------------- ---------
------------------- ---------
------------- ----------
---------------------------------- ---------
-------------------------- ---------
----------------- ---------
--------------- ----------
------------------ --------
-
-这将安装 ember-nvd3-shim ，并将其添加到您的应用程序的依赖项中。
然后，在你的应用程序的 app.js 文件中导入和使用你需要的 nvd3 模块：
import nvd3 from 'nvd3'; import 'ember-nvd3-shim';
现在，你就可以愉快地使用 nvd3 库在你的 Ember 应用程序中绘制图表了。
示例
以下是一个简单的示例，演示如何在 Ember 应用程序中使用 ember-nvd3-shim 和 nvd3 库绘制一个折线图：
-- -------------------- ---- -------
-- ------------------------------
------ ---------- ---- --------------------
------ - -------- - ---- ----------------
------ - - - ---- ---------------
------ ------- -------------------
----- ------------------- -
------ ---
-
---- ----- --- ---
------- -
- -- -- -- -- --
- -- -- -- -- --
- -- -- -- -- --
- -- -- -- -- --
- -- -- -- -- --
- -- -- -- -- --
- -- -- -- -- --
- -- -- -- -- -
-
--
-
---- ----- --- ---
------- -
- -- -- -- -- --
- -- -- -- -- --
- -- -- -- -- --
- -- -- -- -- --
- -- -- -- -- --
- -- -- -- -- --
- -- -- -- -- --
- -- -- -- -- -
-
-
---
---
-------- ------------------- -
------ -
------ -
----- ------------
------- ----
------- -
---- ---
------ ---
------- ---
----- --
--
-- ----------- -
------ ----
--
-- ----------- -
------ ----
--
------------------------ -----
------ -
---------- -- -----
--
------ -
---------- -- ------
----------- ----------- -
------ ---------------------
--
------------------ ---
-
-
--
---
-------- -
------------- -
---------------- ---
-
---- ----- --- ---
------- -
- -- -- -- - --
- -- -- -- - --
- -- -- -- - --
- -- -- -- -- --
- -- -- -- - --
- -- -- -- -- --
- -- -- -- -- --
- -- -- -- - -
-
--
-
---- ----- --- ---
------- -
- -- -- -- - --
- -- -- -- -- --
- -- -- -- - --
- -- -- -- -- --
- -- -- -- -- --
- -- -- -- -- --
- -- -- -- -- --
- -- -- -- -- -
-
-
----
-
-
---<!-- app/templates/application.hbs -->
{{#nvd3-chart type="lineChart" data=data options=options}}
<svg></svg>
<button {{action "redrawChart"}}>Redraw Chart</button>
{{/nvd3-chart}}这会在应用程序中显示一个折线图，并在单击" Redraw Chart "按钮时重新绘制它。
结论
ember-nvd3-shim 是一个非常方便的 npm 包，使在 Ember 应用程序中使用 nvd3 变得简单快捷。
本文详细介绍了如何使用这个包，并提供了一个深度示例，向读者展示了在 Ember 应用程序中使用 nvd3 库绘制图表的正确方式。希望这篇文章能对你有所帮助，祝你使用愉快！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e13a563576b7b1ec9d8