0

I am currently working on a research project and I need a little help. Since I am just a novice in JS/Highcharts, the issue may seem basic to many. I want to display a circle at the mouse position (i.e. whenever mouse hovers on the chart).

And when I click the mouse (mousedown) I want the circle to stick in that position, and thereafter the circle does not follow the mouse position but remains stuck in the mouseclick position.

I believe that the circle can be made using renderer.circle(). And the mouse position can be obtained from jQuery function. But I need a logic to incorporate them inside HighStocks.

Any help will be appreciated. If you can provide solution based on the demo link(jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/stock/demo/candlestick/) then thats will be amazing.

4

1 に答える 1

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/

于 2013-02-21T05:46:14.193 に答える