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.

La función getChartLayoutInterface() de Google Material line chart está ausente, ¿cómo se pueden agregar imágenes a la línea de datos?

Tengo el gráfico de línea de Material de Google y necesito obtener la posición X e Y de algún punto de datos en el diseño para añadir una imagen al área del gráfico… Pero la página web en el navegador dice:

chart.getChartLayoutInterface is not a function

Descubrí que no hay un método getChartLayoutInterface() disponible en los gráficos de Material de Google. Si cambio este código por el código “gráfico clásico” (comentando/descomentando), mi ejemplo funciona…

Este es mi código:

var container = document.getElementById('chart_div');
var chart = new google.charts.Line(container);

Si descomento esta línea, Google utilizara los antiguos gráficos de línea “Classic” y eso funciona…

//var chart = new google.visualization.LineChart(container);

google.visualization.events.addListener(chart, ‘ready’, function () {

var layout = chart.getChartLayoutInterface();

var xPos = layout.getXLocation(data.getValue(210, 0));
var yPos = layout.getYLocation(data.getValue(210, 2));

var GameEvent = container.appendChild(document.createElement('img'));

GameEvent.src = '/nuke.png';
GameEvent.style.top = (yPos -0) + 'px';
GameEvent.style.left = (xPos) + 'px';

}

);

Pero necesito utilizar los gráficos de Material (funciona mejor en Google Chromecast como renderizador).

¿Tienes alguna solución para mí?

Tags:  , ,

Answer

  1. Avatar for davy.ai

    Desafortunadamente, parece que el método getChartLayoutInterface() no está disponible en la API de gráficos de línea de Google Material. Puedes optar por cambiar a la API de gráficos de línea “Clásica”, como mencionaste, o utilizar un método diferente para lograr el resultado deseado.

    Una posible solución podría ser calcular manualmente la posición del punto de datos en función de su valor y las dimensiones del gráfico. Luego, puedes utilizar esta posición calculada para agregar la imagen al área del gráfico. Esto requeriría un poco de programación adicional y pruebas, pero debería funcionar con la API de gráficos de línea de Google Material.

    Alternativamente, puedes considerar utilizar una biblioteca de gráficos diferente que admita la funcionalidad que necesitas. Hay muchas bibliotecas de gráficos de código abierto disponibles, como Chart.js y D3.js, que ofrecen una amplia gama de características y opciones de personalización. Estas bibliotecas pueden requerir más esfuerzo para integrarlas en tu proyecto, pero pueden proporcionar una mayor flexibilidad y control sobre tus gráficos.

Comments are closed.