HTML
CSS
JavaScript
HTML
<!DOCTYPE html>
<html lang="zh" >
<head>
<meta charset="UTF-8">
<title>jQuery Sparklines bar charts</title>
</head>

<body>
<div class="docdemo">
  <span class="sparkbar">10,8,9,3,5,8,5</span><br /><br />
  <span class="sparkbar">-3,1,2,0,3,-1</span><br /><br />
  <span class="sparkbar">1,3,4,null,3,2,4</span>
  <span class="sparkbar">0:2,2:4,4:2,4:1</span>
</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>
CSS
.jqstooltip { box-sizing: initial; }
body { color: #4d5259; font-size: 16px; font-family: "Microsoft JhengHei","Microsoft YaHei",Helvetica,"Meiryo UI","Malgun Gothic","Segoe UI","Trebuchet MS","Monaco",monospace,Tahoma,STXihei,"华文细黑",STHeiti,"Helvetica Neue","Droid Sans","wenquanyi micro hei",FreeSans,Arimo,Arial,SimSun,"宋体",Heiti,"黑体",sans-serif; padding: 0px; margin: 0px; line-height: 32px; }
JavaScript
$('.sparkbar').sparkline('html', {type: 'bar'});