Highcharts技术咨询：禁用平移、滚轮缩放动画但保留加载动画

针对你提出的两个动画控制问题，我整理了具体的实现方案，结合你的代码示例来修改：

1. 禁用平移操作时的动画，保留图表加载动画 #

要实现这个需求，我们可以通过监听图表的panStart和panEnd事件，临时切换动画配置——初始加载动画保持默认开启，仅在平移过程中禁用动画：

修改你的图表初始化代码，在chart配置中添加events属性：

$('#container').highcharts({
  "chart": {
    "panning": true,
    "events": {
      // 平移开始时禁用动画
      panStart: function() {
        this.options.chart.animation = false;
      },
      // 平移结束后恢复动画配置，不影响后续其他操作的动画
      panEnd: function() {
        this.options.chart.animation = true;
      }
    }
  },
  // 其他原有配置保持不变
  "mapNavigation": {"enabled": true, "enableButtons": true},
  "title": {"text": 'USD to EUR exchange rate over time'},
  "subtitle": {"text": document.ontouchstart === undefined ? 'Click and drag in the plot area to zoom in' : 'Pinch the chart to zoom in'},
  "xAxis": {"type": 'datetime'},
  "yAxis": {"title": {"text": 'Exchange rate'}},
  "legend": {"enabled": false},
  "plotOptions": {"area": {"fillColor": {"linearGradient": {"x1": 0, "y1": 0, "x2": 0, "y2": 1}, "stops": [ [0, Highcharts.getOptions().colors[0]], [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')] ]}, "marker": {"radius": 2}, "lineWidth": 1, "states": {"hover": {"lineWidth": 1}}, "threshold": null}},
  "series": [{"type": 'area', "name": 'USD to EUR', "data": data}]
});

原理说明：初始加载时图表使用默认动画配置，当用户开始平移操作时，临时将图表的animation设为false，此时平移过程中的重绘不会有动画；平移结束后恢复动画配置，确保其他操作（比如缩放、数据更新）的动画不受影响。

2. 仅禁用滚轮缩放时的动画（Highcharts 8.0.0） #

在Highcharts 8.0.0中没有直接配置单独禁用滚轮缩放动画的选项，但同样可以通过事件监听实现。我们需要监听zoomStart和zoomEnd事件，同时判断触发缩放的来源是否为滚轮操作，再动态控制动画：

修改chart.events配置，添加以下事件处理：

"chart": {
  "panning": true,
  "events": {
    // 保留之前的panStart/panEnd事件
    panStart: function() {
      this.options.chart.animation = false;
    },
    panEnd: function() {
      this.options.chart.animation = true;
    },
    // 缩放开始时判断是否为滚轮触发，禁用动画
    zoomStart: function(e) {
      // 滚轮缩放触发时，e.event.type为"wheel"
      if (e.event && e.event.type === "wheel") {
        this.options.chart.animation = false;
      }
    },
    // 缩放结束后恢复动画配置
    zoomEnd: function() {
      this.options.chart.animation = true;
    }
  }
},

原理说明：当滚轮缩放触发zoomStart事件时，通过e.event.type判断是否为滚轮操作，若是则临时关闭动画；缩放结束后恢复动画，保证其他缩放方式（比如拖拽缩放、按钮缩放）的动画正常执行。

这两种方案都是通过动态修改图表的动画配置实现局部禁用，既不会影响图表初始加载的动画效果，也不会全局禁用所有动画。

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