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リンク：​​（実際の） マイフォークアップデート： - 通常の軸のスケールを持っているが、plotlineをドラッグしながらフォークバージョンが失敗し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); 


    }); 





});