1

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

编辑

@DiMono

这是我到目前为止所尝试的。单击事件未触发。通过这种方法，我想添加、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>
4

2 回答 2

5

您可以使用 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);
});
于 2013-08-28T09:26:19.033 回答
0

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

就像是：

chart.xAxis[0].plotLinesAndBands[0].svgElem.on('click', function () {
    console.log('click from plugin');
});
于 2013-08-28T09:02:18.773 回答