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>  

相关文章推荐

sparkline 图标插件(Bootstrap)

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

jquery图表范例及推荐highchart+sparkline

HIGHCHARTS  官网:http://www.highcharts.com/ code:具体操作网管API中都有。 /**   * 画一个柱状图   * @param valueL...

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

在我们的项目中,需要一些画一些小图,例如一些小的线图,小的柱图等等。 在网上找了下,觉得jquery.sparkline.js还是个不错的东东。 官网链接:jquery.sparkline.js ...

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

HIGHCHARTS  官网:http://www.highcharts.com/ code:具体操作网管API中都有。 /** * 画一个柱状图 * @param valueList 图...

发现一个特别小巧的jquery插件可以在选择的时候显示小图

图片上传,把选择图片回显出来

点击小图查看大图jQuery插件FancyBox魔幻灯箱

今日发现一个不错的JQuery插件FancyBox,也许早就有这个插件了,但是没名字,我就暂且叫他魔幻灯箱吧,采用Mac系统的样式。网传主要有以下功能: ■弹出的窗口有很漂亮的阴影效果。 ■关联的...

swipebox——一款点击小图浏览大图的jquery插件

下载地址官网使用方法将下载的压缩包解压,咱么主要会用到以下文件src ├── css │ ├── swipebox.css #css样式文件,二选一,推荐swipebox.min.css,文件更...

jQuery点击小图显示大图改良版代码

  • 2016年09月20日 16:48
  • 2.94MB
  • 下载

jquery中的小图轮播效果

jquery中的小图轮播效果 $(function(){ $('.case-list li:nth-child(3n)').css('marginRight', 0); //...

jQuery轮播图插件mySystem.js

  • 2016年02月15日 11:21
  • 332KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery画小图插件-jquery.sparkline.js
举报原因:
原因补充:

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