Javascript 拖放绘图线图表

我想将拖放功能添加到沿yAxis的绘图线上，因为我的图表已反转

我发现了几个问题，这些问题似乎让我非常接近解决方案，但我无法使用React Highcharts包实现解决方案

• 。（-来自答案的链接）
• （JSIDLE链接：）

两种解决方案都提出了一个非常可行的解决方案。我的问题是将解决方案转换为组件

这是一张我的图表的精简版

下面是我当前对yAxis的配置

  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);
     }
   }
 }

还有我在文件中关于ReactHighcharts组件的内容

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;

import React，{Component}来自'React'；
从“react highcharts”导入react highcharts
从“./graphconfig/graphconfig”导入{allViewConfig}；
类图扩展组件{
afterRender=（图表）=>{
函数DragTablePlotLine（轴，plotLineId）{
变量clickX，clickY；
var getPlotLine=函数（）{
对于（变量i=0；i

让它工作起来了。有几点需要调整

需要遵循React Highcharts格式

将任何JQuery操作转换为vanilla，以便它可以与React一起工作。基本上检查并替换所有的

$

对于我的puroses，不需要yAxis配置中的

onDragStart

、

onDragChange

和

ondragfish

。如果您确实需要/想要它们，只需转换JQuery，如步骤2中所示，就可以开始了

额外提示：如果要在Redux中保存新位置，请在更新时注意图表的重新渲染。这导致了一些奇怪的错误，直到我意识到在Redux中设置信息导致我的图表重新呈现时，才很难找出这些错误 下面是工作图表组件的代码

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;

import React，{PureComponent}来自'React'；
从“react highcharts”导入react highcharts
从“./graphconfig/graphconfig”导入{allViewConfig}；
从“时刻”导入时刻
类图扩展了PureComponent{
//步骤1a代码
afterRender=（图表）=>{
//这个.draggablePlotLine（chart.xAxis[0]，'foo'）；
这个.draggablePlotLine（chart.yAxis[0]，'plotLineIdOpen'）；
此.draggablePlotLine（chart.yAxis[0]，'plotLineIdClose'）；
console.log（'ready'）；
}
//结束步骤1a代码
DragTablePlotLine=（轴，plotLineId）=>{
变量clickX，clickY；
var getPlotLine=（）=>{
对于（变量i=0；i{
var plotLine=getPlotLine（）；
var translation=axis.horiz？plotLine.svgElem.translateX:plotLine.svgElem.translateY；
var新值=axis.toValue（平移）-axis.toValue（0）+plotLine.options.value；
新_值=Math.max（axis.min，Math.min（axis.max，新_值））；
返回新的_值；
};
var drag_start=（e）=>{
//步骤2a代码