Chart.js v3 使用缩放插件实例后保留在内存中答案

【问题标题】：Chart.js v3 after using of zoom plugin instance persist in memoryChart.js v3 使用缩放插件实例后保留在内存中
【发布时间】：2023-03-15 03:10:01
【问题描述】：

我最近将 Chart.js 从 v2.x 切换到 3.x。我还使用与 v3.x 版本兼容的 chartjs-plugin-zoom 1.0.1。我的情况是，我有带有一些选项卡的 SPA，在一个选项卡上是图表，它们之间是折线图，为此我使用缩放插件，因为数据通常很大。我的选项看起来像

this._options = {
            animation: false,
            responsive: true,
            tooltips: {
                mode: 'nearest',
                intersect: false
            },
            maintainAspectRatio: false,
            legend:
            {
               display: false
            },
            scales: {
                x: 
                {  
                    title:
                    {
                        display: true,
                        text: `Message order`
                    },
                },
                y: 
                {  
                    title:
                    {
                        display: true,
                        text: `log10 of time difference`
                    },
                }
            },
            plugins: {
                legend: {
                    display: false
                },
                zoom: {
                    zoom: {
                      wheel: {
                        enabled: true,
                      },
                      drag: 
                      {
                          enabled: true,
                          borderWidth: 1
                      },
                      mode: 'x',
                    }
                },
                decimation: {
                    enabled: true
                }
            }
        };

当我从带有图表的页面转移到另一个页面时，这称为清理：

if (this._chart)
{
    this._chart.options.onClick = null;
    //desperate attempt to save situation
    this._chart.options.plugins = null;
    this._chart.clear();
    this._chart.destroy();
}

我希望 destroy 从记忆的角度做所有必要的事情。对于版本 2，它正在工作，但在这里我观察到奇怪的行为。当我从图表页面切换到另一个页面并检查内存时，我看到了对象之间的 LineController（与 chart.js 关联的对象）。当我切换回图表页面，然后再次切换到 LineController 的另一个内存消耗和计数时。

当我从选项中评论缩放插件时，我发现是这个

zoom: {
                    zoom: {
                      wheel: {
                        enabled: true,
                      },
                      drag: 
                      {
                          enabled: true,
                          borderWidth: 1
                      },
                      mode: 'x',
                    }
                }

一切都恢复正常，不再增加 LineControll 实例，在页面切换之间没有可见的内存消耗增加。但是这个插件对我来说是必需的，所以注释掉不是一个好的选择。我尝试将图表的插件手动设置为空：

this._chart.options.plugins = null;

但这并不能解决内存问题。有人遇到过这种情况吗？

【问题讨论】：

标签： javascript memory-leaks chart.js chartjs-plugin-zoom

【解决方案1】：

我发现问题出在 chartjs-plugin-zoom 1.0.1。一些未正确取消订阅的事件侦听器导致观察到内存泄漏。此问题已在 Fix removing event listeners 得到解决。

此修复包含在 chartjs-plugin-zoom 1.1.0 中。使用此版本重复相同的场景后，我不再观察到问题。

【讨论】：