Angular组件中Highcharts双滑动轴线拖拽实现问题求助

你遇到的问题其实可以通过Highcharts官方的drag-drop模块来解决，不需要自己手动绑定SVG事件，也不用依赖jQuery，下面是具体的实现步骤：

1. 加载drag-drop模块 #

首先在你的Angular组件中导入并初始化Highcharts的drag-drop模块：

import * as Highcharts from 'highcharts';
// 导入drag-drop模块
import DragDropModule from 'highcharts/modules/drag-drop';

// 初始化模块，让Highcharts支持拖拽功能
DragDropModule(Highcharts);

如果你的项目是通过angular2-highcharts的全局配置引入Highcharts，确保在配置阶段加载这个模块即可。

2. 修改PlotLine配置，启用拖拽 #

在你添加plotLine的代码中，只需要添加draggable属性，并利用Highcharts提供的拖拽事件来实时更新plotLine的位置：

// 提前保存chart实例，避免箭头函数中this指向混乱
const chartInstance = this.chart;

// X轴可拖拽红线配置
this.chart.xAxis[0].addPlotLine({
  value: xaverage,
  color: 'red',
  width: 1,
  id: 'x-line',
  draggable: 'x', // 允许沿X轴拖拽，Y轴拖拽设为'y'，双向拖拽设为'xy'
  events: {
    // 拖拽过程中实时更新位置
    drag: function(e) {
      // 更新plotLine的value，false表示暂不重绘，提升性能
      chartInstance.xAxis[0].update({
        plotLines: [{
          id: 'x-line',
          value: e.newValue
        }]
      }, false);
    },
    // 拖拽结束后完成重绘并处理后续逻辑
    drop: function(e) {
      chartInstance.redraw();
      console.log('X轴红线最终位置:', e.newValue);
      // 这里可以把新位置保存到服务或组件变量中，方便后续使用
    }
  }
});

// Y轴可拖拽红线配置同理
this.chart.yAxis[0].addPlotLine({
  value: yaverage,
  color: 'red',
  width: 1,
  id: 'y-line',
  draggable: 'y',
  events: {
    drag: function(e) {
      chartInstance.yAxis[0].update({
        plotLines: [{
          id: 'y-line',
          value: e.newValue
        }]
      }, false);
    },
    drop: function(e) {
      chartInstance.redraw();
      console.log('Y轴红线最终位置:', e.newValue);
    }
  }
});

3. 注意事项 #

• 你之前在添加新series前执行removePlotLine的逻辑是正确的，继续保持，避免重复创建plotLine。
• 拖拽事件中的e.newValue就是拖拽后的最新位置值，可以直接用来更新plotLine，无需手动计算坐标。
• 这个方案是Highcharts原生支持的，不需要操作底层SVG元素，代码更简洁也更稳定。

内容的提问来源于stack exchange，提问作者Sten Ka Razin