拖放情节线React-Highcharts

时间:2017-10-26 00:25:49

标签: javascript reactjs highcharts react-highcharts

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

我发现几个问题似乎让我如此接近解决方案,但我无法使用React-Highcharts包实现解决方案。

这两种解决方案都说明了一个非常可行的解决方案。我的问题是将解决方案转换为React-Highcharts组件。

这是JSFiddle,其中包含我的图表的简化版本。

以下是我目前的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;

1 个答案:

答案 0 :(得分:1)

搞定了。有几点需要调整。

  1. 需要遵循React-Highcharts optional after-render callback格式。
  2. 将任何JQuery操作转换为vanilla,以便它可以与React一起使用。基本上通过并替换所有$
  3. 根据我的要求,yAxis配置中的onDragStartonDragChangeonDragFinish不是必需的。如果你确实需要/想要它们只是转换JQuery,就像在第2步中一样,你会很高兴。
  4. 奖励提示:如果要在Redux中保存新位置,请在更新时注意图表重新渲染。这导致了一些奇怪的错误,直到我意识到在Redux中设置信息导致我的图表重新渲染时才难以弄清楚。
  5. 以下是工作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;