jquery画小图插件-jquery.sparkline.js

最新推荐文章于 2019-10-12 17:52:47 发布

huo_bao

最新推荐文章于 2019-10-12 17:52:47 发布

阅读量2.1k

点赞数

文章标签：插件

在我们的项目中，需要一些画一些小图，例如一些小的线图，小的柱图等等。

在网上找了下，觉得jquery.sparkline.js还是个不错的东东。

官网链接：jquery.sparkline.js

在sparkline中，我们可以找到基本的线图，柱图，饼图等等，而且它的文档还是不错的，很简单。

它的使用语法是：$(selector).sparkline(values, options);

下面是copy一份他的Doc中的例子：

[html]view plaincopyprint? 
    
 <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>  

huo_bao

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery画小图插件-jquery.sparkline.js

在我们的项目中，需要一些画一些小图，例如一些小的线图，小的柱图等等。在网上找了下，觉得jquery.sparkline.js还是个不错的东东。官网链接：jquery.sparkline.js在sparkline中，我们可以找到基本的线图，柱图，饼图等等，而且它的文档还是不错的，很简单。它的使用语法是：$(selector).sparkline(values, o
复制链接

扫一扫