Javascript Highcharts：如果绘图线沿X轴移动，则调整绘图条带的大小

使用plotBand填充两条绘图线之间的空间时出现问题。请参阅此JSFIDLE以查看我的问题： .

$function{

var line,
clickX,
clickY;
var band;
// var img = null;
var start = function (e) {

    $(document).bind({
        'mousemove.line': step,
            'mouseup.line': stop
    });

    clickX = e.pageX - line.translateX;
}

var step = function (e) {
    newPos = line.translate(e.pageX - clickX, false);

    chart = $('#container').highcharts();

    firstLineValue = chart.xAxis[0].plotLinesAndBands[1].options.value;

    // extended point of band
    point_x = chart.xAxis[0].toValue(newPos.translateX, 1);

    line = chart.xAxis[0].plotLinesAndBands[0].svgElem.attr({
        stroke: 'pink',
        value: point_x,
    })

    chart.xAxis[0].removePlotBand('plot-band-1');

    chart.xAxis[0].addPlotBand({
        from: firstLineValue,
        to: point_x,
        color: 'green',
        id: 'plot-band-1'
    });
}

var stop = function () {
    $(document).unbind('.line');
}

$('#container').highcharts({
    chart: {
        // events: {/
        //                redraw: function () {
        //                    if (img) $(img.element).remove();
        //         img = this.renderer.image('http://www.highcharts.com/demo/gfx/sun.png',
        //                    this.plotWidth, this.plotTop, 30, 30).add();
        //     }
        // }

    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],

        plotLines: [{
            color: 'red',
            width: 5,
            value: 3,
            id: 'end',

        }, {
            color: 'blue',
            width: 5,
            value: 1,
            id: 'begin'
        }],
        plotBands: [{
            color: '#FCFFC5',
            from: 1,
            to: 3,
            id: 'plot-band-1'
        }]
    },

    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }]
}, function (chart) {

    console.log(chart.xAxis[0].plotLinesAndBands[0]);

    line = chart.xAxis[0].plotLinesAndBands[0].svgElem.attr({
        stroke: 'red'
    })
        .css({
        'cursor': 'pointer'
    })
        .translate(0, 0)
        .on('mousedown', start);

    band = chart.xAxis[0].plotLinesAndBands[2].svgElem.attr({})
        .css({
        'color': '#FCFFC5'
    })


});

})

如果将红线向右拖动，则两条带之间的颜色会发生变化，但不会填满整个空间。看起来我不明白移动后直线上x的正确值是多少

稍后，我将在这些行中使用监听器AngularJS，它将根据新的句号重新计算数字，并将其括在它们之间。我也会很感激对这一部分的任何建议

这里借用了大部分代码：

下面是我最后要做的事情的示意图：

---

提前感谢您的帮助。

在您的图表中，您可以根据像素获取轴上的值，您可以通过鼠标移动，不包括起始位置。

这是我在多次测试后解决此问题的方法：

addPlotBand_to = point_x + chart.xAxis[0].plotLinesAndBands[0].options.value -
                 chart.xAxis[0].toValue(0,1);

chart.xAxis[0].addPlotBand({
            from: firstLineValue,
            to: addPlotBand_to,
            color: 'green',
            id: 'plot-band-1',
        });

addPlotBand_to = point_x + chart.xAxis[0].plotLinesAndBands[0].options.value -
                 chart.xAxis[0].toValue(0,1);

chart.xAxis[0].addPlotBand({
            from: firstLineValue,
            to: addPlotBand_to,
            color: 'green',
            id: 'plot-band-1',
        });