外部Javascriptメソッドを呼び出すことができません

Question

MVC 5 Webアプリケーションから外部Javascriptファイルを使用して、チャートをビューにレンダリングしています。チャートはアクセス可能なサーバー側のモデルを使用しているので、モデルをJSONでインラインjsでエンコードし、次に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> 

} 

ご希望の場合はお手伝いします。これは、準備ができてあなたの文書が外部ファイルのロード前に実行されるチャンスがあるかもしれない