Highcharts afterAnimate в сочетании с xAxis max

Question

Мы разрабатываем некоторые графики с использованием Highcharts.И мы используем series.events.afterAnimate в сочетании со значением xAxis.max.

Но когда у нас есть, например, точки с января по сентябрь, но со значением xAxis.max до декабря, функция afterAnimateвызывается, когда он достигнет декабря, мы догадываемся ..

Но мы хотели бы иметь обратный вызов, когда все действительные точки нарисованы, а не мы достигаем его максимального значения ...

возможно ли это

Answer 1

Это происходит потому, что ширина clipPath по умолчанию равна ширине области графика.Чтобы изменить его, вы можете переписать метод Highcharts.Series.animate и установить ширину клипа равной ширине определенной серии.

РЕДАКТИРОВАТЬ:

Кроме того, обратите внимание, что при ширине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