Tengo un pequeño problema con mi aplicación Symfony/ChartJS.
Entonces, si creo un gráfico con JS como var myChart = new Chart .. y así sucesivamente, puedo destruir fácilmente el gráfico con myChart.destory(); porque puedo abordar el ChartObject.
Mi problema: el primer gráfico que renderizo con mi SymfonyController. Así que renderizo el gráfico en mi controlador con
return $this->render('category.html.twig', [ 'chart' => $chart]); En Twig, asigno una ID al gráfico {{ render_chart(chart, {'id': 'my-chart'}) }} . Pero realmente no sé cómo puedo abordar todo el Chartobject en Js. Entonces, ¿cómo puedo destruir el gráfico que creé con mi controlador Symfony? ¿Alguien tiene una sugerencia?
¡Gracias de antemano!
//EDIT La forma normal con const chart = Chart.getChart('my-chart'); tampoco funcione Aquí está mi Canvas-ConsoleLog para obtener más información:
<canvas data-controller="symfony--ux-chartjs--chart" data-symfony--ux-chartjs--chart-view-value="(i deleted the values for better legibility)" id="my-chart" style="display: block; box-sizing: border-box; height: 407.778px; width: 816.667px;" width="735" height="367"></canvas> Lo extraño: cuando pruebo el registro: console.log(document.getElementById("my-chart").getContext("2d");); muestra:
CanvasRenderingContext2D {canvas: canvas#my-chart, globalAlpha: 1, globalCompositeOperation: 'source-over', filter: 'none', imageSmoothingEnabled: true, …} canvas: canvas#my-chart direction: "ltr" fillStyle: "#000000" filter: "none" font: "12px \"Helvetica Neue\", Helvetica, Arial, sans-serif" globalAlpha: 1 globalCompositeOperation: "source-over" imageSmoothingEnabled: true imageSmoothingQuality: "low" lineCap: "butt" lineDashOffset: 0 lineJoin: "miter" lineWidth: 1 miterLimit: 10 shadowBlur: 0 shadowColor: "rgba(0, 0, 0, 0)" shadowOffsetX: 0 shadowOffsetY: 0 strokeStyle: "#000000" textAlign: "start" textBaseline: "alphabetic" [[Prototype]]: CanvasRenderingContext2Dentonces el registro muestra que el gráfico es reconocido...
El controlador symfny-ux crea su propia instancia de ChartJS dentro de un controlador de estímulo adecuado y no se puede acceder directamente a esta variable. Pero, los desarrolladores de Symfony/ux son inteligentes y crearon eventos (p. ej chartjs:connect ) que puedes escuchar ( enlace )
Si lo hace, terminará con un objeto CustomEvent nativo de JS y en la propiedad de details de este evento encontrará una instancia chart pasada creada previamente en symfiny-ux-controller para chart.js Entonces, en teoría, solo podría
document.addEventListener("chartjs:connect",(chartEv) => { console.log(chartEv.details); // chartEv.details.chart.destroy() }); Te recomiendo que veas el tutorial de Ryan sobre Symfony UX , especialmente el capítulo "Extending a UX Controller" en el que trata de trabajar con una instancia creada previamente de new Chart() como en tu caso.