高动画AfterAnimate与xAxis max结合使用

时间:2019-02-20 12:12:49

标签: highcharts

我们正在使用Highcharts开发一些图表。 并且我们将series.events.afterAnimatexAxis.max值结合使用。

但是,例如,当我们有从Januari到9月的点,但是xAxis.max值直到12月,则afterAnimate函数在到达12月时被调用。.

但是我们希望在绘制所有有效点时进行回调,而不是达到最大值...

这可能吗?

1 个答案:

答案 0 :(得分:1)

之所以会这样,是因为clipPath的宽度默认等于绘图区域的宽度。要对其进行更改,可以覆盖Highcharts.Series.animate方法,并将clipPath width设置为特定系列的宽度。

编辑:

此外,请注意,当clipPath的宽度更短且动画的持续时间相同时,动画会慢得多。为了使外观更好,必须缩短时间-可以根据序列宽度进行计算并在图表load事件中进行更新。

查看下面的演示和代码:

代码:

(function(H) {
	H.Series.prototype.animate = function(init) {
    var series = this,
      chart = series.chart,
      clipRect,
      animation = H.animObject(series.options.animation),
      sharedClipKey;
      

    // Initialize the animation. Set up the clipping rectangle.
    if (init) {

      series.setClip(animation);

      // Run the animation
    } else {
    
      sharedClipKey = this.sharedClipKey;
      clipRect = chart[sharedClipKey];
      if (clipRect) {
        clipRect.animate({
          width: series.group.getBBox().width,
          x: 0
        }, animation);
      }
      if (chart[sharedClipKey + 'm']) {
        chart[sharedClipKey + 'm'].animate({
          width: chart.plotSizeX + 99,
          x: 0
        }, animation);
      }

      // Delete this function to allow it only once
      series.animate = null;

    }
  }
})(Highcharts);

Highcharts.setOptions({
	chart: {
  	events: {
    	load: function() {
      	var chart = this,
        		series = chart.series[0],
           	seriesWidth = series.graph.getBBox().width,
            duration = (seriesWidth / chart.plotWidth) * series.options.animation.duration;
        
        chart.series[0].update({
        	animation: {
          	duration: duration
          }
        });
      }
    }		
  },
  plotOptions: {
  	series: {
    	animation: {
      	duration: 2000
      }
    }
  }
});


Highcharts.chart('container', {
  title: {
    text: 'Chart with half data but with max data'
  },
  subtitle: {
    text: 'A label should appear when all points are drawn'
  },
  xAxis: {
    type: 'datetime',
    min: Date.UTC(2019, 0, 1),
    max: Date.UTC(2019, 11, 31),
    tickInterval: 2592000000, // month
  },
  plotOptions: {
    series: {
      events: {
        afterAnimate: function() {
          this.chart.renderer.label(this.name + ' has appeared', 100, 70)
            .attr({
              padding: 10,
              fill: Highcharts.getOptions().colors[0]
            })
            .css({
              color: 'white'
            })
            .add();
        }
      }
    }
  },
  series: [{
    data: [{
        x: Date.UTC(2019, 0, 1),
        y: 29.9
      },
      {
        x: Date.UTC(2019, 1, 1),
        y: 139.9
      },
      {
        x: Date.UTC(2019, 2, 1),
        y: 59.9
      },
      {
        x: Date.UTC(2019, 3, 1),
        y: 19.9
      },
    ]
  }]
});

Highcharts.chart('container2', {
  title: {
    text: 'Chart with full data'
  },
  subtitle: {
    text: 'A label should appear on the plot area after animate'
  },
  xAxis: {
    type: 'datetime',
    min: Date.UTC(2019, 0, 1),
    max: Date.UTC(2019, 11, 31),
    tickInterval: 2592000000, // month
  },
  plotOptions: {
    series: {
      events: {
        afterAnimate: function() {
          this.chart.renderer.label(this.name + ' has appeared', 100, 70)
            .attr({
              padding: 10,
              fill: Highcharts.getOptions().colors[0]
            })
            .css({
              color: 'white'
            })
            .add();
        }
      }
    }
  },
  series: [{
    data: [{
        x: Date.UTC(2019, 0, 1),
        y: 29.9
      },
      {
        x: Date.UTC(2019, 1, 1),
        y: 139.9
      },
      {
        x: Date.UTC(2019, 2, 1),
        y: 59.9
      },
      {
        x: Date.UTC(2019, 3, 1),
        y: 19.9
      },
      {
        x: Date.UTC(2019, 4, 1),
        y: 29.9
      },
      {
        x: Date.UTC(2019, 5, 1),
        y: 139.9
      },
      {
        x: Date.UTC(2019, 6, 1),
        y: 59.9
      },
      {
        x: Date.UTC(2019, 7, 1),
        y: 19.9
      },
      {
        x: Date.UTC(2019, 8, 1),
        y: 29.9
      },
      {
        x: Date.UTC(2019, 9, 1),
        y: 139.9
      },
      {
        x: Date.UTC(2019, 10, 1),
        y: 59.9
      },
      {
        x: Date.UTC(2019, 11, 1),
        y: 19.9
      },

    ]
  }]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>
<div id="container2" style="height: 400px"></div>

演示:

API参考: