Highcharts plotLine拖动xAxis事件[关闭]答案

【问题标题】：Highcharts plotLine drag xAxis event [closed]Highcharts plotLine拖动xAxis事件[关闭]
【发布时间】：2013-08-28 06:33:24
【问题描述】：

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

编辑

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

【问题讨论】：

你能告诉我们你已经尝试过什么吗？我们不会简单地为您编写代码，但如果您的代码无法正常工作，我们可以帮助您修复它。
你能取消对这个问题的保留吗？

标签： highcharts

【解决方案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);
});

【讨论】：

它可以工作，但如果我调整窗口大小，plotLine 会改变它的位置。拥有 plotLine 的目的是选择一个范围。
因为 plotline 与图表相关，所以当你调整大小时，plotline 会移动。如果您需要添加“绝对”行，您应该使用 renderer.path。 api.highcharts.com/highcharts#Renderer.path()
我有一个最后一个问题。你如何在 'mousemove.line':step 事件绑定中传递数据？我熟悉通用的$(element).bind('event',data,function) 语法。谢谢。
它作为鼠标事件，以像素为单位保持位置。
这个解决方案对我有用。我将其扩展为包含一个显示相应轴值的标签。谢谢！

【解决方案2】：

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

类似：

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

【讨论】：