首页>>Jquery文字>>js线性统计图(2014-01-06)

js线性统计图

js线性统计图
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <p> Inline Sparkline: <span class="inlinesparkline">1,4,4,7,5,9,10</span>. </p>  
  2. <p> Sparkline with dynamic data: <span class="dynamicsparkline">Loading..</span> </p>  
  3. <p> Bar chart with dynamic data: <span class="dynamicbar">Loading..</span> </p>  
  4. <p> Bar chart with inline data: <span class="inlinebar">1,3,4,5,3,5</span> </p>  

 

JavaScript Code
  1. <script type="text/javascript">  
  2.     /* <![CDATA[ */  
  3.     $(function() {  
  4.         /** This code runs when everything has been loaded on the page */  
  5.         /* Inline sparklines take their values from the contents of the tag */  
  6.         $('.inlinesparkline').sparkline();   
  7.   
  8.         /* Sparklines can also take their values from the first argument passed to the sparkline() function */  
  9.         var myvalues = [10,8,5,7,4,4,1];  
  10.         $('.dynamicsparkline').sparkline(myvalues);  
  11.   
  12.         /* The second argument gives options such as specifying you want a bar chart */  
  13.         $('.dynamicbar').sparkline(myvalues, {type: 'bar', barColor: 'green'} );  
  14.   
  15.         /* Use 'html' instead of an array of values to pass options to a sparkline with data in the tag */  
  16.         $('.inlinebar').sparkline('html', {type: 'bar', barColor: 'red'} );  
  17.   
  18.     });  
  19.     /* ]]> */  
  20.     </script>  

 


原文地址:http://www.freejs.net/article_jquerywenzi_225.html