npm 包 ember-basic-charts 使用教程

一、介绍

ember-basic-charts 是一个用于创建基本的图表的 Ember.js 应用程序。使用 Ember.js 框架和 D3.js 库作为基础，它可以为您提供一些方便的工具，以创建您想要的各种图表。此包是从 ember-charts 库继承而来，但是，他摒弃了 Ember CLI Addon 工具链并支持 npm 和其他模块捆绑器。

二、安装

要开始使用此包，您需要先在您的项目中安装它。在终端中运行以下命令：

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

三、使用

要开始使用该库，您需要在您的应用程序中包含以下行：

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

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

这将创建一个名为 data 的属性，并将其设置为图表数据。

接下来，您需要在您的应用程序中创建一个组件。您可以使用以下代码：

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

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

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

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

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

默认情况下，此组件将呈现一条线形图（可通过 chartWidth 和 chartHeight 属性进行自定义）。

最后，您可以在模板中包含此组件：

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

这将渲染您的图表！

四、示例代码

以下是一个可自定义的例子：

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

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

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

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

现在，您可以看到完全自由的基本图表的功能！此库具有高度的定制性，并可以与许多其他的 D3 库一起使用。希望这篇文章对你有帮助！

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

阅读全文

猜你喜欢

  • npm 包 searchfilter 使用教程

    在 Web 前端开发中，我们经常需要从众多的 npm 包中选择和使用适合自己项目的工具和库。由于 npm 的生态系统逐渐庞大，搜索功能非常重要。但是有时候，我们搜索的关键词可能会返回一些我们不感兴趣的...

    3 年前
  • npm包isit-code-calvertbc的使用教程

    在前端开发中，我们经常需要进行代码的风格检查。isit-code-calvertbc是一个方便易用的npm包，可以帮助我们进行代码规范性检查，并提供了一些有用的功能，如自动格式化代码和代码质量评估等。

    3 年前
  • npm 包 see-dirtree 使用教程

    简介 see-dirtree 是一个npm包，可以快速地生成指定目录下的目录结构和文件列表，并将其以树状图形式展示出来。它可以帮助前端开发者更好地了解项目目录结构，方便进行快速定位和查找。

    3 年前
  • npm 包 @instabot/instabot-cordova-plugin 使用教程

    简介 @instabot/instabot-cordova-plugin 是用于 Cordova 项目的 Instabot SDK 插件。Instabot 是一款智能客服机器人解决方案，可以帮助企业提...

    3 年前
  • npm 包 tieqviet 使用教程

    在前端开发中，我们经常需要使用各种第三方库来提高开发效率和代码质量。而 npm 就是一个非常重要的 node.js 包管理工具，可以方便我们管理 JavaScript 库的依赖。

    3 年前
  • npm 包 vvic-ui 使用教程

    前言 在前端开发过程中，为了提高效率和复用性，我们需要经常使用一些已经封装好的前端组件库。其中，vvic-ui 是一个非常优秀的组件库，它提供了大量的界面组件和工具类，可以极大地帮助我们提高开发效率。

    3 年前
  • npm 包 faucethubapi 使用教程

    前言 随着区块链技术的发展和普及，更多的开发者开始加入到区块链领域中，而前端开发者同样不例外。在这篇文章中，我们将介绍 npm 包 faucethubapi 的使用教程，这个包可以帮助前端开发者简化区...

    3 年前
  • npm 包 thicket-camera 使用教程

    相信做前端的同行们都知道，随着前端技术的不断发展，越来越多的第三方库和工具涌现出来，极大地帮助我们提高效率。其中，npm 包是前端开发中非常重要的一种工具，节省了很多开发时间。

    3 年前
  • npm 包 grunt-simple-copy 使用教程

    前言 在前端开发中，经常需要进行文件的复制操作，例如将文件从源目录复制到目标目录，或将文件从源目录中筛选出特定类型的文件进行复制。为了方便开发者进行这类操作，社区中出现了很多针对文件复制的 npm 包...

    3 年前
  • npm 包 photonic 使用教程

    photonic 是一个基于 Vue.js 的简化图片裁剪工具，它能够简化在前端实现图片裁剪的流程，为开发者节省时间和精力，同时提升了用户体验。本文将详细介绍如何使用 photonic 包，帮助您快速...

    3 年前
  • npm 包 thicket-elements 使用教程

    什么是 thicket-elements？ thicket-elements 是一个基于 Web Components 技术的 UI 库，由 Thicket 团队开发和维护。

    3 年前
  • npm 包 array-pair 使用教程

    介绍 array-pair 是一个基于 JavaScript 的 npm 包，用于将数组中的元素成对地打包成二元组。本文将对该包的使用方法进行详细介绍，并包含实际的代码示例和使用场景。

    3 年前
  • npm 包 partial-application.macro 使用教程

    在前端开发中，我们常常需要对一个函数进行多次调用，每次都要传入相同的参数，这个时候就可以使用函数柯里化（Currying），又叫做部分求值（Partial Evaluation）。

    3 年前
  • npm 包 redis-queue-mock 使用教程

    在前端开发中，数据的缓存和处理是必须的步骤。而 Redis 作为一款非常优秀的缓存和消息队列工具，广泛应用在各个领域中。在使用 Redis 时，我们经常会遇到需要模拟 Redis 进行测试的情况。

    3 年前
  • npm 包 redux-first-router-page 使用教程

    在现代的前端开发中，主流的框架都使用了单页面应用（SPA）的架构。SPA 架构的优势在于能够提供更加流畅、交互式的用户体验，但是也会出现一些问题，比如说路由管理、代码分割等等。

    3 年前
  • npm 包 skylark-langx 使用教程

    在前端开发中，我们经常需要使用各种开源的工具和库。而 npm 是一个非常重要的工具，它可以帮助我们管理和安装各种开源包，其中 skylark-langx 是一个非常好用的工具包。

    3 年前
  • npm 包 node-red-contrib-netatmo-thermostat 使用教程

    node-red-contrib-netatmo-thermostat 是一个基于 Node-RED 的用于 Netatmo 热水器的温度监测的 npm 包。该包可以让开发者轻松地在 Node-RED...

    3 年前
  • npm 包 kaneoh-ase-wip 使用教程

    随着前端技术的不断发展，前端项目愈加复杂，我们需要更多的工具来协助开发。kaneoh-ase-wip 是一款 npm 包，它提供了一些实用的函数来帮助我们进行开发。

    3 年前
  • npm 包 shouldcomponentupdate-children 使用教程

    什么是 shouldComponentUpdate 方法 在 React 开发中，每当有 props 或 state 被更新时，组件都会被重新渲染。这样做的好处是保证了用户界面的最新状态。

    3 年前
  • npm 包 ai-filter 使用教程

    前言 在前端开发中，经常需要对用户的输入进行处理和过滤，以达到数据合法性和安全性的要求。这个过程通常需要耗费大量的开发时间和精力，因此寻找能够帮助我们达到这个目的的工具和解决方案变得非常重要。

    3 年前

相关推荐

    暂无文章