加载JS文件中的另一个脚本时出错

时间:2017-07-25 05:11:41

标签: javascript jquery html5 widget

我正在尝试在我的小部件中创建图表。我为此目的使用AM图表。 我有一个脚本文件(.js),我无法加载AM图表。脚本正在加载,但我收到错误" AmCharts未定义"。

我的小工具代码:

(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>

1 个答案:

答案 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();

        });
    }

})();