Взаимодействуя с точкой данных - Flot

Question

Я использую этот сайт в качестве ссылки: http://astro.unl.edu/naap/hr/animations/hrExplorer.html

Мне нужно добавить указатель «х», как связь и управлять слайд указателя должен переместить ось х и у.

Смотрите мой код: http://jsfiddle.net/2Xn9f/4/

Понимать?

Вы можете мне помочь?

Answer 1

Прежде всего, вам нужен крест. На флоте API это действительно дает нам эту функцию!

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); 
} 

Так что эта деталь достаточно проста. Затем, если вы хотите, чтобы иметь возможность скользить вокруг графика, вы можете создать несколько jQuery UI sliders, которые управляют х и у, и он Replot каждый раз, когда ползунок перемещается:

$('#xslide').slider({ 
    value: 1, 
    min: 0, 
    max: 2, 
    step: 0.1, 
    slide: function(e, ui) { 
     plotSlide([[ui.value, $('#yslide').slider('value')]]); 
    } 
}); 

Где plotSlide делает что-то вроде этого :

function plotSlide(data2) { 
    $.plot($("#chart1"), [{ 
     data: data1}, 
    { 
     data: data2, 
     color: 'red', 
     points: { 
      show: true, 
      symbol: cross 
     }, 
     lines: { 
      show: false 
     } 
    }], 
    options1); 
} 

в действии здесь: http://jsfiddle.net/ryleyb/2Xn9f/5/