Javascript 海图中的动态绘图线

我有一个带有水平绘制线的散点图。我希望人们能够拖动绘图线。y轴值用作生成柱状图的阈值（柱状图最初使用阈值的默认值生成）。到目前为止，我已经使用Highcharts论坛上的代码制作了可拖动的绘图线：

var line,
    clickX,
    clickY;

var start= function (e) {
    $(document).bind({
        'mousemove.line': step,
        'mouseup.line': stop
    });
    clickY=e.pageY - line.translateY;
}

var step = function (e) {
    line.translate(e.pageX - clickX, e.pageY - clickY)
}

var stop = function (e) {
    var chart = $('#container').highcharts();
    var max_y_axis = chart.yAxis[0].max;
    var newVal = chart.yAxis[0].toValue(e.pageY - clickY + chart.plotTop) + chart.yAxis[0].plotLinesAndBands[0].options.value)- max_y_axis;
    $('#report').text('Value: ' + newVal);
    $(document).unbind('.line');
}

---

这很好，我可以看到阈值的生成是正确的。但是，我希望在代码的其他地方访问值newVal（阈值），即创建第二个图表。有人知道如何将newVal置于函数之外吗？

只需扩大其范围：

var line,
    clickX,
    clickY,
    newVal;

var start= function (e) {
    $(document).bind({
        'mousemove.line': step,
        'mouseup.line': stop
    });
    clickY=e.pageY - line.translateY;
}

var step = function (e) {
    line.translate(e.pageX - clickX, e.pageY - clickY)
}

var stop = function (e) {
    var chart = $('#container').highcharts();
    var max_y_axis = chart.yAxis[0].max;
    newVal = chart.yAxis[0].toValue(e.pageY - clickY + chart.plotTop) + chart.yAxis[0].plotLinesAndBands[0].options.value)- max_y_axis;
    $('#report').text('Value: ' + newVal);
    $(document).unbind('.line');
}

---

我已经尝试按照您的建议在顶部的函数之外声明newVal。但是变量在函数外部（和下面）是未定义的（在函数内部定义正确）。我不知道为什么会这样。你对如何解决这个或其他问题有什么想法吗？谢谢可以重新创建整个图表，该图表显示在创建新图表时，newVal未定义/可用？newVal在定义var stop的函数中可用。但在函数外部不可用（即使newVal是全局声明的）。我是否可以在函数外部获取newVal变量，以便使用它创建第二个图表？newVal只是可拖动绘制线的y轴位置。恐怕我不知道如何设置js fiddle来向您显示更多我的第一张图表与此类似，但有一条水平的绘图线。好的，请参阅全局变量的使用，它也是一个起始值。我已经更新了js fiddle，以查看全局变量是否在函数之后发生更改：。如果拖动该线，您将看到，尽管可拖动的绘图线工作正常，但函数执行后全局变量不会发生变化。有可能这样做吗？