ドラッグ＆ドロッププロットリアクトハイチャート

グラフが反転しているので、yAxisに沿ってプロットラインにドラッグアンドドロップ機能を追加したいと思います。ドラッグ＆ドロッププロットリアクトハイチャート

解決策に近いと思われるいくつかの質問がありましたが、React-Highchartsパッケージを使用して解決策を実装できませんでした。

https://stackoverflow.com/a/18484071/4567096。（http://jsfiddle.net/VXTeR/1/ - その答えからのリンク）
HighCharts Draggable Plotline with Logarithmic axis scale（JSFiddleリンク：http://jsfiddle.net/48awM/30/）

両方のソリューションは非常に可能な解決策を綴ります。私の問題は、ソリューションをReact-Highchartsコンポーネントに翻訳することです。

これは、JSFiddleです。これは、マイチャートのスリム化バージョンです。

以下は私の現在のY軸

config.yaxis = { 
    title: 'Times', 
    descrition: 'Times within a 24 hour day.', 
    endOnTick: false, 
    opposite: true, 
    min: Date.UTC(0,0,0,0,0,0), 
    max: Date.UTC(0,0,0,24,30,0), 
    plotLines: [{ 
        value: Date.UTC(0,0,0,6,0,0), 
        id: 'plotLineId', 
        color: colorObj.open, 
        dashStyle: 'shortdash', 
        width: 2, 
        zIndex: 4, 
        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); 
        } 
       }, { 
        value: Date.UTC(0,0,0,21,0,0), 
        id: 'plotLineId', 
        color: colorObj.close, 
        dashStyle: 'shortdash', 
        width: 2, 
        zIndex: 4, 
        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); 
        } 
       }], 
    type: 'datetime', 
    dateTimeLabelFormats: { 

    minute: '%l:%M%p', 
    hour: '%l %p', 
    day: '%l %p' 

    }, 
    events: { 
    mouseOver: function (e) { 
     console.log('mouseOver - ', e); 
    } 
    } 
}

ための設定と私は

import React, { Component } from 'react'; 
import ReactHighcharts from 'react-highcharts' 
import { allViewConfig } from './graphConfigs/graphConfigs'; 

class Graph extends Component { 
    afterRender = (chart) => { 
    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(); 
    }; 
    } 

    render(){ 
    return (
     <div> 
     <ReactHighcharts 
      config={allViewConfig(this.props.configArr, this.props.bandRow, this.props.configVars)} 
      callback = {this.afterRender} 
     /> 
     </div> 
    ); 
    } 
}; 

export default Graph;

出典

2017-10-26 BJax

が働いて、それを手に入れたReactHighchartsコンポーネントのファイルに持っています。調整が必要な点がいくつかありました。

リアクションハイチャートoptional after-render callbackフォーマットに従う必要があります。
JQueryの操作をバニラに変換して、Reactで動作するようにします。基本的にすべてを通過し、すべてを置き換えます。$
私の場合、onDragStart,onDragChangeおよびonDragFinishはyAxis設定では必要ありませんでした。あなたが必要としている/したい場合は、JQueryを変換してステップ2のようにして、あなたは行くのが良いでしょう。
ボーナスヒント：Reduxで新しい位置を保存している場合は、チャートのレンダリング時にそれを見直してください。これは、私がReduxの情報を設定することによって私のチャートが再レンダリングされていることに気がつくまでには分かりにくいところで、奇妙なバグを引き起こしていました。

以下は、作業中のReactHighchartsコンポーネントのコードです。

import React, { PureComponent } from 'react'; 
import ReactHighcharts from 'react-highcharts' 
import { allViewConfig } from './graphConfigs/graphConfigs'; 

import moment from 'moment' 

class Graph extends PureComponent { 

// Step 1a code 

    afterRender = (chart) => { 
     // this.draggablePlotLine(chart.xAxis[0], 'foo'); 
     this.draggablePlotLine(chart.yAxis[0], 'plotLineIdOpen'); 
     this.draggablePlotLine(chart.yAxis[0], 'plotLineIdClose'); 
     console.log('ready'); 
    } 
// End Step 1a code 

    draggablePlotLine = (axis, plotLineId) => { 
      var clickX, clickY; 

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

      var getValue =() => { 
       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 = (e) => { 
// Step 2a code 
       document.addEventListener('mousemove', drag_step); 
       document.addEventListener('mouseup', drag_stop); 
// Step 2a code 

       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 = (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 test = (value) => { 
      console.log(value); 
      console.log(this); 
      this.props.updateState({key:['plotClose'], value: 'test' }); 
      // this.props.updateState({key:['plotOpen'], value: value }); 

      } 

      var drag_stop =() => { 
// Step 2b code 
       document.removeEventListener('mousemove', drag_step); 
       document.removeEventListener('mouseup', drag_stop); 
// Step 2b code 

       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() 
        // console.log(moment.utc(plotLineOptions.value).format('MMMM Do YYYY, h:mm:ss a')); 
        // console.log(plotLineOptions); 
        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(); 
     } 

    render(){ 
    return (
     <div> 
     <ReactHighcharts 
      config={allViewConfig(this.props.configArr.toArray(), this.props.bandRow, this.props.configVars)} 

// Step 1b code 
      callback = {this.afterRender} 
// End Step 1b code 
     /> 
     </div> 
    ); 
    } 
}; 

export default Graph;

出典

2017-10-27 00:17:08 BJax

ドラッグ＆ドロッププロットリアクトハイチャート

答えて

関連する問題