在我们的项目中,需要一些画一些小图,例如一些小的线图,小的柱图等等。
在网上找了下,觉得jquery.sparkline.js还是个不错的东东。
官网链接:jquery.sparkline.js
在sparkline中,我们可以找到基本的线图,柱图,饼图等等,而且它的文档还是不错的,很简单。
它的使用语法是:$(selector).sparkline(values, options);
下面是copy一份他的Doc中的例子:
<html>
<head>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="jquery.sparkline.js"></script>
<script type="text/javascript">
$(function() {
// 我们可以将值直接放入到span中
$('.inlinesparkline').sparkline();
// 给定值
var myvalues = [10,8,5,7,4,4,1];
$('.dynamicsparkline').sparkline(myvalues);
// 给定值和参数,可以制定画图的类型以及颜色
$('.dynamicbar').sparkline(myvalues, {type: 'bar', barColor: 'green'} );
// 使用'html' 参数的话是制定数据在标签中,代替一个数组值
$('.inlinebar').sparkline('html', {type: 'bar', barColor: 'red'} );
});
</script>
</head>
<body>
<p>
Inline Sparkline: <span class="inlinesparkline">1,4,4,7,5,9,10</span>.
</p>
<p>
Sparkline with dynamic data: <span class="dynamicsparkline">Loading..</span>
</p>
<p>
Bar chart with dynamic data: <span class="dynamicbar">Loading..</span>
</p>
<p>
Bar chart with inline data: <span class="inlinebar">1,3,4,5,3,5</span>
</p>
</body>
</html>