Question

我想在xAxis上拖动plotLine并检测此更改。有人可以提供一个例子吗？

修改

@DiMono

这是我到目前为止所尝试的内容。 click事件未触发。通过这种方法，我想添加，dragstart，dragend等事件来启用拖动功能。

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

Answer 1

您可以使用Highcharts翻译功能在JavaScript中进行准备。

参见工作示例：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回调

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

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

Answer 2

svgElem可以视为Element，因此如果您使用on()方法应用事件处理程序（请参阅文档here），它应该可以正常工作

类似的东西：

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

Highcharts plotLine拖动xAxis事件

2 个答案: