Error: ```Uncaught ReferenceError: am4core is not defined``` while creating Amcharts 4 chart
Error: ```Uncaught ReferenceError: am4core is not defined``` while creating Amcharts 4 chart
在使用 Amcharts4 库创建柱形图时,我收到以下错误消息:
Uncaught ReferenceError: am4core is not defined
我的代码如下:
JS
am4core.ready(function() {
// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end
// Create chart instance
var chart = am4core.create("chartdiv", am4charts.XYChart);
var chartData = [{
"category": 2009,
"income": 23.5,
"url": "#",
"description": "click to drill-down",
"months": [{
"category": 1,
"income": 1
}, {
"category": 2,
"income": 2
}, {
"category": 3,
"income": 1
}, {
"category": 4,
"income": 3
}]
}, {
"category": 2010,
"income": 26.2,
"url": "#",
"description": "click to drill-down",
"months": [{
"category": 1,
"income": 4
}, {
"category": 2,
"income": 3
}, {
"category": 3,
"income": 1
}, {
"category": 4,
"income": 4
}]
}, {
"category": 2011,
"income": 30.1,
"url": "#",
"description": "click to drill-down",
"months": [{
"category": 1,
"income": 2
}, {
"category": 2,
"income": 3
}, {
"category": 3,
"income": 1
}]
}];
chart.data = chartData;
// Create axes
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "category";
categoryAxis.renderer.grid.template.location = 0;
categoryAxis.renderer.minGridDistance = 30;
categoryAxis.numberFormatter.numberFormat = "#";
categoryAxis.renderer.labels.template.adapter.add("dy", function(dy, target) {
if (target.dataItem && target.dataItem.index & 2 == 2) {
return dy + 25;
}
return dy;
});
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
// Create series
var series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.valueY = "income";
series.dataFields.categoryX = "category";
series.name = "Income";
series.columns.template.tooltipText = "{categoryX}: [bold]{valueY}[/]";
series.columns.template.fillOpacity = .8;
series.columns.template.propertyFields.url = "url";
var columnTemplate = series.columns.template;
columnTemplate.strokeWidth = 2;
columnTemplate.strokeOpacity = 1;
var title = chart.titles.create();
title.text = "Yearly Data";
var resetLabel = chart.plotContainer.createChild(am4core.Label);
resetLabel.text = "[bold]<< Back to Yearly Data[/]";
resetLabel.x = 20;
resetLabel.y = 20;
resetLabel.cursorOverStyle = am4core.MouseCursorStyle.pointer;
resetLabel.hide();
resetLabel.events.on('hit', function(ev) {
resetLabel.hide();
ev.target.baseSprite.titles.getIndex(0).text = "Yearly Data";
ev.target.baseSprite.data = chartData;
});
series.columns.template.events.on("hit", function(ev) {
if ('object' === typeof ev.target.dataItem.dataContext.months) {
// update the chart title
ev.target.baseSprite.titles.getIndex(0).text = ev.target.dataItem.dataContext.category + ' monthly data';
// set the monthly data for the clicked month
ev.target.baseSprite.data = ev.target.dataItem.dataContext.months
resetLabel.show();
}
}, this);
});
HTML:
<body>
<div class="titel">
<p> Title</p>
</div>
<script src="https://www.cdn.amcharts.com/lib/4/core.js" type="text/javascript"></script>
<script src="https://www.cdn.amcharts.com/lib/4/index.js" type="text/javascript"></script>
<script src="https://www.cdn.amcharts.com/lib/4/themes/animated.js" type="text/javascript"></script>
<script type="text/javascript" src="./test_drill_down.js"></script>
<div id="chartdiv"> </div>
<link href="style.css" rel="stylesheet" type="text/css">
</div>
</body>
</html>
但我不明白为什么会出现此错误,模块是在 javascript 图表脚本之前加载的。我使用的 HTML 文件与我在其他图表中使用的相同,并且它确实可以正常工作。
我做错了什么?
您的网址错误 - 没有 www.cdn
。要么使用其中一个,但不能同时使用两者。
cdn
:
<script src="https://cdn.amcharts.com/lib/4/core.js" type="text/javascript"></script>
<script src="https://cdn.amcharts.com/lib/4/index.js" type="text/javascript"></script>
<script src="https://cdn.amcharts.com/lib/4/themes/animated.js" type="text/javascript"></script>
www
:
<script src="https://www.amcharts.com/lib/4/core.js" type="text/javascript"></script>
<script src="https://www.amcharts.com/lib/4/index.js" type="text/javascript"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js" type="text/javascript"></script>
在使用 Amcharts4 库创建柱形图时,我收到以下错误消息:
Uncaught ReferenceError: am4core is not defined
我的代码如下:
JS
am4core.ready(function() {
// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end
// Create chart instance
var chart = am4core.create("chartdiv", am4charts.XYChart);
var chartData = [{
"category": 2009,
"income": 23.5,
"url": "#",
"description": "click to drill-down",
"months": [{
"category": 1,
"income": 1
}, {
"category": 2,
"income": 2
}, {
"category": 3,
"income": 1
}, {
"category": 4,
"income": 3
}]
}, {
"category": 2010,
"income": 26.2,
"url": "#",
"description": "click to drill-down",
"months": [{
"category": 1,
"income": 4
}, {
"category": 2,
"income": 3
}, {
"category": 3,
"income": 1
}, {
"category": 4,
"income": 4
}]
}, {
"category": 2011,
"income": 30.1,
"url": "#",
"description": "click to drill-down",
"months": [{
"category": 1,
"income": 2
}, {
"category": 2,
"income": 3
}, {
"category": 3,
"income": 1
}]
}];
chart.data = chartData;
// Create axes
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "category";
categoryAxis.renderer.grid.template.location = 0;
categoryAxis.renderer.minGridDistance = 30;
categoryAxis.numberFormatter.numberFormat = "#";
categoryAxis.renderer.labels.template.adapter.add("dy", function(dy, target) {
if (target.dataItem && target.dataItem.index & 2 == 2) {
return dy + 25;
}
return dy;
});
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
// Create series
var series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.valueY = "income";
series.dataFields.categoryX = "category";
series.name = "Income";
series.columns.template.tooltipText = "{categoryX}: [bold]{valueY}[/]";
series.columns.template.fillOpacity = .8;
series.columns.template.propertyFields.url = "url";
var columnTemplate = series.columns.template;
columnTemplate.strokeWidth = 2;
columnTemplate.strokeOpacity = 1;
var title = chart.titles.create();
title.text = "Yearly Data";
var resetLabel = chart.plotContainer.createChild(am4core.Label);
resetLabel.text = "[bold]<< Back to Yearly Data[/]";
resetLabel.x = 20;
resetLabel.y = 20;
resetLabel.cursorOverStyle = am4core.MouseCursorStyle.pointer;
resetLabel.hide();
resetLabel.events.on('hit', function(ev) {
resetLabel.hide();
ev.target.baseSprite.titles.getIndex(0).text = "Yearly Data";
ev.target.baseSprite.data = chartData;
});
series.columns.template.events.on("hit", function(ev) {
if ('object' === typeof ev.target.dataItem.dataContext.months) {
// update the chart title
ev.target.baseSprite.titles.getIndex(0).text = ev.target.dataItem.dataContext.category + ' monthly data';
// set the monthly data for the clicked month
ev.target.baseSprite.data = ev.target.dataItem.dataContext.months
resetLabel.show();
}
}, this);
});
HTML:
<body>
<div class="titel">
<p> Title</p>
</div>
<script src="https://www.cdn.amcharts.com/lib/4/core.js" type="text/javascript"></script>
<script src="https://www.cdn.amcharts.com/lib/4/index.js" type="text/javascript"></script>
<script src="https://www.cdn.amcharts.com/lib/4/themes/animated.js" type="text/javascript"></script>
<script type="text/javascript" src="./test_drill_down.js"></script>
<div id="chartdiv"> </div>
<link href="style.css" rel="stylesheet" type="text/css">
</div>
</body>
</html>
但我不明白为什么会出现此错误,模块是在 javascript 图表脚本之前加载的。我使用的 HTML 文件与我在其他图表中使用的相同,并且它确实可以正常工作。
我做错了什么?
您的网址错误 - 没有 www.cdn
。要么使用其中一个,但不能同时使用两者。
cdn
:
<script src="https://cdn.amcharts.com/lib/4/core.js" type="text/javascript"></script>
<script src="https://cdn.amcharts.com/lib/4/index.js" type="text/javascript"></script>
<script src="https://cdn.amcharts.com/lib/4/themes/animated.js" type="text/javascript"></script>
www
:
<script src="https://www.amcharts.com/lib/4/core.js" type="text/javascript"></script>
<script src="https://www.amcharts.com/lib/4/index.js" type="text/javascript"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js" type="text/javascript"></script>