Estoy configurando un gráfico de velas a partir de este ejemplo:
https://www.amcharts.com/demos/candlestick-chart/
Lo que estoy tratando de hacer es ampliar previamente el gráfico al último 10% de los datos disponibles. En la documentación ( https://www.amcharts.com/docs/v5/charts/xy-chart/zoom-and-pan/ ) dice usar el parámetro de inicio:
var xAxis = chart.xAxes.push( am5xy.DateAxis.new(root, { start: 0.9, renderer: am5xy.AxisRendererX.new(root, {}) }) );En la nota debajo de este código dice que si se usa una barra de desplazamiento, agregue el mismo desplazamiento de inicio que en el eje de fecha del gráfico.
Entonces, dentro del código de muestra configuré:
var xAxis = chart.xAxes.push( am5xy.DateAxis.new(root, { start: 0.95, groupData: true, maxDeviation:0.5, baseInterval: { timeUnit: "day", count: 1 }, renderer: am5xy.AxisRendererX.new(root, {pan:"zoom"}), tooltip: am5.Tooltip.new(root, {}) }) );y para la barra de desplazamiento:
var sbxAxis = scrollbar.chart.xAxes.push( am5xy.DateAxis.new(root, { start: 0.95, groupData: true, groupIntervals: [{ timeUnit: "week", count: 1 }], baseInterval: { timeUnit: "day", count: 1 }, renderer: am5xy.AxisRendererX.new(root, { opposite: false, strokeOpacity: 0 }) }) );Intenté todo. Probé desde https://www.amcharts.com/docs/v5/charts/xy-chart/axes/category-date-axis/
xAxis.zoomToDates(new Date(2021, 0, 1), new Date(2022, 0, 1));y
series.events.once("datavalidated", function(ev) { ev.target.get("xAxis").zoomToDates(new Date(2021, 0, 1), new Date(2022, 0, 1)); });Intenté agregar "fin: 1" a ambos elementos. Sin suerte.
Por favor aconséjame. Muchas gracias por adelantado.
Da la casualidad de que la segunda opción era correcta y funciona bien. La confusión fue con las fechas. Todos los datos de fechas para el gráfico están en la marca de tiempo que causó la confusión. En caso de publicar aquí un resultado final: hacer zoom en los últimos 130 registros de los datos y agregar un margen adicional a la derecha para un poco de "aire":
series.events.once("datavalidated", function(ev) { //pre-zooming to last date var startDate = chartData[0].date; if(chartData.length >= 130){ startDate = chartData[chartData.length - 130].date; } ev.target.get("xAxis").zoomToDates(new Date(startDate), new Date(chartData[chartData.length - 1].date + 600000)); });Aquí tomamos el primer elemento como la fecha de inicio y si hay más de 130 registros, tomamos solo esos 130. En la línea final agrego 600000 a la última fecha (tengo un gráfico de minutos, así que agrego 10 minutos: 60 segundos * 10 minutos * 1000 microsegundos).
Espero que esto ayude a alguien algún día.