chart.js - 如何注销图表插件？

Question

使用 Chart.pluginService.register 我在图表上画了一条线以满足页面 B 上的一些要求(可以说)。我从页面 A 转到页面 B。

现在，当我返回到 A 页并再次转到 B 页时，图表上绘制的线条开始变暗。

当我返回页面 A 时如何取消注册该插件？

我在这个来源上看到了一个取消注册和清除功能:https://github.com/chartjs/Chart.js/blob/647dc582cd85fc8e25d49cf0e38d459c582b2652/src/core/core.plugin.js

注销功能无效。清除功能清除先前绘制的线，但图表的图例消失。

Answer 1

添加

ngOnDestroy() {
  Chart.pluginService.unregister(this.horizonalLinePlugin);
}

在您的 ProductDetailComponent应该做的伎俩。

https://stackblitz.com/edit/angular-uxfwqb?file=src/app/product-detail/product-detail.component.ts

这里的问题是，如果您同时有多个图表组件可见，则该插件将在所有其他图表中可见。

更好的修复:

只在 ngInit 之外注册插件一次...直接在模块文件中或全局某处。这将影响整个应用程序中的所有图表，但无需取消注册，因此很明显，它是影响所有图表的全局因素。

通过chart.js(或angular2-chartjs的拉取请求)创建您自己的包装组件/指令，可以接受plugins输入并将其传递给 Chart构造函数http://www.chartjs.org/docs/latest/developers/plugins.html :var chart1 = new Chart(ctx, { plugins: [plugin] });这将允许您拥有带插件的图表和不带插件的图表，因此无需注册/取消注册全局插件。