• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Pruebas Online
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

297
Vistas
ChartJs: cómo desplazarse mediante programación por valores de tiempo (en lugar de píxeles)

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.

almost 3 years ago · Juan Pablo Isaza
2 Respuestas
Responde la pregunta

0

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;
almost 3 years ago · Juan Pablo Isaza Denunciar

0

¡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')

almost 3 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda