Question

我有一个高图，有两条情节线和一条在这两条情节线之间延伸的情节带。我已经将拖放事件添加到所有三个（感谢http://jsfiddle.net/48awM/30/，通过此处的另一个答案找到）。

当我拖放A行和B行时，我希望更新绘图带，使其仍然在A和B的新位置之间延伸。如果我通过删除和添加绘图带或更新轴来执行此操作，我就是无法再拖放绘图带，事件不再受其约束。

我可以做的一件事就是翻译plotband元素，但我不确定我究竟应该如何提及翻译参数 - 出于某种原因，当根据绘图线的拖放动态生成平移参数时，翻译并没有像预期的那样发生。

我想知道是否有一种方法可以移除和添加plotband，但仍然保持拖放能力。这将特别有用，因为我希望能够拖放绘图带并改变A和B的位置，使它们也位于绘图带的起点和终点。

我的代码如下。

@Component({
selector: 'smooth',
directives: [CHART_DIRECTIVES],
styles: [`
chart {
  display: block;
 }
`],
template: `<chart [options]="options" (load)="load($event.context)"></chart>
           `

})



export class AppSmoothComponent 
{ options={
  xAxis:{plotLines:[{value:3,color:'red',width:5,id:'A',label:  {text:'A',rotation:0,x:-18,style:{color:'red',fontWeight:'bold'}}},
                {value:5,color:'red',width:5,id:'B',label:{text:'B',rotation:0,x:+12,style:{color:'red',fontWeight:'bold'}}}],

     plotBands:[{color:'green',from:3,to:5,id:'Band',label:'Band'}]

     },
 series:[{data:[[1,2],[3,4],[5,6],[7,8],[9,10]]}],

      }
 constructor(){}

 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 givenPlotLine = function(plotlineID){
    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=plotLine.svgElem.translateX;
          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 getLabel=function(){
     var plotLine=getPlotLine();
     var label=plotLine.options.label;
     return label;
  }


   var drag_start = function(e){

    $(document).bind({
      'mousemove.line':drag_step,
      'mouseup.line':drag_stop
    })

    var plotLine=getPlotLine();

    clickX=e.pageX-plotLine.svgElem.translateX;
   }

   var drag_step = function (e) {

       var plotLine = getPlotLine();
       var label=plotLine.options.label;
       var new_translation = e.pageX - clickX ;
       var new_value;
       if(plotlineID=='Band'){new_value=axis.toValue(new_translation) - axis.toValue(0);
                             new_value = Math.max(axis.min, Math.min(axis.max, new_value));
                             new_translation = axis.toPixels(new_value + axis.toValue(0));
                             }
       else {

      new_value = axis.toValue(new_translation) - axis.toValue(0) + plotLine.options.value;
      new_translation = axis.toPixels(new_value + axis.toValue(0) - plotLine.options.value);}

       plotLine.svgElem.translate(new_translation,0);


       };

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

        var plotLine = getPlotLine();

        var plotLineOptions = plotLine.options;
        console.log(plotLineOptions);

        var label=plotLine.label;
        //Remove + Re-insert plot line
        //Otherwise it gets messed up when chart is resized
        if (plotLine.svgElem.hasOwnProperty('translateX')) {

            if(plotlineID=='Band'){ 
              axis.removePlotBand(plotLineOptions.id);
              axis.addPlotBand(plotLineOptions); 
                                  }
            else{
            plotLineOptions.value = getValue()
            axis.removePlotLine(plotLineOptions.id);
            axis.addPlotLine(plotLineOptions); 
            console.log(axis.plotLinesAndBands[2]);
            if(plotlineID=='A')
            {var Boptions=givenPlotLine('B')
             console.log(Boptions);
             axis.removePlotBand('Band');
               axis.addPlotBand({from:plotLineOptions.value,to:Boptions.options.value,id:'Band'                 ,color:'green'})}
            else if(plotlineID=='B')
              {console.log(plotLineOptions.value,axis.plotLinesAndBands[0].options.value)
            var Aoptions=givenPlotLine('A')
            axis.removePlotBand('Band');
            axis.addPlotBand({from:Aoptions.options.value,to:plotLineOptions.value,id:'Band',color:'green'});
            }
            }
        }



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



        };

   drag_stop();


  }

  load(instance) {
  this.draggablePlotLine(instance.xAxis[0],'A');
  this.draggablePlotLine(instance.xAxis[0],'B');
  this.draggablePlotLine(instance.xAxis[0],'Band');

  console.log('ready');

   }


   }

P.S：在上面的代码中，绘图带的拖放功能无法正常工作。这也假设A总是在B的左边。

highcharts拖放事件绑定

0 个答案: