需要在鼠標位置的圖像/形狀

Question

我目前正在研究項目，我需要一點幫助。因爲我只是JS/Highcharts的新手，所以這個問題對許多人來說似乎很基本。我想在鼠標位置顯示一個圓圈（即每當鼠標懸停在圖表上時）。

當我點擊鼠標（mousedown）時，我希望圓形貼在那個位置，此後圓形不會跟隨鼠標位置，但仍然卡在鼠標點擊位置。

我相信這個圓圈可以用renderer.circle()來製作。鼠標位置可以從jQuery function獲得。但我需要一個邏輯將它們合併到HighStocks中。

任何幫助將不勝感激。如果您可以基於演示鏈接提供解決方案（jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/stock/demo/candlestick/），那麼這將是驚人。

Answer 1

它並不完美（少許震盪），但下面應該讓你開始：

// setup `chart` object ... 

var circle = chart.renderer.circle(0, 0, 5).attr({ 
    fill: 'blue', 
    stroke: 'black', 
    'stroke-width': 1 
}).add() 
    .toFront() 
    .hide(); 

var stuck = false; 

$(chart.container).mousemove(function(event){ 
    circle.show(); 

    if (stuck) { 
     return; 
    } 

    circle.attr({ 
     x: event.offsetX, 
     y: event.offsetY 
    }); 
}); 

$(chart.container).click(function(event){ 
    stuck = true; 

    circle.attr({ 
     x: event.offsetX, 
     y: event.offsetY 
    }); 
}); 

這是在行動：http://jsfiddle.net/Ukh5j/