Javascript 为什么显示此错误;,未捕获引用错误:未定义c3“;
我在这个计算器中创建了一个计算器,我使用饼图动态显示数据,但图表抛出错误。下面给出了代码 custom.min.js在这个js文件中,我使用了c3图表Javascript 为什么显示此错误;,未捕获引用错误:未定义c3“;,javascript,angular,typescript,c3.js,Javascript,Angular,Typescript,C3.js,我在这个计算器中创建了一个计算器,我使用饼图动态显示数据,但图表抛出错误。下面给出了代码 custom.min.js在这个js文件中,我使用了c3图表 var chart = c3.generate({ data: { columns: [ ["Interest Payable", 3900519], ["Principal", 3e6] ], type: "pie" }, a
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\u renderers.min.js、d3.min.js、d3.v3.min.js、pivot.min.js。
我已经下载了这个插件并放进了资产文件夹,我被scriptloaderService调用这个js文件,这个scriptloaderService被导入到组件中
DynamicScriptLoaderService这是ScriptLoaderService代码
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>
浏览器显示的主要错误如下。“未捕获引用错误:未定义c3”
任何人都可以在这段代码中提供帮助???您可以检查脚本是否在执行c3.generate时加载吗?