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>