Sparky：用于制作走势图的 JavaScript 库

Denis

发布于 2023-04-15 15:10:52

5720

发布于 2023-04-15 15:10:52

文章被收录于专栏：WordPress果酱

走势图（Sparklines）是一种非常小的的图形，可以在嵌在一段文字和一个标题中间，或者一副图像旁边，它可以非常方便的可视化内容中的数据。而 Sparky 就是一个用来制作走势图的 JavaScript 库。

Sparky 的主题要功能

Sparky 支持多种图表类型：线形图，柱形图和面积图，并且线形图和柱形图可以包括可变颜色和大小的点，并且点和柱形的颜色可以定义单色，或者间隔不同的颜色。

Sparky 当然也可以渲染成大图：

Sparky 演示

在开始使用之前，我们先看下 Spacky 的演示：

glucose 128

respiration 16

some bars

an elevation profile

binary data

使用 Sparky

1. Sparky 是基于 Raphaël 这个矢量图形 JavaScript 库，所以首先要 Load Raphaël 和 Sparky 的库：

<script type="text/javascript" src="raphael-min.js"></script>
<script type="text/javascript" src="sparky.js"></script>

2. 比如你要使用线形图：在内容中插入如下的代码：

<span class="sparkline" data-points="145,136,145,136,127,136,145,136,136,172,127,136,127,127,172,172,181,172,200,127,136,118,109,100,128" data-preset="hilite-last"></span>

上面代码中，data-points 就是线形图各个点的值，data-present 就是指定使用哪种图形方式来展示。

3. 调用下面的 JavaScript 代码渲染它。

var sparks = document.querySelectorAll(".sparkline");
var el = sparks[0],
	data = sparky.parse.numbers(el.getAttribute("data-points")),
	preset = sparky.presets.get(el.getAttribute("data-preset")),
	options = sparky.util.getElementOptions(el, preset);
sparky.sparkline(el, data, options);

4. 简单的样式化：

span.sparkline {
	display: inline-block;
	width: 5em;
	height: 15px;
	margin: 0.2em;
	vertical-align: baseline;
}

下载：Sparky。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

javascript

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度