JavaScript:sparkline插件

百度百科的介绍。

sparkline是一类信息体积小和数据密度高的图表。

目前它被用作一些测量,相关的变化的信息呈现的方式,如平均温度,股市交投活跃。

sparkline常常以一组多条的形式出现在柱状图,折线图当中。

链接:Sparkline官网


使用步骤:

1. 下载几个js文件。jquery-1.7.2.min.js,jquery.sparkline.js。版本应该有更高的了。

2. 引入html文件。

3. 写js代码……


.xxx 是类选择器。

#xxx 是id选择器。


以下代码是从网上粘过来的。

<html>  
<head>  
    <script type="text/javascript" src="jquery-1.7.2.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> 


如果要调整sparkline的宽和高,可以指定样式。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <title>jQuery Sparklines Simple Example</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <style type="text/css">
        body { font-family: helvetica, arial, san-serif; background-color: #fff; text-align: left; font-size: 0.9em; margin: 10em }
    </style>

    <script type="text/javascript" src="./jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="./jquery.sparkline.js"></script>
    <script type="text/javascript">
    $(function() {


	   var myvalues = [10,8,5,7,8,8,5,4,8,5,9];
	   $(".sparkline").sparkline(myvalues,	   
	   {type: 'line',
	    width: '120',
		height: '50'});
    });
    </script>
</head>
<body>

<span class="sparkline"></span>

</body>
</html>




评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

qcyfred

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值