如何在 amcharts 中根据按下的键设置不同的图表行为答案

【问题标题】：How to set different chart behaviour deppending on key pressed, in amcharts如何在 amcharts 中根据按下的键设置不同的图表行为
【发布时间】：2025-12-20 17:35:11
【问题描述】：

我知道我可以像这样使用鼠标控制缩放/平移行为：

    chart.cursor = new am4charts.XYCursor();
    chart.cursor.xAxis = dateAxis;
    chart.cursor.yAxis = valueAxis;
    chart.cursor.wheelable = true;
    chart.cursor.behavior = 'panXY';
    chart.mouseWheelBehavior = 'zoomXY';

这将使图表在鼠标滚轮上缩放并在拖动时移动。如果在按下 CTRL 键时使用鼠标滚轮，我想让图表也向左/向右移动（滚动）。所以：

鼠标滚轮 = 缩放
CTRL + 鼠标滚轮 = 向左/向右滚动

这有可能吗？

【问题讨论】：

标签： charts amcharts amcharts4

【解决方案1】：

好的，我设法通过向包装 div 添加一些事件处理程序来做到这一点：

  <div
      onMouseOut={e => {
          chart.mouseWheelBehavior = 'zoomXY';
      }}
      onMouseOver={e => {
          chart.mouseWheelBehavior = e.ctrlKey ? 'panX' : 'zoomXY';
      }}
      onWheel={e => {
          chart.mouseWheelBehavior = e.ctrlKey ? 'panX' : 'zoomXY';
      }}>
      <div className={styles.chartWrapper} ref={containerRef}>
      </div>
    </div>

【讨论】：