npm 包 ember-sparkline 使用教程-JavaScript中文网-JavaScript教程资源分享门户

前言

如果你是一位前端开发者，你是否曾经遇到过需要在页面上绘制图表的任务？如果是的话，那么你一定会很欣赏 ember-sparkline 这个 npm 包，它可以帮助你快速生成漂亮的折线图，且支持自定义颜色、尺寸、线条样式等等。在本文中，我们将为你详细介绍 ember-sparkline 的使用方法、体验和问题解决方案。

安装

要使用 ember-sparkline 斯 implementation，先要在全局环境中安装 ember-sparkline 包：

npm install --global ember-sparkline

在项目活动中使用标题，必须在项目的 package.json 文件中添加如下依赖：

{
  "dependencies": {
    "ember-sparkline": "^4.0.0"
  }
}

使用

首先，你需要在你要使用 sparkline 的页面或组件中引入 ember-sparkline 包：

import SparklineComponent from 'ember-sparkline/components/sparkline';

接下来，你可以在 HTML 标记中使用标签 <sparkline> 来实现折线图的开发和渲染。和多数 Ember.js 组件一样，<sparkline> 标签有很多可控的属性可以用来调节它的外观和功能。下面是一些指导性的例子：

<sparkline @data={{data}} @color="#00ff00" @width="300" @height="200" />

<sparkline @data={{testData}} @color="#ff0000" @width="500" @height="150" />

最后，你也可以通过控制这些属性来实现在页面上渲染出不同样式的折线图：

data: 传入的数据数组。可以是 Ember.js 自带的数组对象，也可以是自定义的普通数组。
color: 线条的颜色。
width: 折线图的宽度。
height: 折线图的高度。

由于 ember-sparkline 的依赖标准，我们需要先在项目的 package.json 文件中才可添加如下依赖：

"ember-cli-babel": "^7.0.0",

如前文所述，在 <sparkline> 标记内写入设置参数即可完成实现，其中还可支持多个参数同时进行设置，如下：

<sparkline @color="#E22D8B" @data={{data}} @width={{200}} @height={{50}} @threshold={{175}} />

这些参数列表可以帮助你实现对于折线图的各种调节，具体的详细的解释请参考 API 文档或者代码注释。

深度使用指导

我们在前面已经介绍了如何使用 ember-sparkline 包。这里，我们进一步展开这个主题，分享一些高度优化的技巧，以及一些场景下针对性的问题处理。

调整线条颜色

你可以使用 <sparkline> 标记的 @color 属性来调整线条颜色。比较明显的场景下是需要展示渐变色的折线图，例如：

<sparkline @color="#E22D8B" @data={{data}} @width={{200}} @height={{50}} @threshold={{175}} />

如果你想要调整区域颜色，可以尝试一下 shadow 等高级属性。举例来说，你可以将线条颜色设置成 rgba 颜色格式，从而实现部分区域的渐变色。后续我们还会有相应的例子进行讲解。

自定义设定数据源

除了默认的数据传输方式，你可以使用以下方法来自定义设定数据：

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

---

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

同时，<sparkline> 标记的 @data 属性也可以自定义：

<sparkline @data={{customData}} @width="300" @height="200" @color="#00ff00" />

深层次数据处理

在实际的使用场景中，有时候并不能直接使用数据数组，而需要对这些数据进行过滤和整合，从而作为折线图的数据源。下面是一些示例代码，帮助你更好地理解这种数据处理方式：

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

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

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

其中，model.logs 是来自于数据模型的数据源。computed 属性用于每次数据发生变化的时候，重新对数据进行处理。在这段示例代码中，我们首先将需要的数据通过 .map 方法拉取到本地，然后做出处理，最后返回处理后的数据数组。

如何处理空数据？

在实际应用的场景中，你可能会遇到空数据需要进行特殊处理的情况，例如样式设定、缺省值等。给出一个示例解决方案：

import SparklineComponent from 'ember-sparkline/components/sparkline';

export default SparklineComponent.extend({
  isEmpty: function() {
    return !this.get('data') || this.get('data.length') === 0;
  }.property('data')
});

在这个示例中，我们通过 property 属性监听了数组数据的值，一旦发现数据为空，就会自动为 isEmpty 属性赋值，从而方便你对于空数据进行一些特殊处理。

总结

ember-sparkline 是一款非常灵活，可以轻松生成各种样式的折线图的 npm 包。如果你对于折线图的实现有一些具体的需求和定制，应当考虑使用这个包。过去几年中，它在开源社区中得到了很多的支持和反馈，不仅可以满足一般的使用场景，还可以为指定的数据处理或数据场景下提供优化性能和丰富可控化功能，可见这个包的潜力真正高居相当重要地位。我们强烈建议你使用一下这个包，研究其中的 API 和使用案例，相信一定会带来许多的惊喜和收获。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/600567ad81e8991b448e3fb0