现在位置首页 / 前端开发 /正文

jQuery Sparklines线状图、波谱图、心跳图插件使用说明

作者: IT小兵 | 2013年7月17日| 热度:℃ | 评论: |参与:

jQuery Sparklines是一个优秀 jQuery 插件,可以帮助用户在页面种生成静态或动态波谱图表效果。你可以在浏览器种使用HTML或者javascript调用实现。插件兼容目前绝大多数流行的浏览器: Firefox 2+, Safari 3+, Opera 9, Google Chrome and Internet Explorer 6, 7, 8, 9 、 10。现在在手机端 iOS 和 Android.操作系统上也支持的很好。实现起来也很简单。用一句html或者javascript就可以实现你想要的效果了。

大家可以放心使用。

效果图如下:

image

上面的图形也能看出可以做那些应用效果。

比如:在监控系统中,我们可以做心跳图,模拟任务管理器效果。在流量系统中,可以做流量监控,进出人数这样的数据通过这个效果看起来

是非常明显的对比的。还可以做物理和电路系统中的波谱图,频谱图等等。

支持自定义样式。

支持的图表有:

1、line:现状图。曲线、折线等。可以自定义颜色和线条粗细

2、bar:柱状图

3、tristate:三态图

4、Discrete :离散图

5、Bullet:子弹图。哈哈

6、Pie:饼图

7、Box plot:盒形图。


使用方法:

1、引用:

<scripttype="text/javascript"src="jquery-1.7.2.js"></script>

<scripttype="text/javascript"src="jquery.sparkline.js"></script>



2、获取数据 ,传给sparkline  插件。

$(selector).sparkline(values, options);

 /** This code runs when everything has been loaded on the page */
       /* Inline sparklines take their values from the contents of the tag */
       $('.inlinesparkline').sparkline();
       /* Sparklines can also take their values from the first argument
       passed to the sparkline() function */
       var myvalues = [10,8,5,7,4,4,1];
       $('.dynamicsparkline').sparkline(myvalues);
       /* The second argument gives options such as chart type */
       $('.dynamicbar').sparkline(myvalues, {type: 'bar', barColor: 'green'} );
       /* Use 'html' instead of an array of values to pass options
       to a sparkline with data in the tag */
       $('.inlinebar').sparkline('html', {type: 'bar', barColor: 'red'} );

3、options参数配置:

type:类型。line bar等等。

width:宽度。

height:高度

lineColor:线条颜色

fillColor:图表填充色

chartRangeMin:Y轴最小范围值

chartRangeMax:Y轴最大范围值

composite:两个图表合并

更多参数请到这里看看:http://omnipotent.net/jquery.sparkline/#s-docs


点击阅读本文所属分类的更多文章: 前端开发 。和高手一起交流:346717337
友荐云推荐

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:suchso@vip.qq.com

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:suchso@vip.qq.com

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询