销毁使用 Symfony 渲染的 ChartJS

Question

我的 Symfony/ChartJS 申请有点问题。

因此，如果我使用 var myChart = new Chart.. 等 JS 创建图表，我可以使用 myChart.destory(); 轻松销毁图表，因为我可以处理 ChartObject。

我的问题：我用我的 SymfonyController 渲染的第一个图表。所以我在我的控制器中渲染图表

return $this->render('category.html.twig', [
         'chart' => $chart]);

在 Twig 中，我为图表分配了一个 ID {{ render_chart(chart, {'id': 'my-chart'}) }}。但我真的不知道如何在 Js 中处理整个 Chartobject。那么我如何才能破坏我用 Symfonycontroller 创建的图表呢？有人有什么建议吗？

提前致谢！

//编辑 const chart = Chart.getChart('my-chart'); 的正常方法也不起作用。这是我的 Canvas-ConsoleLog 以获取更多信息：

<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>

奇怪的是：当我尝试日志时：console.log(document.getElementById("my-chart").getContext("2d");); 它显示：

  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]]: CanvasRenderingContext2D

所以日志显示图表被识别...

Answer 1

您可以使用 getChart api 方法 chart.js 暴露自身。

因此，当您知道 canvas 的 ID 时，您可以使用此 js 获取图表对象：

const chart = Chart.getChart('my-chart');

Answer 2

symfny-ux 控制器创建其 own instance of ChartJS inside an appropriate stimulus-controller, and this variable isn't directly accessible. But, symfony/ux developers are smart, and they created events (e.g. chartjs:connect) which you can listen to (link)

如果你这样做，你最终会得到一个 JS 原生 CustomEvent 对象，并且在这个事件的 details 属性中你会找到传递的 chart 实例之前在 symfiny-ux-controller 中为 chart.js 创建所以理论上你可以

document.addEventListener("chartjs:connect",(chartEv) => { 
console.log(chartEv.details); // chartEv.details.chart.destroy()
});

我确实建议您观看 Ryan's tutorial on Symfony UX，尤其是“扩展 UX 控制器”一章，其中他尝试使用先前创建的 new Chart() 实例，就像您的情况一样。

销毁使用 Symfony 渲染的 ChartJS

Destroy ChartJS rendered with Symfony

javascript

symfony

chart.js