Я использую график с плавающей точкой для создания графика временной шкалы.Когда я парю над точками, я создаю дугу холста, чтобы построить точки на кривой.Когда я двигаю мышь по кривой, эти точки часто мерцают.Я хочу, чтобы он плавно двигался с помощью мыши, как на старшей диаграмме (https://www.highcharts.com/demo/line-time-series).
. Пожалуйста, найдите мой код ниже:
<html>
<head>
<script type="text/javascript" src="http://www.jqueryflottutorial.com/js/lib/jquery-1.8.3.min.js"></script>
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="/js/flot/excanvas.min.js"></script><![endif]-->
<script type="text/javascript" src="http://www.jqueryflottutorial.com/js/flot/jquery.flot.min.js"></script>
<script type="text/javascript" src="http://www.jqueryflottutorial.com/js/flot/jquery.flot.time.js"></script>
<script type="text/javascript" src="http://www.jqueryflottutorial.com/js/flot/jshashtable-2.1.js"></script>
<script type="text/javascript" src="http://www.jqueryflottutorial.com/js/flot/jquery.numberformatter-1.2.3.min.js"></script>
<script type="text/javascript" src="http://www.jqueryflottutorial.com/js/flot/jquery.flot.symbol.js"></script>
<script type="text/javascript" src="http://www.jqueryflottutorial.com/js/flot/jquery.flot.axislabels.js"></script>
<script src="https://www.flotcharts.org/flot/jquery.flot.crosshair.js"></script>
<style>
.tooltip {
text-decoration: none;
position: relative;
}
.tooltip+span {
display: none;
}
.tooltip:hover+span {
display: block;
position: fixed;
padding: 10px;
background-color: #333;
color: #fff;
}
</style>
<style>
* {
padding: 0;
margin: 0;
vertical-align: top;
}
body {
background: url(background.png) repeat-x;
font: 18px/1.5em "proxima-nova", Helvetica, Arial, sans-serif;
}
a {
color: #069;
}
a:hover {
color: #28b;
}
h2 {
margin-top: 15px;
font: normal 32px "omnes-pro", Helvetica, Arial, sans-serif;
}
h3 {
margin-left: 30px;
font: normal 26px "omnes-pro", Helvetica, Arial, sans-serif;
color: #666;
}
p {
margin-top: 10px;
}
button {
font-size: 18px;
padding: 1px 7px;
}
input {
font-size: 18px;
}
input[type=checkbox] {
margin: 7px;
}
#header {
position: relative;
width: 900px;
margin: auto;
}
#header h2 {
margin-left: 10px;
vertical-align: middle;
font-size: 42px;
font-weight: bold;
text-decoration: none;
color: #000;
}
#content {
width: 880px;
margin: 0 auto;
padding: 10px;
}
#footer {
margin-top: 25px;
margin-bottom: 10px;
text-align: center;
font-size: 12px;
color: #999;
}
.demo-container {
box-sizing: border-box;
width: 850px;
height: 450px;
padding: 20px 15px 15px 15px;
margin: 15px auto 30px auto;
border: 1px solid #ddd;
background: #fff;
background: linear-gradient(#f6f6f6 0, #fff 50px);
background: -o-linear-gradient(#f6f6f6 0, #fff 50px);
background: -ms-linear-gradient(#f6f6f6 0, #fff 50px);
background: -moz-linear-gradient(#f6f6f6 0, #fff 50px);
background: -webkit-linear-gradient(#f6f6f6 0, #fff 50px);
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
-o-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
-ms-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}
.demo-placeholder {
width: 100%;
height: 100%;
font-size: 14px;
line-height: 1.2em;
cursor: crosshair;
}
.legend table {
border-spacing: 5px;
}
.legend {
display: none;
}
</style>
<script>
$(function () {
var sin = [], cos = [];
for (var i = 0; i < 14; i += 0.1) {
sin.push([i, Math.sin(i)]);
cos.push([i, Math.cos(i)]);
}
plot = $.plot("#placeholder", [
{ data: sin, label: "sin(x) = -0.00" },
{ data: cos, label: "cos(x) = -0.00" }
], {
series: {
lines: {
show: true
}
},
crosshair: {
mode: "x"
},
grid: {
hoverable: true,
autoHighlight: false
},
yaxis: {
min: -1.2,
max: 1.2
}
});
var tooltip = $("#infos span");
tooltip.each(function () {
// fix the widths so they don't jump around
$(this).css('width', $(this).width());
});
var canvas = $(".overlay")[0];
var ctx = canvas.getContext("2d");
function plotPoint(x, y, radius, fillStyle, symbol) {
ctx.beginPath();
ctx.strokeStyle = "rgb(255, 255, 255)";
ctx.lineWidth = 3;
ctx.arc(x, y, radius, 0, Math.PI * 2, false);
ctx.closePath();
ctx.stroke();
ctx.fillStyle = fillStyle;
ctx.fill();
ctx.beginPath();
ctx.lineWidth = 1;
ctx.strokeStyle = "rgb(160,149,117)";
ctx.arc(x, y, radius + 2, 0, Math.PI * 2, false);
ctx.closePath();
ctx.stroke();
}
var updateTooltipTimeout = null;
var latestPosition = null;
function updateTooltip() {
updateTooltipTimeout = null;
var pos = latestPosition;
var axes = plot.getAxes();
if (pos.x < axes.xaxis.min || pos.x > axes.xaxis.max ||
pos.y < axes.yaxis.min || pos.y > axes.yaxis.max) {
return;
}
var i, j, dataset = plot.getData();
for (i = 0; i < dataset.length; ++i) {
var series = dataset[i];
// Find the nearest points, x-wise
for (j = 0; j < series.data.length; ++j) {
if (series.data[j][0] > pos.x) {
break;
}
}
// Now Interpolate
var y,
p1 = series.data[j - 1],
p2 = series.data[j];
if (p1 == null) {
y = p2[1];
} else if (p2 == null) {
y = p1[1];
} else {
y = p1[1] + (p2[1] - p1[1]) * (pos.x - p1[0]) / (p2[0] - p1[0]);
}
tooltip.eq(i).text(y.toFixed(2));
var o = plot.pointOffset({
x: pos.x,
y: y
});
// if(i==0){
// }
// if(i==1){
// }
plotPoint(o.left, o.top, 5, "rgb(153,180,125)", "circle");
}
}
$("#placeholder").bind("plothover", function (event, pos, item) {
latestPosition = pos;
if (!updateTooltipTimeout) {
updateTooltipTimeout = setTimeout(updateTooltip, 50);
}
});
var tooltips = document.querySelector('#infos');
window.onmousemove = function (e) {
var x = (e.clientX + 20) + 'px',
y = (e.clientY + 20) + 'px';
if (tooltips) {
tooltips.style.top = y;
tooltips.style.left = x;
}
};
});
</script>
</head>
<body>
<div id="content">
<div class="demo-container">
<div id="placeholder" class="demo-placeholder tooltip">
</div>
<span id="infos">
<div>sin(x) :
<span></span>
</div>
<div>cos(x) :
<span></span>
</div>
</span>
</div>
</div>
</body>
</html>
Вот скриншот графика 