Chart.js仅使用一次导入的插件？

Question

我的Angular 4+应用程序中Chart.js出现问题。从上一个问题开始，我了解了更多关于chart.js的信息，但是我努力寻找一种方法来限制使用https://www.npmjs.com/package/chartjs-plugin-piechart-outlabels之类的插件。当我导入它们并在项目中使用它们时，它们会将其设计和规则强加于我的所有图表上，这使它们绝对无用。有办法以某种方式限制他们访问我其他图表吗？

下面是我在测试应用程序中如何使用它的示例...

<div>
  <canvas #myChart> {{renderedChart}} </canvas>
</div>

<div>
  <canvas #myOtherChart> {{renderedChart2}} </canvas>
</div>

---

import { Component, ViewChild, ElementRef } from '@angular/core';
import { Chart } from 'chart.js';
import 'chartjs-plugin-piechart-outlabels';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  @ViewChild('myChart') myChart: ElementRef;
  @ViewChild('myOtherChart') myChart2: ElementRef;  

  renderedChart: any = {}
  renderedChart2: any = {}

  ngAfterViewInit(): void {
    //Called after ngAfterContentInit when the component's view has been initialized. Applies to components only.
    //Add 'implements AfterViewInit' to the class.

    this.renderedChart2 = new Chart(this.myChart2.nativeElement, {
      type: 'doughnut',
      data: {
          labels: [
              'ONE',
              'TWO',
              'THREE',
              'FOUR',
              'FIVE',
              'SIX',
              'SEVEN',
              'EIGHT',
              'NINE',
              'TEN'
          ],
          datasets: [{
              backgroundColor: [
                  '#FF3784',
                  '#36A2EB',
                  '#4BC0C0',
                  '#F77825',
                  '#9966FF',
                  '#00A8C6',
                  '#379F7A',
                  '#CC2738',
                  '#8B628A',
                  '#8FBE00'
              ],
              data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
          }]
      },
      options: {
          zoomOutPercentage: 60, // makes chart 40% smaller (50% by default, if the preoprty is undefined)
          plugins: {
              legend: false,
              outlabels: {
                  text: '%l %p',
                  color: 'white',
                  stretch: 45,
                  font: {
                      resizable: true,
                      minSize: 12,
                      maxSize: 18
                  }
              }
          }
      }


    })



    this.renderedChart = new Chart(this.myChart.nativeElement, {
      type: 'outlabeledPie',
      data: {
          labels: [
              'ONE',
              'TWO',
              'THREE',
              'FOUR',
              'FIVE',
              'SIX',
              'SEVEN',
              'EIGHT',
              'NINE',
              'TEN'
          ],
          datasets: [{
              backgroundColor: [
                  '#FF3784',
                  '#36A2EB',
                  '#4BC0C0',
                  '#F77825',
                  '#9966FF',
                  '#00A8C6',
                  '#379F7A',
                  '#CC2738',
                  '#8B628A',
                  '#8FBE00'
              ],
              data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
          }]
      },
      options: {
          zoomOutPercentage: 60, // makes chart 40% smaller (50% by default, if the preoprty is undefined)
          plugins: {
              legend: false,
              outlabels: {
                  text: '%l %p',
                  color: 'white',
                  stretch: 45,
                  font: {
                      resizable: true,
                      minSize: 12,
                      maxSize: 18
                  }
              }
          }
      }


    })

  }



}