Question

我在使用plotBand填充2个plotLines之间的空格时遇到问题。请参阅此jsfiddle以查看我的问题： http://jsfiddle.net/kitBegemit/zkjn6nm3/。

debugger;

$（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），这将根据新的时间段重新计算数字，并将它们包含在它们之间。我也很感激有关这一部分的任何建议。

大部分代码都是在这里借用的：Highcharts plotLine drag xAxis event

以下是我最终会得到的内容：http://ge.tt/1Homxl62/v/0?c

提前感谢您的帮助..

Answer 1

在你的图表中，你会得到基于像素的值（在轴上），你用鼠标移动这些像素，不包括“开始位置”。

Answer 2

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

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',
        });

Highcharts：如果plotLine沿xAxis移动，则调整plotBand的大小

2 个答案: