javascript - Highcharts:禁用特定事件的动画

Question

有没有办法暂时禁用整个图表的动画？我的图表有一个加载事件导致图表的轴改变位置，并且不需要为此设置动画。不过，我希望整个图表的动画都处于事件状态，这样如果有人与图表进行交互(例如勾选图例项)，更新就会动画化。

我制作了一个示例图表 here .

var chart = new Highcharts.chart({
  chart: {
    //animation: false,
    type: 'spline',
    width: 600,
    renderTo: 'chart-container',
    events: {
      load: function() {
        this.update({
          chart: { spacingBottom: 50 }
        })
      }/*,
      render: function() {
        this.update({
          chart: {
            animation: true
          }
        })
      }*/
    }
  },
  title: {
    text: 'Title',
    align: 'left'
  },
  subtitle: {
    text: 'Subtitle',
    align: 'left'
  },
  series: [{
    name: 'First series',
    data: [50,60,70,80],
    color: '#5995ae'
  }, 
    {
    name: 'Second series',
    data: [43,53,43,49],
    color: '#cf921c'
  }, 
    {
    name: 'Third series',
    data: [49,38,51,79],
    color: '#abd309'
  }]
});

在示例中，spacingBottom 在图表加载后更改。这会导致我想禁用动画(xAxis 向上移动)，但我似乎无法弄清楚如何专门禁用轴的动画。

如果我简单地禁用所有动画 (chart.animation = false)，违规动画将被禁用，但这也意味着禁用我想保留的所有其他动画。

您可以看到我试图在渲染上添加一个额外的事件(目前已注释掉)，但实际上浏览器无法同时处理加载和渲染事件的额外工作量。除非我遗漏了什么。

如果我能以某种方式专门在加载事件期间禁用所有动画，那就太好了。

Answer 1

我不确定这是否是适用于所有情况的解决方案，但它似乎确实适用于您的情况。

您可以通过为重绘参数 https://api.highcharts.com/class-reference/Highcharts.Chart#update 传递一个假值来告诉更新不要重绘。 .然后你可以通过为动画参数 https://api.highcharts.com/class-reference/Highcharts.Chart#redraw 传递一个 false 来在没有动画的情况下重绘。 .

events: {
    load: function() {
    this.update({
        chart: { spacingBottom: 50 }
    }, false);
    this.redraw(false);
  }

https://jsfiddle.net/r5pyne7f/5/