ASP.NET MVC5ビューでハイチャート図を表示

Question

ハイチャートを使用してMVCビューに単純なグラフを表示しようとしていますが、何とかjavascriptが実行されていません。次のコンテナにチャートを追加したいと思います。

<div id="container" style="min-width:310px; height:400px; margin:0 auto"></div> 

私は別のjavascriptファイルを私のビューに追加しています。 lineChart.jsため

<script src="~/Scripts/lineChart.js"></script> 

コード：

$('document').ready(function() { 
$('#container').highcharts({ 
    title: { 
     text: 'Monthly Average Temperature', 
     x: -20 //center 
    }, 
    subtitle: { 
     text: 'Source: WorldClimate.com', 
     x: -20 
    }, 
    xAxis: { 
     categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 
      'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 
    }, 
    yAxis: { 
     title: { 
      text: 'Temperature (°C)' 
     }, 
     plotLines: [{ 
      value: 0, 
      width: 1, 
      color: '#808080' 
     }] 
    }, 
    tooltip: { 
     valueSuffix: '°C' 
    }, 
    legend: { 
     layout: 'vertical', 
     align: 'right', 
     verticalAlign: 'middle', 
     borderWidth: 0 
    }, 
    series: [{ 
     name: 'Tokyo', 
     data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6] 
    }, { 
     name: 'New York', 
     data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5] 
    }, { 
     name: 'Berlin', 
     data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0] 
    }, { 
     name: 'London', 
     data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8] 
    }] 
}); 

}）。

私はすべてのJavaScriptとhighchartの参照を追加したが、私は自分のアプリケーションを実行すると、それは何も

<script src="~/Scripts/highcharts.js"></script> 
<script src="~/Scripts/highcharts.src.js"></script> 
<script src="~/Scripts/jquery-1.10.2.min.js"></script> 
<script src="~/Scripts/jquery-1.10.2.js"></script> 

問題がどこにあるか私にはわからないが表示されません。助けていただければ幸いです。

ありがとうございました

Answer 1

この条件を満たす場合、コードは正常に動作します。あなたは＃2をやっていないと推測します。

1. レイアウトファイルでは、ページレベルスクリプトのセクションを定義しています。何かのように@RenderSection("scripts", required: false)

2. 特定のページ/ビューでは、scriptsセクション内のチャートを初期化するページレベルのスクリプトを呼び出しています。

   <div id="container" style="min-width:310px; height:400px; margin:0 auto"></div> 
   
   @section scripts 
   { 
       <script src="~/Scripts/highcharts.js"></script> 
       <script src="~/Scripts/lineChart.js"></script> 
   } 
   

3. あなたのページにはJavaScriptエラーがありません。ブラウズコンソールでスクリプトのエラーを確認してください。 Hereは、コード&のコードを使用した作業サンプルです。あなたの見解のためにかみそりが作り出したマークアップをもう一度比較してください。