es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Echarts: cómo obtener los valores de x e y durante los eventos del ratón.

12 Jul, 2023 Programación

Tengo el siguiente gráfico:

const quotesChart = echarts.init(quotesContainer);
quotesChart.setOption({
  dataset: [
    { source: quotes }
  ],
  xAxis: [
    {
      type: 'category',
    },
  ],
  yAxis: [
    {
      position: 'left',
    }
  ],
  series: [
    {
      name: 'Quotes',
      type: 'line',
      datasetIndex: 0,
    }
  ]
})

quotesChart.getZr().on(“mousemove”, function(params){
const pointInPixel = [params.offsetX, params.offsetY];

// ¿Cómo puedo obtener los valores x e y de la posición actual del ratón?

// Veo algunos ejemplos que utilizan convertFromPixel, pero no sé cómo usar estas coordenadas para obtener los valores x e y
const pointInGrid = quotesChart.convertFromPixel(‘grid’, pointInPixel);
})

El origen de datos de quotes se ve así: [{period: '20/01/2021', value: 15.59}, {period: '21/01/2021', value: 15.99}]

Necesito obtener los valores de los ejes x e y (ej: 20/01/2021 y 15.59) pero no sé cómo, solo tengo las coordenadas de la cuadrícula.

Gracias.

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para obtener los valores de los ejes x e y basados en las coordenadas de la cuadrícula, puedes utilizar el método getValueAxis() del objeto quotesChart. Este método toma un argumento que especifica el índice del eje que deseas recuperar (en este caso, sería 0 para el eje x y 1 para el eje y).

    Una vez que tengas los objetos de los ejes de valores, puedes utilizar su método pointToData() para convertir las coordenadas de píxeles a los valores de datos correspondientes del eje.

    Aquí tienes un ejemplo de cómo podrías modificar el evento mousemove listener para obtener los valores de x e y para la posición actual del mouse:

    quotesChart.getZr().on("mousemove", function(params){
  const pointInPixel = [params.offsetX, params.offsetY];

  const xAxis = quotesChart.getModel().getComponent('xAxis', 0).axis;
  const yAxis = quotesChart.getModel().getComponent('yAxis', 0).axis;

  const pointInGrid = quotesChart.convertFromPixel('grid', pointInPixel);
  const xValue = xAxis.pointToData(pointInGrid)[0];
  const yValue = yAxis.pointToData(pointInGrid)[0];

  console.log(`x: ${xValue}, y: ${yValue}`);
});

    Este código obtiene los objetos de los ejes x e y utilizando el método getComponent() del objeto chart model. Luego convierte las coordenadas de la cuadrícula a valores de datos utilizando el método pointToData() de cada objeto de eje. Por último, muestra los valores de x e y en la consola con fines de depuración.

Comments are closed.