Sparky:用于制作走势图的 JavaScript 库
JavaScript 制作 用于
2023-06-13 09:18:34 时间
走势图(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。
相关文章
- JavaScript 装饰器介绍
- 【说站】javascript函数节流是什么
- javascript html转换成markdown,如何使用Turndown使用JavaScript将HTML转换为Markdown[通俗易懂]
- html左侧浮动广告代码,如何制作浮动广告 JavaScript制作浮动广告代码
- JavaScript数组splice方法
- 如何用 JavaScript 制作一个好用又好玩的图片压缩工具
- JavaScript学习总结(五)——Javascript中==和===的区别详解编程语言
- javaScript基础练习题-下拉框制作详解编程语言
- Javascript小技巧全集第1/4页
- 用php+javascript实现二级级联菜单的制作
- Javascript阻止javascript事件冒泡,获取控件ID值
- javascript自动标记来自搜索结果页的关键字
- 12种不宜使用的Javascript语法整理
- javascript内存管理详细解析
- 深入理解javascript动态插入技术
- javascript制作loading动画效果loading效果
- javascript制作坦克大战全纪录(1)
- Javascript多物体运动的实现
- javascript+canvas制作九宫格小程序
- javascript实现无限级select联动菜单
- Javascript基础教程之JavaScript语法