javascript - 需要鼠标位置的图像/形状

Question

我目前正在做一个研究项目，我需要一点帮助。由于我只是 JS/Highcharts 的新手，这个问题对许多人来说似乎很基础。我想在鼠标位置显示一个圆圈（即每当鼠标悬停在图表上时）。

当我单击鼠标（mousedown）时，我希望圆圈停留在该位置，此后圆圈不跟随鼠标位置，而是停留在鼠标点击位置。

我相信可以使用renderer.circle()来制作圆圈。并且鼠标位置可以从jQuery函数中获取。但我需要一个逻辑来将它们合并到 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/