データポイントとの対話 - FLOT

Question

私はリファレンスとして、このサイトを使用しています：http://astro.unl.edu/naap/hr/animations/hrExplorer.html

私はリンクとしてポインタ「X」を追加し、ポインタがxとy軸を移動しなければならないスライドを操作する必要があります。

は私のコードを参照してください：http://jsfiddle.net/2Xn9f/4/

は理解できますか？

私を助けることができますか？

Answer 1

まず、十字が必要です。 flot 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); 
} 

この部分は簡単です。あなたは、グラフの周りにスライドできるようにしたい場合はその後、あなたは、xとyを制御するいくつかのjQuery UI slidersを作成し、持つことができ、それは、スライダーが移動するたびに再プロット：plotSlideはこのような何かをし

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

：

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/