在单击并拖动每个绘线上创建多个垂直绘图线。在角6和高图表中开发的

Question

我正在开发一个功能，以创建垂直线上的线图点击。用户应该能够拖动的线应该向左和右。我正在开发同样的角度6和高图表。

我可以创建垂直线，但不能拖动这条线。

下面是我的组件代码，在这里我创建图表和绘图线点击。

import * as Highcharts from 'highcharts';
import * as HichartsExporting from 'highcharts/modules/exporting.src';

HichartsExporting(Highcharts);

var clickX;
var clickY;

@Injectable()
export class HighchartsService {

  charts = [];
  defaultOptions = {
    title: {
      text: 'Vibration Data'
    },
    credits: {
      enabled: false
    },
    subtitle: {
      text: 'Nidec.com'
    },
    yAxis: {
      title: {
        text: ''
      }
    },
    xAxis: {
        categories: []
    },
    legend: {
      layout: 'vertical',
      align: 'right',
      verticalAlign: 'middle'
    },
    // plotOptions: {
    //   series: {        
    //     point: {
    //       events: {
    //         click: function () {
    //           alert('Category: ' + this.category + ', value: ' + this.y);
    //         }
    //       }
    //     }
    //   }
    // },
    series: [],
    chart: {      
      events: {
        click: function (e) {
          let chart = this;
          let xAxis = chart.xAxis[0];
          let xValue = xAxis.toValue(this.mouseDownX);

          xAxis.addPlotLine({
            value: xValue,
            color: '#ff0000',
            width: 2,
            label: {
              rotation: 0,
              text:xValue
            },            
            events: {
              mousedown : function (e) {
                clickX=e.pageX;
              },
              mouseout: function (e) {

              },
              mousemove: function(e) {                
                this.svgElem.translate(e.pageX - clickX, e.pageY);                
              }
            }            
          });

        }
      }

    },
    exporting : {
      buttons: {
        customButton: {
          text: 'Close',
          onclick: function (e) {
            //console.log(e);
            console.log(document.getElementById(e.path[4].id).outerHTML = '');
            //console.log();
          }
        }
      }
    }
  }

  constructor() {
  }

  createChart(container, series, xAxisData, options?: any) {    
    this.defaultOptions.series= series;
    this.defaultOptions.xAxis.categories = xAxisData; 
    let opts = !!options ? options : this.defaultOptions;
    let e = document.createElement("div");

    container.appendChild(e);

    if (!!opts.chart) {
      opts.chart['renderTo'] = e;
    }
    else {
      opts.chart = {
        'renderTo': e
      }
    }

    this.charts.push(new Highcharts.Chart(opts));
  }

Answer 1

问题在于如何翻译您的plotLines。如果将mousemove事件添加到plotLine上，则只有当鼠标直接位于 plotLine上时才会调用该事件。相反，我建议在整个文档中添加mousemove事件，至少不要添加到图表的容器中。下面是简单的演示：https://jsfiddle.net/BlackLabel/qjcrt7g5/

document.getElementById('container')
  .addEventListener(
    'mousemove',
    function(e) {
      if (chart.activePlotLine) {
        chart.activePlotLine.svgElem.translate(e.pageX - chart.clickX, 0);
      }
    }
  );

document.addEventListener(
  'mouseup',
  function(e) {
    if (chart.activePlotLine) {
      chart.activePlotLine = false;
    }
  }
);

var chart = Highcharts.chart('container', {
  title: {
    text: 'Vibration Data'
  },
  credits: {
    enabled: false
  },
  subtitle: {
    text: 'Nidec.com'
  },
  yAxis: {
    title: {
      text: ''
    }
  },
  xAxis: {
    categories: []
  },
  legend: {
    layout: 'vertical',
    align: 'right',
    verticalAlign: 'middle'
  },
  series: [{
    data: [10, 1, 5]
  }],
  chart: {
    events: {
      click: function(e) {
        let chart = this;
        let xAxis = chart.xAxis[0];
        let xValue = xAxis.toValue(this.mouseDownX);

        let clickX = 0;

        xAxis.addPlotLine({
          value: xValue,
          color: '#ff0000',
          width: 2,
          label: {
            rotation: 0,
            text: xValue
          },
          events: {
            mousedown: function(e) {
              chart.clickX = e.pageX;
              chart.activePlotLine = this;
            }
          }
        });

      }
    }

  },
  exporting: {
    buttons: {
      customButton: {
        text: 'Close',
        onclick: function(e) {
          //console.log(e);
          console.log(document.getElementById(e.path[4].id).outerHTML = '');
          //console.log();
        }
      }
    }
  }
});