在网上找了下,觉得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>