I'm using this site as a reference: http://astro.unl.edu/naap/hr/animations/hrExplorer.html
I need to add a pointer "x" as the link and manipulate slide the pointer should move the x and y axis.
See my code: http://jsfiddle.net/2Xn9f/4/
Understand?
Can you help me?
First off, you want a cross. In the flot API , it actually gives us that function!
function cross(ctx, x, y, radius, shadow) {
var size = radius * Math.sqrt(Math.PI) / 2;
ctx.moveTo(x - size, y - size);
ctx.lineTo(x + size, y + size);
ctx.moveTo(x - size, y + size);
ctx.lineTo(x + size, y - size);
}
So that part is easy enough. Then, if you want to be able to slide it around the graph, you can create some jQuery UI sliders that control x and y, and have it replot every time a slider is moved:
$('#xslide').slider({
value: 1,
min: 0,
max: 2,
step: 0.1,
slide: function(e, ui) {
plotSlide([[ui.value, $('#yslide').slider('value')]]);
}
});
Where plotSlide does something like this:
function plotSlide(data2) {
$.plot($("#chart1"), [{
data: data1},
{
data: data2,
color: 'red',
points: {
show: true,
symbol: cross
},
lines: {
show: false
}
}],
options1);
}
See it in action here: http://jsfiddle.net/ryleyb/2Xn9f/5/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.