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

Question

我最近将 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(object associated with chart.js)。当我切换回图表页面然后再次切换到另一个内存消耗时，LineController 的计数也会增加。

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

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

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

this._chart.options.plugins = null;

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

Answer 1

据我所知，问题出在 chartjs-plugin-zoom 1.0.1。一些事件侦听器未正确取消订阅，导致观察到内存泄漏。此问题已在 Fix removing event listeners.

得到解决

chartjs-plugin-zoom 1.1.0 中包含此修复程序。在用这个版本重复相同的场景后，我没有再观察到这个问题。

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

Chart.js v3 after using of zoom plugin instance persist in memory

javascript

memory-leaks

chart.js

chartjs-plugin-zoom