highcharts - Highcharts afterAnimate 结合 xAxis max

Question

我们正在使用 Highcharts 开发一些图表。我们正在使用series.events.afterAnimate与xAxis.max值组合。

但是，当我们有例如从一月到九月的点，但是直到十二月的 xAxis.max 值，afterAnimate当它到达十二月时调用该函数，我们猜测..

但是我们希望在绘制所有有效点时有一个回调，而不是我们达到它的最大值......

这可能吗？

标签： highcharts

Answer 1

发生这种情况是因为默认情况下，clipPath 宽度等于绘图区域的宽度。要更改它，您可以覆盖Highcharts.Series.animate方法并将 clipPath 宽度设置为特定系列的宽度。

编辑：

另外，请注意，当 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>

演示：

• https://jsfiddle.net/BlackLabel/gj7eqkv8/

API参考：

• https://api.highcharts.com/highcharts/chart.events.load