與數據交互點 - 海軍報

Question

我使用這個網站作爲一個參考：http://astro.unl.edu/naap/hr/animations/hrExplorer.html

我需要添加一個指針「X」爲紐帶和操縱滑動指針應移動X和Y軸。

見我的代碼：http://jsfiddle.net/2Xn9f/4/

明白了嗎？

你能幫我嗎？

Answer 1

首先，你想要一個十字。在API flot中，它實際上給了我們這個功能！

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控制x和y，並將其重新繪製每一個滑塊移動時間：

$('#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/