为什么显示此错误，“，Uncaught ReferenceError：未定义c3”

Question

我在那个计算器中创建了一个计算器，我使用饼图动态显示数据，但是图表抛出错误。代码如下，

custom.min.js 在此js文件中，我使用过c3图表，

var chart = c3.generate({
    data: {
        columns: [
            ["Interest Payable", 3900519],
            ["Principal", 3e6]
        ],
        type: "pie"
    },
    axis: { x: { label: "Sepal.Width" }, y: { label: "Petal.Width" } },
    legend: { show: !1 },
    tooltip: { format: { title: function(t) { return "" }, value: function(t, e, n) { return t } }, contents: tooltip_contents }
});

我已经使用此插件来完成： c3.min.js，c3_renderers.min.js，d3.min.js，d3.v3.min.js，pivot。 min.js。

我已经下载了此插件并将其放置在资产文件夹中，并通过scriptloaderService将此js文件称为该js文件，并将该scriptloaderService导入了组件内部。

DynamicScriptLoaderServiceService ，这是scriptloaderServise代码。

import { Injectable } from '@angular/core';

interface Scripts {
  name: string;
  src: string;
}

export const ScriptStore: Scripts[] = [
  { name: 'd3.v3.min.js', src: './assets/Scripts/d3.v3.min.js' },
  { name: 'd3.min.js', src: './assets/Scripts/d3.min.js'},
  { name: 'c3.min.js', src: './assets/Scripts/c3.min.js' },
  { name: 'custom.min.js', src: './assets/Scripts/custom.min.js' },
];

declare var document: any;

@Injectable()
export class DynamicScriptLoaderServiceService {


  private scripts: any = {};

  constructor() {
    ScriptStore.forEach((script: any) => {
      this.scripts[script.name] = {
        loaded: false,
        src: script.src
      };
    });
  }

  load(...scripts: string[]) {
    const promises: any[] = [];
    scripts.forEach((script) => promises.push(this.loadScript(script)));
    return Promise.all(promises);
  }

  loadScript(name: string) {
    return new Promise((resolve, reject) => {
      if (!this.scripts[name].loaded) {
        //load script
        let script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = this.scripts[name].src;
        if (script.readyState) {  //IE
            script.onreadystatechange = () => {
                if (script.readyState === "loaded" || script.readyState === "complete") {
                    script.onreadystatechange = null;
                    this.scripts[name].loaded = true;
                    resolve({script: name, loaded: true, status: 'Loaded'});
                }
            };
        } else {  //Others
            script.onload = () => {
                this.scripts[name].loaded = true;
                resolve({script: name, loaded: true, status: 'Loaded'});
            };
        }
        script.onerror = (error: any) => resolve({script: name, loaded: false, status: 'Loaded'});
        document.getElementsByTagName('head')[0].appendChild(script);
      } else {
        resolve({ script: name, loaded: true, status: 'Already Loaded' });
      }
    });
  }
}

CalcyComponent ：这是调用服务和JS文件以显示饼图的组件。

import { Component, OnInit, AfterViewInit } from '@angular/core';
import { DynamicScriptLoaderServiceService } from '../../../ScriptLoaderService/dynamic-script-loader-service.service';

@Component({
  selector: 'app-calcy',
  templateUrl: './calcy.component.html',
  styleUrls: ['./calcy.component.css']
})
export class CalcyComponent implements OnInit, AfterViewInit {

  constructor(private dynamicScriptLoader:DynamicScriptLoaderServiceService) { }

  ngOnInit() {
    this.loadScripts();
  }

  ngAfterViewInit() { }

  loadScripts() {
    // You can load multiple scripts by just providing the key as argument into load method of the service
    this.dynamicScriptLoader.load(
    'd3.v3.min.js','d3.min.js','c3.min.js','custom.min.js',).then(data => {
      // Script Loaded Successfully
    }).catch(error => console.log(error));
  }
}

calcy.component.html 这是应该显示图表的模板，我已经给出了一些小代码。

<div class="abc">
    <div id="chart" class="chart" style="width: 320px; height: 285px;"></div>
    <div style="display: none;">
        <div title="" style="width: 454px;
                height: 319px;">
            <!-- <div id="Graph"></div> -->
        </div>
    </div>
</div>

  

浏览器显示的主要错误是这个。 “未捕获的ReferenceError：未定义c3”

任何人都可以在此代码中提供帮助吗？？