Highcharts plotLine drag xAxis event [closed]

问题

I would like to drag a plotLine on xAxis and detect this change. Can someone please provide an example ?

Edit

@DiMono

Here is what I have tried so far. The click event is not firing. By this approach I would like to add, dragstart, dragend etc events to enable drag functionality.

<html>
<head>
   <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
   <script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script>

</head>
<body>
<div id="container" style ="height : 400px">

</div>

</body>

<script type="text/javascript">


    (function(H){
        H.Chart.prototype.callbacks.push(function(chart){

            H.addEvent(chart.xAxis[0].plotLinesAndBands[0].svgElem,'click',function(e){
                console.log('click from plugin');
            });
        });

    }(Highcharts));

    $(document).ready(function(){
        var chart = new Highcharts.Chart({
        chart : {
        renderTo: 'container'
        },
        xAxis: {
                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],

                plotLines: [{
                    color: '#FF0000',
                    width: 2,
                    value: 5.5
                }]
            },

            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]
            }]

    });

    });






</script>
</html>

回答1:

You can prepare it in JavaScript with the Highcharts translate function.

See working example: http://jsfiddle.net/VXTeR/1/

var line,
clickX,
clickY;

var start = function (e) {

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

    clickX = e.pageX - line.translateX;
    //clickY = e.pageY - line.translateY; //uncomment if plotline should be also moved vertically
}

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

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

Highcharts callback

$('#container').highcharts(options, function(chart){

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

回答2:

svgElem can be treated as an Element, so if you use the on() method to apply your event handler (refer to the documentation here), it should work.

Something like:

chart.xAxis[0].plotLinesAndBands[0].svgElem.on('click', function () {
    console.log('click from plugin');
});

来源：https://stackoverflow.com/questions/18480887/highcharts-plotline-drag-xaxis-event

标签

Highcharts