Question

我想将拖放事件功能添加到angular2 highcharts中的xAxis plotline。这个问题的答案很好地描述了如何做到这一点 - https://stackoverflow.com/a/18484071/4567096。（http://jsfiddle.net/VXTeR/1/ - 来自回答的链接）我正在尝试将代码调整为angular2-highcharts。作为TS / JS / Angular2的新手，我不确定错误是什么。我试过的代码是：

import { Component,OnInit} from '@angular/core';
import { CHART_DIRECTIVES, Highcharts } from 'angular2-highcharts';

@Component({
selector: 'smooth',
directives: [CHART_DIRECTIVES],
template:`<chart [options]="options"></chart>`


})

export class AppSmoothComponent 
{options:Object;
line;clickX;clickY;
chart;

ngOnInIt(){
this.dranganddrop(this.chart)
}

dranganddrop=function(chart)
        {console.log(chart.xAxis[0].plotLinesAndBands[0]);
        this.line=chart.xAxis[0].plotLinesAndBands[0].svgElem.translate(0,0)
        .on('mousedown', this.start);
           }

start = function (e) {

    $(document).bind({
        'mousemove.line': this.step,
            'mouseup.line': this.stop
    });

    this.clickX = e.pageX - this.line.translateX;

}

step = function (e) {
    this.line.translate(e.pageX - this.clickX, e.pageY - this.clickY)
}
stop = function () {
    $(document).unbind('.line');
}          

constructor(){
 this.options={
     xAxis:[{
         plotLines:[{value:3,width:6,color:'blue',id:'T1'}],

    }],
     series:[{
         data:[1,2,3,4,5],
         allowPointSelect:true
     }]

 }
 }

 }

我将非常感谢您帮助理解如何使这项工作或更简单的方法来添加拖放到xAxis情节线。

Answer 1

看起来像是：

<强>模板

<chart [options]="options" (load)="load($event.context)"></chart>

<强>组件

export class App {
  options = {
      xAxis: [{
        plotLines: [{ value: 3, width: 6, color: 'blue', id: 'T1' }],
      }],
      series: [{
        data: [1, 2, 3, 4, 5],
        allowPointSelect: true
      }]
    };

  line: any;
  clickX: any;

  start = (e) => {
    document.addEventListener('mousemove', this.step);
    document.addEventListener('mouseup', this.stop)

    this.clickX = e.pageX - this.line.translateX;
  }

  step = (e) => {
    this.line.translate(e.pageX - this.clickX)
  }

  stop = () => {
    document.removeEventListener('mousemove', this.step);
    document.removeEventListener('mouseup', this.stop);
  }

  load(instance) {
    this.line = instance.xAxis[0].plotLinesAndBands[0].svgElem
      .attr({
        stroke: 'yellow'
      })
      .css({
        'cursor': 'pointer'
      })
      .translate(0, 0)
      .on('mousedown', this.start);
  }
}

<强> Plunker Example

拖放plotline angular2-highcharts打字稿

1 个答案: