jQuery Sparklines Formatting field names and values 示例

HTML

CSS

JavaScript

HTML

<!DOCTYPE html>
<html lang="zh" >
<head>
<meta charset="UTF-8">
<title>jQuery Sparklines Formatting field names and values</title>
</head>

<body>
例如，我们可以创建一个带有工具提示的条形图，提示中显示 "low", "medium" or "high" 以及值：<span class="barformat">&nbsp;</span>

<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

var values = [1, 3, 5, 3, 8];
$('.barformat').sparkline(values, {
    type: 'bar',
    tooltipFormat: '{{value:levels}} - {{value}}',
    tooltipValueLookups: {
        levels: $.range_map({ ':2': 'Low', '3:6': 'Medium', '7:': 'High' })
    }
});