如何在Highcharts中配置仅单个指定数据点支持拖拽功能

这个需求完全可以实现，Highcharts支持对单个数据点独立配置拖拽权限，不需要开启全系列所有点的拖拽交互。

实现步骤 #

• 首先引入Highcharts官方的draggable-points扩展模块，该模块是官方维护的专门用于支持数据点拖拽功能的组件。
• 不需要在全局或系列层面开启拖拽配置，仅对需要支持拖拽的特定数据点单独配置拖拽属性即可，示例配置如下：

series: [{
  name: '测试系列',
  // 也可以在系列层面统一关闭拖拽，避免误配置其他点
  dragDrop: {
    enabled: false
  },
  data: [
    12, // 普通不可拖拽点
    25, // 普通不可拖拽点
    {
      y: 37,
      // 单独开启该点的拖拽权限，不需要拖拽某个轴就设为false即可
      draggableX: true,
      draggableY: true,
      // 可选：给可拖拽点设置特殊样式，方便用户识别
      color: '#f54242',
      marker: {
        radius: 6
      }
    }, // 仅该点支持拖拽
    19, // 普通不可拖拽点
    44  // 普通不可拖拽点
  ]
}]

• 如果需要监听拖拽完成后的逻辑，可以绑定point.drop事件，在事件回调中判断当前操作的点属性即可执行对应业务逻辑。

注意事项 #

如果需要限制拖拽的范围，可以给可拖拽点单独配置dragDrop属性，比如设置dragMinY、dragMaxY来限制Y轴拖拽的上下限，避免数据超出合理区间。

内容的提问来源于stack exchange，提问作者bounim