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

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

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

官网链接:jquery.sparkline.js

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

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

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

[html]  view plain copy print ?
  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,10span>.  
  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,5span>  
  34. p>  
  35. body>  
  36. html>  

你可能感兴趣的:(jquery画小图插件-jquery.sparkline.js)