jquery sparklines组合图示例
关键词
jquery sparklines composite
用途
主要用于分析每个明细条目的业务趋势，或性能趋势。
效果图
源码
<!DOCTYPE HTML>
<head>
<title>基于jquery-sparklines组合图示例</title>
<style type="text/css">
</style>
<script type="text/javascript" src="./js/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="./js/jquery.sparkline.min.js"></script>
<script type="text/javascript">
$(function() {
// 柱状图：显示业务数量
$('.sparklines').sparkline('html', {
tooltipPrefix : '业务数量:',
tagValuesAttribute : 'ywsl',
type : 'bar',
barWidth : '8px',
barSpacing : '2px',
width : '80px'
});
// 曲线图：显示上传数量
$('.sparklines').sparkline('html', {
tooltipPrefix : '上传数量:',
tagValuesAttribute : 'scsl',
type : 'line',
composite : 'true',
fillColor : false,
lineColor : '#f08000',
minSpotColor : 'red',
maxSpotColor : 'red',
lineWidth : '1.5',
spotRadius : '2',
width : '80px'
});
});
</script>
</head>
<body>
<p>第04部分：门急诊信息</p>
<p> 1 门诊就诊记录表(MZJZJLB) <span class="sparklines" ywsl="57445,59230,57219,45661,22876,27510,82489,55972,4808,0" scsl="65066,57445,59230,57219,45661,22876,27510,82489,55972,4808 "/></p>
<p> 2 门诊挂号表(MZGHB) <span class="sparklines" ywsl="61429,62853,60714,48761,24001,28879,87426,59646,5137,0" scsl="68854,61429,62853,60714,48761,24001,28879,87426,59646,5137 "/></p>
<p> 3 门诊处方（医嘱）明细表(MZYZMXB) <span class="sparklines" ywsl="340092,342961,335457,244511,113232,137075,481479,299988,19363,0" scsl="396239,340092,342961,335457,244511,113232,137075,481479,299988,19363 "/></p>
<p> 4 门诊收费记录表(MZSFJLB) <span class="sparklines" ywsl="65570,67173,65233,51663,25424,31383,91590,63163,6029,0" scsl="73919,65570,67173,65233,51663,25424,31383,91590,63163,6029 "/></p>
<p> 5 门诊收费明细表(MZSFMXB) <span class="sparklines" ywsl="339064,343041,336212,244962,113119,137460,481136,300415,19505,0" scsl="396053,339064,343041,336212,244962,113119,137460,481136,300415,19505 "/></p>
</body>
</html>
参考
https://omnipotent.net/jquery.sparkline/#s-about
