Cuando trato de agregar un punto con animaciones en High Charts, se produce este comportamiento extraño:
Highcharts.chart('container', { chart: { events: { load: function () { var animate = {duration: 5000}; var series = this.series[0]; setInterval(function () { var x = (new Date()).getTime(), // current time y = Math.random(); series.addPoint([x, y], true, true, animate); }, 5000); } } }, xAxis: { type: 'datetime' }, series: [{ name: 'Random data', data: (function () { var data = [], time = (new Date()).getTime(), i; for (i = -19; i <= 0; i += 1) { data.push({ x: time + i * 1000, y: Math.random() }); } return data; }()) }] });Este es el comportamiento que me gustaría lograr, pero en lugar de tardar 1 segundo en renderizarse, me gustaría que cada punto tardara 5 segundos en renderizarse. ¿Cómo puedo conseguir esto?
Sucede algo que hace que la animación tarde un poco más en terminar su duración. Por lo tanto, el gráfico se volverá a dibujar con una forma diferente cada vez que coloque valores extremadamente cercanos o iguales para setInterval y para la duration .
Como solución alternativa, intente agregar un intervalo de suma ligeramente más alto a los puntos lo suficiente como para pasar desapercibida la diferencia. Es decir: 100 MS más o 5100