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/

在鼠标位置需要图像/形状

1 个答案: