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

最新推荐文章于 2020-12-22 03:54:41 发布

yanhyan

最新推荐文章于 2020-12-22 03:54:41 发布

阅读量576

点赞数

分类专栏： jq 文章标签： js

本文链接：https://blog.csdn.net/weixin_40151813/article/details/107247454

版权

jq 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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

tip:基于jq,必须先引入jq

官网地址：http://omnipotent.net/jquery.sparkline/
文档地址：http://omnipotent.net/jquery.sparkline/#docs
下载地址：http://omnipotent.net/jquery.sparkline/#download

在sparkline中，我们可以找到基本的线图，柱图，饼图等等，而且它的文档还是不错的，很简单。
它的使用语法是：$(selector).sparkline(values, options);
下面是copy一份他的Doc中的例子：

<html>
<head>
    <script type="text/javascript" src="jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="jquery.sparkline.js"></script>
    <script type="text/javascript">
    $(function() {
       	// 我们可以将值直接放入到span中
        $('.inlinesparkline').sparkline(); 
        
        // 给定值
        var myvalues = [10,8,5,7,4,4,1];
        $('.dynamicsparkline').sparkline(myvalues);
        
		// 给定值和参数，可以制定画图的类型以及颜色
        $('.dynamicbar').sparkline(myvalues, {type: 'bar', barColor: 'green'} );
        
        // 使用'html' 参数的话是制定数据在标签中，代替一个数组值
        $('.inlinebar').sparkline('html', {type: 'bar', barColor: 'red'} );
    });
    </script>
</head>
<body>
<p>Inline Sparkline: 
	<span class="inlinesparkline">1,4,4,7,5,9,10</span>.
</p>
<p>Sparkline with dynamic data: 
	<span class="dynamicsparkline">Loading..</span>
</p>
<p>Bar chart with dynamic data: 
	<span class="dynamicbar">Loading.。。.</span>
</p>
<p>Bar chart with inline data:
	 <span class="inlinebar">1,3,4,5,3,5</span>
</p>
</body>
</html>

页面效果如上在这里插入图片描述

yanhyan

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jquery画小图插件-jquery.sparkline.js

在我们的项目中，需要一些画一些小图，例如一些小的线图，小的柱图等等。在网上找了下，觉得jquery.sparkline.js还是个不错的东东。官网地址：http://omnipotent.net/jquery.sparkline/文档地址：http://omnipotent.net/jquery.sparkline/#docs下载地址：http://omnipotent.net/jquery.sparkline/#download在sparkline中，我们可以找到基本的线图，柱图，饼图等等，而
复制链接

扫一扫