Highcharts中的动态情节线

Dynamic PlotLine in Highcharts

本文关键字：动态 Highcharts      更新时间：2023-09-26

我有一个水平PlotLine的散点图。我希望人们能够拖动情节线。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');
}
相关文章：