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

Question

我知道我可以像这样使用鼠标控制 zoom/pan 行为：

    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 键时使用鼠标滚轮，我想让图表也移动（滚动）left/right。所以：

鼠标滚轮=缩放
CTRL + 鼠标滚轮 = 滚动 left/right

这有可能吗？

Answer 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>

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

How to set different chart behaviour deppending on key pressed, in amcharts

charts

amcharts

amcharts4