带有对数轴刻度的HighCharts可拖动曲线

Question

我有一个简单的折线图，使用HighCharts &尝试添加可拖动的绘图线。

$(function() { 

function draggablePlotLine(axis, plotLineId) { 
    var clickX, clickY; 

    var getPlotLine = function() { 
     for (var i = 0; i < axis.plotLinesAndBands.length; i++) { 
      if (axis.plotLinesAndBands[i].id === plotLineId) { 
       return axis.plotLinesAndBands[i]; 
      } 
     } 
    }; 

    var getValue = function() { 
     var plotLine = getPlotLine(); 
     var translation = axis.horiz ? plotLine.svgElem.translateX : plotLine.svgElem.translateY; 
     var new_value = axis.toValue(translation) - axis.toValue(0) + plotLine.options.value; 
     new_value = Math.max(axis.min, Math.min(axis.max, new_value)); 
     return new_value; 
    }; 

    var drag_start = function (e) { 
     $(document).bind({ 
      'mousemove.line': drag_step, 
       'mouseup.line': drag_stop 
     }); 

     var plotLine = getPlotLine(); 
     clickX = e.pageX - plotLine.svgElem.translateX; 
     clickY = e.pageY - plotLine.svgElem.translateY; 
     if (plotLine.options.onDragStart) { 
      plotLine.options.onDragStart(getValue()); 
     } 
    }; 

    var drag_step = function (e) { 
     var plotLine = getPlotLine(); 
     var new_translation = axis.horiz ? e.pageX - clickX : e.pageY - clickY; 
     var new_value = axis.toValue(new_translation) - axis.toValue(0) + plotLine.options.value; 
     new_value = Math.max(axis.min, Math.min(axis.max, new_value)); 
     new_translation = axis.toPixels(new_value + axis.toValue(0) - plotLine.options.value); 
     plotLine.svgElem.translate(
      axis.horiz ? new_translation : 0, 
      axis.horiz ? 0 : new_translation); 

     if (plotLine.options.onDragChange) { 
      plotLine.options.onDragChange(new_value); 
     } 
    }; 

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

     var plotLine = getPlotLine(); 
     var plotLineOptions = plotLine.options; 
     //Remove + Re-insert plot line 
     //Otherwise it gets messed up when chart is resized 
     if (plotLine.svgElem.hasOwnProperty('translateX')) { 
      plotLineOptions.value = getValue() 
      axis.removePlotLine(plotLineOptions.id); 
      axis.addPlotLine(plotLineOptions); 

      if (plotLineOptions.onDragFinish) { 
       plotLineOptions.onDragFinish(plotLineOptions.value); 
      } 
     } 

     getPlotLine().svgElem 
      .css({'cursor': 'pointer'}) 
      .translate(0, 0) 
      .on('mousedown', drag_start); 
    }; 
    drag_stop(); 
}; 

$('#container').highcharts({ 
    xAxis: { 

     min: -10, 
     max: 10, 
     plotLines: [{ 
      id: 'foo', 
      color: '#00F', 
      width: 4, 
      value: 5, 
      onDragStart: function (new_value) { 
       $("#x_value").text(new_value + ' (Not changed yet)'); 
      }, 
      onDragChange: function (new_value) { 
       $("#x_value").text(new_value + ' (Dragging)'); 
      }, 
      onDragFinish: function (new_value) { 
       $("#x_value").text(new_value); 
      } 
     }] 
    }, 

    yAxis: { 
      type: 'logarithmic', 
     plotLines: [{ 
      label: { 
       text: 'Not draggable' 
      }, 
      id: 'y1', 
      color: '#CCC', 
      width: 4, 
      value: 150 
     }, { 
      id: 'y2', 
      color: '#00F', 
      width: 4, 
      value: 200, 
      onDragStart: function (new_value) { 
       $("#y_value").text(new_value + ' (Not changed yet)'); 
      }, 
      onDragChange: function (new_value) { 
       $("#y_value").text(new_value + ' (Dragging)'); 
      }, 
      onDragFinish: function (new_value) { 
       $("#y_value").text(new_value); 
      } 
     }, { 
      label: { 
       text: 'Not draggable' 
      }, 
      id: 'y3', 
      color: '#CCC', 
      width: 4, 
      value: 250 
     }] 
    }, 

    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) { 
    draggablePlotLine(chart.xAxis[0], 'foo'); 
    draggablePlotLine(chart.yAxis[0], 'y2'); 
    console.log('ready'); 
}); 
}); 

的jsfiddle链接：​​（实际） 我叉形更新：http://jsfiddle.net/kk8322/z62nnmwe/1/

实际的jsfiddle工作正常 - 它具有垂直轴的规模，但同时拖动情节主线分叉版本失败。实际&分叉版本之间的区别在于，我的Y轴将是“对数”类型。

type: 'logarithmic' 

为坐标轴添加对数坐标不能正确处理拖放操作。请建议我如何处理可对数x/y轴比例的可拖动曲线。

Answer 1

有一种更简单的方式来移动行，同时拖放。它在logarithmic型轴上正常工作。

实施例：http://jsfiddle.net/tret53sv/

$(function() { 

    var line, 
    clickX, 
    clickY; 

    var start = function (e) { 

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

     clickY = e.pageY - line.translateY; 
     //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'); 
    } 

    $('#container').highcharts({ 
     xAxis: { 
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 
     }, 
     yAxis:{ 
     type:'logarithmic', 
      plotLines: [{ 
       color: '#FF0000', 
       width: 5, 
       value: 100 
      }] 
     }, 

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

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


    }); 





});