我正在尝试在我的小部件中创建图表。我为此目的使用AM图表。 我有一个脚本文件（.js），我无法加载AM图表。脚本正在加载，但我收到错误＆＃34; AmCharts未定义＆＃34;。
我的小工具代码：
(function () {
// Localize jQuery variable
var jQuery;
/******** Load jQuery if not present *********/
if (window.jQuery === undefined || window.jQuery.fn.jquery !== '1.4.2') {
var script_tag = document.createElement('script');
script_tag.setAttribute("type", "text/javascript");
script_tag.setAttribute("src",
"http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js");
if (script_tag.readyState) {
script_tag.onreadystatechange = function () { // For old versions of IE
if (this.readyState == 'complete' || this.readyState == 'loaded') {
scriptLoadHandler();
}
};
} else {
script_tag.onload = scriptLoadHandler;
}
// Try to find the head, otherwise default to the documentElement
(document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);
}
else {
// The jQuery version on the window is the one we want to use
jQuery = window.jQuery;
main();
}
/******** Called once jQuery has loaded ******/
function scriptLoadHandler() {
jQuery = window.jQuery.noConflict(true);
main();
}
/******** Our main function ********/
function main() {
var LanguageVal = 1;
jQuery(document).ready(function ($) {
var css_link = $("<link>", {
rel: "stylesheet",
type: "text/css",
href: "Content/css/DailyPrices.css"
});
css_link.appendTo('head');
var css_link1 = $("<link>", {
rel: "stylesheet",
type: "text/css",
media:"all",
href: "https://www.amcharts.com/lib/3/plugins/export/export.css"
});
css_link1.appendTo('head');
var css_link2 = $("<script>", {
type: "text/javascript",
src: "https://www.amcharts.com/lib/3/amcharts.js",
});
css_link2.appendTo('head');
var css_link3 = $("<script>", {
type: "text/javascript",
src: "https://www.amcharts.com/lib/3/serial.js",
});
css_link3.appendTo('head');
var css_link4 = $("<script>", {
type: "text/javascript",
src: "https://www.amcharts.com/lib/3/plugins/export/export.min.js",
});
css_link4.appendTo('head');
var css_link5 = $("<script>", {
type: "text/javascript",
src: "https://www.amcharts.com/lib/3/themes/light.js",
});
css_link5.appendTo('head');
$.ajax({
url: "http://localhost:44360/api/TodayPrice/DailyPrice",
data: { Language: LanguageVal },
success: function (result) {
var list1 = result.data;
var list2 = result.HeaderLst;
var TodayDieselPrice = list1[0].TodayDieselPrice;
var TodayPetrolPrice = list1[0].TodayPetrolPrice;
var YesterdayDieselPrice = list1[0].YesterdayDieselPrice;
var YesterdayPetrolPrice = list1[0].YesterdayPetrolPrice;
var PetrolText = list1[0].PetrolText;
var DieselText = list1[0].DieselText;
var PetrolIconColor = list1[0].PetrolIconColor;
var DieselIconColor = list1[0].DieselIconColor;
var FirstHeader = list2[0].FirstHeader;
var SecondHeader = list2[0].SecondHeader;
var ThirdHeader = list2[0].ThirdHeader;
var FourthHeader = list2[0].FourthHeader;
var FifthHeader = list2[0].FifthHeader;
var LastHeader = list2[0].LastHeader;
$("#example-widget-container").append('<div class="WholeDiv row"><div class="col-md-12 firstrow"><div style="float:left;padding:8px">'+FirstHeader+'</div><div style="float:right"><img src="Content/images/Petrol-pump-icon.png"/></div></div>'+
'<div class="col-md-12 secondrow"><div class="col-md-3">'+SecondHeader+'</div><div class="col-md-4">'+ThirdHeader+'</div><div class="col-md-2"></div><div class="col-md-3">'+FourthHeader+'</div></div><div class="col-md-12 thirdrow"><div class="col-md-3">'+PetrolText+'</div><div class="col-md-4">'+YesterdayPetrolPrice+'</div><div class="col-md-2"><div class="PIconColor"></div></div><div class="col-md-3">'+TodayPetrolPrice+'</div></div>'+
'<div class="col-md-12 fourthrow"><div class="col-md-3">'+DieselText+'</div><div class="col-md-4">'+YesterdayDieselPrice+'</div><div class="col-md-2"><div class="DIconColor"></div></div><div class="col-md-3">'+TodayDieselPrice+'</div></div><div class="col-md-12 fifthrow"> <div style="float:left"><a>'+FifthHeader+'</a></div> <div style="float:right" class="sponsorDiv"><div class="sponsorTextDiv">Powered By ICICI</div></div></div></div>');
$("#example-widget-container").append('<div id="chartdiv"></div>');
if (PetrolIconColor == "Red") {
$('.PIconColor').addClass('arrow-up');
}
else
{
$('.PIconColor').addClass('arrow-down');
}
if (DieselIconColor == "Red") {
$('.DIconColor').addClass('arrow-up');
}
else {
$('.DIconColor').addClass('arrow-down');
}
},
error: function (xhr, ajaxOptions, thrownError) {
console.log(thrownError);
}
});
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "light",
"marginRight": 70,
"dataProvider": [{
"country": "USA",
"visits": 3025,
"color": "#FF0F00"
}, {
"country": "China",
"visits": 1882,
"color": "#FF6600"
}, {
"country": "Japan",
"visits": 1809,
"color": "#FF9E01"
}, {
"country": "Germany",
"visits": 1322,
"color": "#FCD202"
}, {
"country": "UK",
"visits": 1122,
"color": "#F8FF01"
}, {
"country": "France",
"visits": 1114,
"color": "#B0DE09"
}, {
"country": "India",
"visits": 984,
"color": "#04D215"
}, {
"country": "Spain",
"visits": 711,
"color": "#0D8ECF"
}, {
"country": "Netherlands",
"visits": 665,
"color": "#0D52D1"
}, {
"country": "Russia",
"visits": 580,
"color": "#2A0CD0"
}, {
"country": "South Korea",
"visits": 443,
"color": "#8A0CCF"
}, {
"country": "Canada",
"visits": 441,
"color": "#CD0D74"
}],
"valueAxes": [{
"axisAlpha": 0,
"position": "left",
"title": "Visitors from country"
}],
"startDuration": 1,
"graphs": [{
"balloonText": "<b>[[category]]: [[value]]</b>",
"fillColorsField": "color",
"fillAlphas": 0.9,
"lineAlpha": 0.2,
"type": "column",
"valueField": "visits"
}],
"chartCursor": {
"categoryBalloonEnabled": false,
"cursorAlpha": 0,
"zoomable": false
},
"categoryField": "country",
"categoryAxis": {
"gridPosition": "start",
"labelRotation": 45
},
"export": {
"enabled": true
}
});
});
}
})(); // We call our anonymous function immediately
HTML Code:
<div id="example-widget-container"></div>
答案 0 :(得分：0)
尝试以下命令至少AmCharts问题似乎已得到解决
function loadChart() {
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "light",
"marginRight": 70,
"dataProvider": [{
"country": "USA",
"visits": 3025,
"color": "#FF0F00"
}, {
"country": "China",
"visits": 1882,
"color": "#FF6600"
}, {
"country": "Japan",
"visits": 1809,
"color": "#FF9E01"
}, {
"country": "Germany",
"visits": 1322,
"color": "#FCD202"
}, {
"country": "UK",
"visits": 1122,
"color": "#F8FF01"
}, {
"country": "France",
"visits": 1114,
"color": "#B0DE09"
}, {
"country": "India",
"visits": 984,
"color": "#04D215"
}, {
"country": "Spain",
"visits": 711,
"color": "#0D8ECF"
}, {
"country": "Netherlands",
"visits": 665,
"color": "#0D52D1"
}, {
"country": "Russia",
"visits": 580,
"color": "#2A0CD0"
}, {
"country": "South Korea",
"visits": 443,
"color": "#8A0CCF"
}, {
"country": "Canada",
"visits": 441,
"color": "#CD0D74"
}],
"valueAxes": [{
"axisAlpha": 0,
"position": "left",
"title": "Visitors from country"
}],
"startDuration": 1,
"graphs": [{
"balloonText": "<b>[[category]]: [[value]]</b>",
"fillColorsField": "color",
"fillAlphas": 0.9,
"lineAlpha": 0.2,
"type": "column",
"valueField": "visits"
}],
"chartCursor": {
"categoryBalloonEnabled": false,
"cursorAlpha": 0,
"zoomable": false
},
"categoryField": "country",
"categoryAxis": {
"gridPosition": "start",
"labelRotation": 45
},
"export": {
"enabled": true
}
});
}
(function () {
// Localize jQuery variable
var jQuery;
/******** Load jQuery if not present *********/
if (window.jQuery === undefined || window.jQuery.fn.jquery !== '1.4.2') {
var script_tag = document.createElement('script');
script_tag.setAttribute("type", "text/javascript");
script_tag.setAttribute("src",
"https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js");
var css_link = $("<link>", {
rel: "stylesheet",
type: "text/css",
href: "Content/css/DailyPrices.css"
});
css_link.appendTo('head');
var css_link1 = $("<link>", {
rel: "stylesheet",
type: "text/css",
media:"all",
href: "https://www.amcharts.com/lib/3/plugins/export/export.css"
});
css_link1.appendTo('head');
var css_link2 = $("<script>", {
type: "text/javascript",
src: "https://www.amcharts.com/lib/3/amcharts.js",
});
css_link2.appendTo('head');
var css_link3 = $("<script>", {
type: "text/javascript",
src: "https://www.amcharts.com/lib/3/serial.js",
});
css_link3.appendTo('head');
if (script_tag.readyState) {
script_tag.onreadystatechange = function () { // For old versions of IE
if (this.readyState == 'complete' || this.readyState == 'loaded') {
scriptLoadHandler();
}
};
} else {
script_tag.onload = scriptLoadHandler;
}
// Try to find the head, otherwise default to the documentElement
(document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);
}
else {
// The jQuery version on the window is the one we want to use
jQuery = window.jQuery;
main();
}
/******** Called once jQuery has loaded ******/
function scriptLoadHandler() {
setTimeout(function(){
// wait for amchart to load
var css_link4 = $("<script>", {
type: "text/javascript",
src: "https://www.amcharts.com/lib/3/plugins/export/export.min.js",
});
css_link4.appendTo('head');
jQuery = window.jQuery.noConflict(true);
var css_link5 = $("<script>", {
type: "text/javascript",
src: "https://www.amcharts.com/lib/3/themes/light.js",
});
css_link5.appendTo('head');
main();
}, 1000);
}
/******** Our main function ********/
function main() {
var LanguageVal = 1;
jQuery(document).ready(function ($) {
$.ajax({
url: "http://localhost:44360/api/TodayPrice/DailyPrice",
data: { Language: LanguageVal },
success: function (result) {
var list1 = result.data;
var list2 = result.HeaderLst;
var TodayDieselPrice = list1[0].TodayDieselPrice;
var TodayPetrolPrice = list1[0].TodayPetrolPrice;
var YesterdayDieselPrice = list1[0].YesterdayDieselPrice;
var YesterdayPetrolPrice = list1[0].YesterdayPetrolPrice;
var PetrolText = list1[0].PetrolText;
var DieselText = list1[0].DieselText;
var PetrolIconColor = list1[0].PetrolIconColor;
var DieselIconColor = list1[0].DieselIconColor;
var FirstHeader = list2[0].FirstHeader;
var SecondHeader = list2[0].SecondHeader;
var ThirdHeader = list2[0].ThirdHeader;
var FourthHeader = list2[0].FourthHeader;
var FifthHeader = list2[0].FifthHeader;
var LastHeader = list2[0].LastHeader;
$("#example-widget-container").append('<div class="WholeDiv row"><div class="col-md-12 firstrow"><div style="float:left;padding:8px">'+FirstHeader+'</div><div style="float:right"><img src="Content/images/Petrol-pump-icon.png"/></div></div>'+
'<div class="col-md-12 secondrow"><div class="col-md-3">'+SecondHeader+'</div><div class="col-md-4">'+ThirdHeader+'</div><div class="col-md-2"></div><div class="col-md-3">'+FourthHeader+'</div></div><div class="col-md-12 thirdrow"><div class="col-md-3">'+PetrolText+'</div><div class="col-md-4">'+YesterdayPetrolPrice+'</div><div class="col-md-2"><div class="PIconColor"></div></div><div class="col-md-3">'+TodayPetrolPrice+'</div></div>'+
'<div class="col-md-12 fourthrow"><div class="col-md-3">'+DieselText+'</div><div class="col-md-4">'+YesterdayDieselPrice+'</div><div class="col-md-2"><div class="DIconColor"></div></div><div class="col-md-3">'+TodayDieselPrice+'</div></div><div class="col-md-12 fifthrow"> <div style="float:left"><a>'+FifthHeader+'</a></div> <div style="float:right" class="sponsorDiv"><div class="sponsorTextDiv">Powered By ICICI</div></div></div></div>');
$("#example-widget-container").append('<div id="chartdiv"></div>');
if (PetrolIconColor == "Red") {
$('.PIconColor').addClass('arrow-up');
}
else
{
$('.PIconColor').addClass('arrow-down');
}
if (DieselIconColor == "Red") {
$('.DIconColor').addClass('arrow-up');
}
else {
$('.DIconColor').addClass('arrow-down');
}
},
error: function (xhr, ajaxOptions, thrownError) {
console.log(thrownError);
}
});
loadChart();
});
}
})();