Estoy usando chartJs 3.6.1; y chartjs-plugin-zoom 1.2.1 (pero creo que en realidad no importa :)) Tengo 2 gráficos de líneas de series temporales, y cuando hago un paneo de un gráfico mediante arrastrar y soltar, ¡también quiero mover/panear el otro gráfico!
Para eso habilité zoom/pan para graphA - graphA.zoom.pan.enabled=true , y tiene la función onPanComplete que cuando quiero ejecutar la panorámica para graphB. No tenga problemas con el zoom: tiene la función graphA.getZoomLevel() ; para poder usar graphB.zoom(graphA.getZoomLevel()) . * Pero, ¿cuál es el caso de la panorámica? Editar: *No, no es bueno. Usa una escala diferente, algún tipo de exponencial... como... 1.0 significa 1.0, pero 1.5x significa zoom de ~1.7x, 1.98x significa zoom de 50x y 2x significa infinito (que es un zoom de 80.000x)
Hasta ahora, puedo obtener el área visible: chart.scales.xAxes.min (... y max), ¡pero devuelve valores de tiempo que son visibles actualmente! La función pan() esperando píxeles: graphB.pan(100, undefined, undefined) , y también es solo un desplazamiento desde la posición actual, no un conjunto de posición absoluta. ¿Puedo decir de alguna manera "mueve el gráfico a la izquierda 1 minuto"? Vi algún tipo de configuración de "escala", pero no entiendo cómo funciona... ¡O lo mejor podría ser decir: "mueve el gráfico para comenzar con 2022.03.01 12:00:00"! O... para una solución alternativa, puedo calcular los píxeles, pero para eso necesito saber el ancho de los datos del gráfico, pero es un gran "lienzo" y no puedo obtenerlo.
Puede usar el método getPixelForValue en los ejes x. Haces esto durante 2 puntos de tiempo a partir de los cuales sabes qué tan lejos están uno del otro. Luego, puede calcular cuántos píxeles necesitará para cambiar el gráfico durante el período de tiempo que desee.
Editar:
Si solo desea el ancho de chartArea, puede hacerlo así:
const chart = new Chart(ctx, config); const chartAreaWidth = chart.chartArea.width;¡Encontré la solución después de todo! Sí :))
¡Puede hacer zoom agregando el valor mínimo y máximo! ¡No hay necesidad de píxeles en absoluto! ¡Utilice el método zoomScale ! zoomScale(graphB, 'xAxes', {min: graphA.scales.xAxes.min, max: graphA.scales.xAxes.max}, 'none'); (La escala es 'xAxes' para mí, no sé por qué los ejemplos en las páginas oficiales dicen una simple 'x')