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传递false来告知update不要重绘。然后，您可以通过为动画参数https://api.highcharts.com/class-reference/Highcharts.Chart#redraw传递false来重绘不带动画。

= COUNTIFS(<cell range for status>, "PAID", <cell range for date> ,">="&DATE(yyyy,mm,dd), <cell range for status> ,"<="&DATE(yyyy,mm,dd))

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

Highcharts：禁用特定事件的动画

1 个答案: