HTML
<!DOCTYPE html>
<html lang="zh" >
<head>
<meta charset="UTF-8">
<title>jQuery Sparklines all</title>
</head>
<body>
<div id="ex1">
<p>
鼠标速度 <span id="mousespeed">Loading..</span>
</p>
<p>
内联 <span class="sparkline">10,8,9,3,5,8,5</span>
折线图
<span class="sparkline">8,4,0,0,0,0,1,4,4,10,10,10,10,0,0,0,4,6,5,9,10</span>
</p>
<p>
条形图 <span class="sparkbar">10,8,9,3,5,8,5</span>
负值： <span class="sparkbar">-3,1,2,0,3,-1</span>
堆叠： <span class="sparkbar">0:2,2:4,4:2,4:1</span>
</p>
<p>
复合内联
<span id="compositeline">8,4,0,0,0,0,1,4,4,10,10,10,10,0,0,0,4,6,5,9,10</span>
</p>
<p>
与正常范围成直线
<span id="normalline">8,4,0,0,0,0,1,4,4,10,10,10,10,0,0,0,4,6,5,9,10</span>
</p>
<p>
复合条形图
<span id="compositebar">4,6,7,7,4,3,2,1,4</span>
</p>
<p>
离散的
<span class="discrete1">4,6,7,7,4,3,2,1,4,4,5,6,7,6,6,2,4,5</span><br />
带阈值的离散
<span id="discrete2">4,6,7,7,4,3,2,1,4</span>
</p>
<p>
自定义尺寸和颜色
<span id="linecustom">10,8,9,3,5,8,5,7</span>
</p>
<p>
三态图
<span class="sparktristate">1,1,0,1,-1,-1,1,-1,0,0,1,1</span><br />
（认为比赛赢了、输了或平局）
</p>
<p>
使用彩色地图的三态图：
<span class="sparktristatecols">1,2,0,2,-1,-2,1,-2,0,0,1,1</span>
</p>
<p>
方框图：<span class="sparkboxplot">4,27,34,52,54,59,61,68,78,82,85,87,91,93,100</span><br />
预先计算的方框图 <span class="sparkboxplotraw">Loading..</span>
</p>
<p>
饼图
<span class="sparkpie">1,1,2</span>
<span class="sparkpie">1,5</span>
<span class="sparkpie">20,50,80</span>
</p>
<p>
子弹图<br />
<span class="sparkbullet">10,12,12,9,7</span><br />
<span class="sparkbullet">14,12,12,9,7</span><br />
<span class="sparkbullet">10,12,14,9,7</span><br />
</p>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery-sparklines/2.1.2/jquery.sparkline.min.js"></script>
</body>
</html>
JavaScript
$('.sparkline').sparkline();
$('.sparkbar').sparkline('html', {type: 'bar'});
$('#compositeline').sparkline('html', { fillColor: false, changeRangeMin: 0, chartRangeMax: 10 });
$('#normalline').sparkline('html', { fillColor: false, normalRangeMin: -1, normalRangeMax: 8 });
$('#compositebar').sparkline('html', { type: 'bar', barColor: '#aaf' });
$('.discrete1').sparkline('html', { type: 'discrete', lineColor: 'blue', xwidth: 18 });
$('#discrete2').sparkline('html', { type: 'discrete', lineColor: 'blue', thresholdColor: 'red', thresholdValue: 4 });
$('#linecustom').sparkline('html', {height: '1.5em', width: '8em', lineColor: '#f00', fillColor: '#ffa', minSpotColor: false, maxSpotColor: false, spotColor: '#77f', spotRadius: 3});
$('.sparktristate').sparkline('html', {type: 'tristate'});
$('.sparktristatecols').sparkline('html', {type: 'tristate', colorMap: {'-2': '#fa7', '2': '#44f'} });
$('.sparkboxplot').sparkline('html', { type: 'box'});
$('.sparkboxplotraw').sparkline([ 1, 3, 5, 8, 10, 15, 18 ], {type:'box', raw: true, showOutliers:true, target: 6});
$('.sparkpie').sparkline('html', { type: 'pie', height: '1.0em' });
$('.sparkbullet').sparkline('html', { type: 'bullet' });
/**
** Draw the little mouse speed animated graph
** This just attaches a handler to the mousemove event to see
** (roughly) how far the mouse has moved
** and then updates the display a couple of times a second via
** setTimeout()
**/
function drawMouseSpeedDemo() {
var mrefreshinterval = 500; // update display every 500ms
var lastmousex=-1;
var lastmousey=-1;
var lastmousetime;
var mousetravel = 0;
var mpoints = [];
var mpoints_max = 30;
$('html').mousemove(function(e) {
var mousex = e.pageX;
var mousey = e.pageY;
if (lastmousex > -1) {
mousetravel += Math.max( Math.abs(mousex-lastmousex), Math.abs(mousey-lastmousey) );
}
lastmousex = mousex;
lastmousey = mousey;
});
var mdraw = function() {
var md = new Date();
var timenow = md.getTime();
if (lastmousetime && lastmousetime!=timenow) {
var pps = Math.round(mousetravel / (timenow - lastmousetime) * 1000);
mpoints.push(pps);
if (mpoints.length > mpoints_max)
mpoints.splice(0,1);
mousetravel = 0;
$('#mousespeed').sparkline(mpoints, { width: mpoints.length*2, tooltipSuffix: ' pixels per second' });
}
lastmousetime = timenow;
setTimeout(mdraw, mrefreshinterval);
}
// We could use setInterval instead, but I prefer to do it this way
setTimeout(mdraw, mrefreshinterval);
};
drawMouseSpeedDemo();