如何在amCharts v5中触发鼠标点击并拖拽事件？

核心修改思路 #

amCharts v5没有直接的isMouseDown属性，需要通过监听绘图区域的鼠标事件维护按住状态，结合光标移动事件触发绘制逻辑：

• 在图表plotContainer上监听鼠标按下、释放、移出事件，控制mouseIsDown状态
• 仅在鼠标按住且光标移动时，调用handleDraw方法
• 修正原事件绑定逻辑，避免无效触发

修改后的关键代码片段 #

useLayoutEffect(() => {
  let root = am5.Root.new(id);
  root.utc = true;
  let mouseIsDown = false;

  let chart = root.container.children.push(
    am5xy.XYChart.new(root, {
      panX: false,
      panY: false,
      pinchZoomX: false,
      pinchZoomY: false,
      interactive: true,
      interactiveChildren: true,
    })
  );

  // 监听绘图区域的鼠标按下/释放/移出事件
  chart.plotContainer.events.on("pointerdown", () => {
    mouseIsDown = true;
  });

  chart.plotContainer.events.on("pointerup", () => {
    mouseIsDown = false;
    handleChangeUserValues(userSeries);
  });

  chart.plotContainer.events.on("pointerout", () => {
    mouseIsDown = false;
    handleChangeUserValues(userSeries);
  });

  let cursor = chart.set("cursor", am5xy.XYCursor.new(root, {}));
  cursor.lineY.set("visible", true);
  cursor.lineX.set("visible", true);

  // 光标移动时，若鼠标按住则触发绘制
  cursor.events.on("cursormoved", function (e) {
    if (mouseIsDown) {
      handleDraw(e);
    }
  });

  // ... 其余坐标轴、系列、数据处理代码保持不变 ...

  const handleDraw = (e: any) => {
    // 原handleDraw逻辑保持不变
  };

  return () => {
    root.dispose();
  };
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [userValues]);

关键说明 #

• plotContainer：图表核心绘图区域，监听这里的鼠标事件能准确捕获用户在数据区域的操作，避免点击坐标轴、图例等区域误触发
• pointerout事件：防止用户按住鼠标移出图表区域后，状态未重置导致后续操作异常
• cursormoved触发handleDraw：确保只有按住鼠标并移动时才执行绘制逻辑，和v3示例行为一致

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