Tenemos un gráfico alto donde hemos implementado un selector de rango, con botones como 1d, 7d, 1m, 6m, 1y, YTD y ALL.
En nuestro caso, tenemos datos desde el 1 de enero de 2020 hasta el 30 de mayo de 2022 (futuro). Por lo tanto, cuando hacemos clic en el botón YTD, el gráfico se muestra desde el 1 de enero de 2022 hasta el 30 de mayo de 2022. Idealmente, en el caso de YTD deberíamos tener datos en el gráfico que van desde el 1 de enero de 2022 hasta el 28 de abril de 2022 (hoy ). Pude solucionar este problema usando el siguiente código:
fHighchartsOptions.xAxis.events = { setExtremes: function(e) { if (e.trigger == "rangeSelectorButton") { if (e.rangeSelectorButton.text == "YTD") { var c = this; setTimeout(function() { var ytdExtremes = c.chart.rangeSelector.getYTDExtremes(new Date().getTime(), new Date(new Date().getFullYear(), 0, 1).getTime(), Highcharts.useUTC); c.chart.xAxis[0].setExtremes(ytdExtremes.min, ytdExtremes.max); }, 1); } } } }; El problema ocurre después de esto cuando hago clic en otros botones, digamos 6m , el gráfico ahora muestra datos desde el 28 de octubre de 2021 hasta el 28 de abril de 2021 (datos de 6 meses). Mientras que cuando hago clic en el botón ALL y luego hago clic en 6m ahora, el gráfico muestra datos del 30 de noviembre de 2021 al 30 de mayo de 2022 (datos de 6 meses)
Aquí, como puede ver, hay una discrepancia en los dos resultados. Mi pregunta aquí es, ¿qué puedo cambiar en el código para que después de llamar a setExtremes al hacer clic en el botón YTD , qué campos en el gráfico tengo que restablecer para que después de hacer clic en 6m obtenga el resultado en el gráfico que va desde el 30 de noviembre, 2021 al 30 de mayo de 2022.