javascript - 无法调用外部 Javascript 方法

Question

我正在使用 MVC 5 Web 应用程序中的外部 Javascript 文件将图表渲染到 View 。该图表使用的模型只能在服务器端访问，因此我使用内联 js 将模型编码为 JSON，如下所示，然后调用传入 JSON 字符串的外部函数。

<script type="text/javascript">

$(document).ready(function () {

    var JSONdata = @Html.Raw(Json.Encode(Model.PastModels));
    var count = @Html.Raw(Json.Encode(Model.PastModels.Count));
    createChart(JSONdata, count);

});

该函数在外部文件中定义。

function createChart(JSONdata, count) {
    var dates = [];
    var scores = [];
    var name = ""


    for (i = 0; i < count; i++) {
        dates[i] = JSONdata[i].TheDate;
        scores[i] = JSONdata[i].TotalScoreT;
    }
    var chart = 'totalChart';
    name = " Total Score";
    renderChart(chart, name);


    $('.nav-tabs a').click(function (e) {
        e.preventDefault();
        var tab = this.id;

        switch (tab) {
            case 'socialTab':
                for (i = 0; i < count; i++) {
                    dates[i] = JSONdata[i].TheDate;
                    scores[i] = JSONdata[i].SocialPhobiaT;
                }
                chart = socialChart;
                name = ' Social Phobia';
                break;

            case 'panicTab':
                for (i = 0; i < count; i++) {
                    dates[i] = JSONdata[i].TheDate;
                    scores[i] = JSONdata[i].PanicDisorderT;
                }
                chart = panicChart;
                name = ' Panic Disorder';
                break;

            case 'depressionTab':
                for (i = 0; i < count; i++) {
                    dates[i] = JSONdata[i].TheDate;
                    scores[i] = JSONdata[i].MajorDepressionT;
                }
                chart = depressionChart;
                name = ' Major Depression';
                break;

            case 'separationTab':
                for (i = 0; i < count; i++) {
                    dates[i] = JSONdata[i].TheDate;
                    scores[i] = JSONdata[i].SeparationAniextyT;
                }
                chart = separationChart;
                name = ' Separation Anxiety';
                break;

            case 'obsessiveTab':
                for (i = 0; i < count; i++) {
                    dates[i] = JSONdata[i].TheDate;
                    scores[i] = JSONdata[i].ObsessiveCompulsiveT;
                }
                chart = obsessiveChart;
                name = ' Obsessive Compulsive Disorder';
                break;

            case 'generalTab':
                for (i = 0; i < count; i++) {
                    dates[i] = JSONdata[i].TheDate;
                    scores[i] = JSONdata[i].GeneralizedAnxietyT;
                }
                chart = generalChart;
                name = ' Generalized Anxiety';
                break;

            case 'totalTab':
                for (i = 0; i < count; i++) {
                    dates[i] = JSONdata[i].TheDate;
                    scores[i] = JSONdata[i].TotalScoreT;
                }
                chart = totalChart;
                name = ' Total Score';
                break;
        }

        renderChart(chart, name);
    });
}

我使用一个部分包含外部文件。

@section HeadValues{ 
    <script src="https://code.highcharts.com/highcharts.js" type="text/javascript"></script>
    <script src="https://code.highcharts.com/modules/exporting.js" type="text/javascript"></script>
    <script src="~/scripts/RCADSResultPage.js" type="text/javascript"></script> 

 }

但是，每当加载页面时，我都会收到错误“function createChart is undefined”。

如有任何建议，我们将不胜感激。

谢谢。

Answer 1

出现上述问题是由于外部脚本未成功加载或在 $(document).ready 函数调用之前调用。确保在页面上调用 createChart 函数之前加载脚本部分。

@section HeadValues{ 
    <script src="https://code.highcharts.com/highcharts.js" type="text/javascript"></script>
    <script src="https://code.highcharts.com/modules/exporting.js" type="text/javascript"></script>
    <script src="~/scripts/RCADSResultPage.js" type="text/javascript"></script> 

 }

希望对你有帮助。

快乐编码

谢谢