关闭

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

标签: 插件
445人阅读 评论(0) 收藏 举报
在我们的项目中,需要一些画一些小图,例如一些小的线图,小的柱图等等。

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

官网链接:jquery.sparkline.js

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

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

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

  1. <html>  
  2. <head>  
  3.     <script type="text/javascript" src="jquery-1.9.1.min.js"></script>  
  4.     <script type="text/javascript" src="jquery.sparkline.js"></script>  
  5.     <script type="text/javascript">  
  6.     $(function() {  
  7.         // 我们可以将值直接放入到span中  
  8.         $('.inlinesparkline').sparkline();   
  9.   
  10.         // 给定值  
  11.         var myvalues = [10,8,5,7,4,4,1];  
  12.         $('.dynamicsparkline').sparkline(myvalues);  
  13.   
  14.     // 给定值和参数,可以制定画图的类型以及颜色  
  15.         $('.dynamicbar').sparkline(myvalues, {type: 'bar', barColor: 'green'} );  
  16.   
  17.         // 使用'html' 参数的话是制定数据在标签中,代替一个数组值  
  18.         $('.inlinebar').sparkline('html', {type: 'bar', barColor: 'red'} );  
  19.     });  
  20.     </script>  
  21. </head>  
  22. <body>  
  23. <p>  
  24. Inline Sparkline: <span class="inlinesparkline">1,4,4,7,5,9,10</span>.  
  25. </p>  
  26. <p>  
  27. Sparkline with dynamic data: <span class="dynamicsparkline">Loading..</span>  
  28. </p>  
  29. <p>  
  30. Bar chart with dynamic data: <span class="dynamicbar">Loading..</span>  
  31. </p>  
  32. <p>  
  33. Bar chart with inline data: <span class="inlinebar">1,3,4,5,3,5</span>  
  34. </p>  
  35. </body>  
  36. </html>  
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:17615次
    • 积分:218
    • 等级:
    • 排名:千里之外
    • 原创:1篇
    • 转载:20篇
    • 译文:0篇
    • 评论:0条