0

我最近将 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();
}

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

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

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

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

this._chart.options.plugins = null;

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

4

1 回答 1

0

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

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

于 2021-07-02T12:08:44.340 回答