2014-04-27 23 views
5

Próbuję użyć Highcharts w mojej aplikacji internetowej MVC. Załadowałem wszystkie warunki wstępne do działania Highchartów. Ale najwyraźniej "highchart" nadal nie jest rozpoznawany przez stronę. Sprawdzam renderowaną stronę za pomocą narzędzia programisty google i stwierdza, że ​​wszystkie pliki javascript JQuery i Highchart są poprawnie załadowane. Jakaś pomoc?Uncaught TypeError: undefined nie jest funkcją - Highcharts - MVC

To jest mój kod .cshtml: (! Co jest trochę dziwne)

@using System.Web.Optimization 

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



@section Scripts { 

@Scripts.Render("~/bundles/jqueryval") 
@Scripts.Render("~/Scripts/Highcharts-4.0.1/js/highcharts.js") 
@Scripts.Render("~/Scripts/Highcharts-4.0.1/js/modules/exporting.js") 


<script type="text/javascript"> 
    $(function() { 
     var chart; 
     debugger; 
     $(document).ready(function() { 
      debugger; 

      // Build the chart 
      $('#container').highcharts({ 
       chart: { 
        plotBackgroundColor: null, 
        plotBorderWidth: null, 
        plotShadow: false 
       }, 
       title: { 
        text: 'Browser market shares at a specific website, 2014' 
       }, 
       tooltip: { 
        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' 
       }, 
       plotOptions: { 
        pie: { 
         allowPointSelect: true, 
         cursor: 'pointer', 
         dataLabels: { 
          enabled: true, 
          format: '<b>{point.name}</b>: {point.percentage:.1f} %', 
          style: { 
           color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black' 
          } 
         } 
        } 
       }, 
       series: [{ 
        type: 'pie', 
        name: 'Browser share', 
        data: [ 
         ['Firefox', 45.0], 
         ['IE', 26.8], 
         { 
          name: 'Chrome', 
          y: 12.8, 
          sliced: true, 
          selected: true 
         }, 
         ['Safari', 8.5], 
         ['Opera', 6.2], 
         ['Others', 0.7] 
        ] 
       }] 
      }); 
     }); 
    }); 
</script> 
} 
+0

Użyłem ich, że zadziałało, zobacz mój poradnik, może pomóc: http: //developmentpassion.blogspot.com/2013/09/bar-charts-and- graphs-in-aspnet-mvc.html –

+0

@ EhsanSajjad Dzięki! Zadziałało. Ale to dziwne! W oryginalnych przykładach z witryny Highcarts, brzmi jak "$ (" # container "). Highcharts (....)", z którego korzystałem i działa na prostej stronie HTML, ale nie w mojej aplikacji MVC . Ten na twojej stronie działa dobrze! – Moji

+0

Tak, zdarza się, że również miałem do czynienia z problemami, ale ta metoda działała. –

Odpowiedz

7

Więc to załatwia sprawę:

Muszę zmienić ten wiersz:

$('#container').highcharts({ 
      chart: { 
       plotBackgroundColor: null, 
       plotBorderWidth: null, 
       plotShadow: false 
      }, 

Do tej linii:

chart = new Highcharts.Chart({ 
       chart: { 
        plotBackgroundColor: null, 
        plotBorderWidth: null, 
        plotShadow: false, 
        renderTo: 'container' 
       }, 

Oto link, który pomógł mi przejść: http://developmentpassion.blogspot.com/2013/09/bar-charts-and-graphs-in-aspnet-mvc.html

+0

, więc to działa czy nie? –

+0

@SebastianBochan To działa, ale nadal nie mogę oznaczyć własnej odpowiedzi jako poprawnej. Potrzeba jej 2 dni. – Moji

Powiązane problemy