Нужно изображение/форма в позиции мыши

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/