jQuery Sparklines Mouse-over Events 示例

HTML

CSS

JavaScript

HTML

<!DOCTYPE html>
<html lang="zh" >
<head>
<meta charset="UTF-8">
<title>jQuery Sparklines Mouse-over Events</title>
</head>

<body>
使用当前区域详细信息更新跨度的示例：<span class="mouseoverdemo">1,3,4,7,1,3,2,4,5,6,6,5</span> 最后一个区域: <span class="mouseoverregion"></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

$('.mouseoverdemo').sparkline();
$('.mouseoverdemo').bind('sparklineRegionChange', function(ev) {
    var sparkline = ev.sparklines[0],
        region = sparkline.getCurrentRegionFields(),
        value = region.y;
    $('.mouseoverregion').text("x="+region.x+" y="+region.y);
}).bind('mouseleave', function() {
    $('.mouseoverregion').text('');
});