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

转载 2015年11月20日 14:54:09
在我们的项目中,需要一些画一些小图,例如一些小的线图,小的柱图等等。

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

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

在我们的项目中,需要一些画一些小图,例如一些小的线图,小的柱图等等。 在网上找了下,觉得jquery.sparkline.js还是个不错的东东。 官网链接:jquery.sparkline.js ...
  • xuhf_1988
  • xuhf_1988
  • 2013年10月25日 09:44
  • 8355

JavaScript:sparkline插件

js插件的sparkline的简单示例。
  • qcyfred
  • qcyfred
  • 2017年06月16日 14:58
  • 488

网页中画直线组件jquery.toLine.js

在数字教育中,我们经常会遇到连线题,工作中对此种场景进行了封装,即jquery.toLine.js,在此插件中应用了前面谈到的Math.atan2...
  • pvfhv
  • pvfhv
  • 2008年11月02日 21:42
  • 1123

jquery图表,范例及推荐 highchart+sparkline

HIGHCHARTS  官网:http://www.highcharts.com/ code:具体操作网管API中都有。 /** * 画一个柱状图 * @param valueList 图...
  • z69183787
  • z69183787
  • 2012年10月22日 10:05
  • 5617

sparkline 图标插件(Bootstrap)

1 先看看折线图运行效果如下: 折线曲折走向的数据是js代码中控制的,具体如下:$("#sparkline1").sparkline([34,43,43,35,44,32,44,52],{typ...
  • qq_15267341
  • qq_15267341
  • 2017年01月06日 14:00
  • 1898

jQuery线状图插件Sparkline

官网地址:http://omnipotent.net/jquery.sparkline/ 文档地址:http://omnipotent.net/jquery.sparkline/#docs 下载地...
  • JimyJimang
  • JimyJimang
  • 2012年09月11日 14:08
  • 865

jquery sparkline中在未加载的DOM元素中无法显示图标

How do I draw a sparkline on an element that is not yet in the DOM? You need to know two th...
  • z69183787
  • z69183787
  • 2015年01月27日 13:15
  • 1058

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

在我们的项目中,需要一些画一些小图,例如一些小的线图,小的柱图等等。 在网上找了下,觉得jquery.sparkline.js还是个不错的东东。 官网链接:jquery.sparkli...
  • huo_bao
  • huo_bao
  • 2015年11月20日 14:54
  • 641

jquery图表范例及推荐highchart+sparkline

HIGHCHARTS  官网:http://www.highcharts.com/ code:具体操作网管API中都有。 /**   * 画一个柱状图   * @param valueL...
  • zmx729618
  • zmx729618
  • 2016年04月06日 10:11
  • 1269

第17款插件:supersized 在浏览器中全屏显示图片插件

描述:Supersized 是一款功能强大的图片切换插件,支持等比例缩放图片填充成全屏效果,支持滑动和淡入淡出等多种动画切换效果。 兼容浏览器:IE6-9/Firefox/Google ...
  • skace
  • skace
  • 2013年01月20日 03:36
  • 672
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery画小图插件-jquery.sparkline.js
举报原因:
原因补充:

(最多只允许输入30个字)