Highchart未加載

Question

我正在嘗試將highcharts加入我的網站。但我得到這個奇怪的錯誤TypeError: $(...).highcharts is not a function 這裏是我的代碼

@scripts = {<script src="@routes.Assets.at("javascripts/tracknplan.js")" type="text/javascript"></script> <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script><script type="text/javascript"> var user = '';</script><script src="https://code.highcharts.com/highcharts.js"></script><script src="https://code.highcharts.com/modules/exporting.js"></script>} 


<article class="app-content container-fluid" ng-app="tracknplanApp"> 


<section ng-controller="tracknplanctrl" ng-init="measurementPageInit()"> 
    <div class="row"> 
     <ol class="breadcrumb col-md-6"> 
      <li><a href="#" class="orange">Home</a></li> 
      <li><a href="#" class="orange">Track and Plan</a></li> 
      <li class="active">Measurement</li> 
     </ol> 
     <!-- <div class="col-md-6" id="calender-container"> 
      <div class="input-daterange input-group" id="datepicker2"> 
      <input class="form-control" size="16" type="text" ng-model="activityDate" ng-change="activityDateChanged()" value="" > 
      <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span> 
      </div> 
     </div> --> 
    </div> 
    <div class="row tracknplan track_n_plan noborder">  
    <!-- <div class="wrapper"> --> 

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


    </div> 
    </section> 
    <!--End of Track and plan--> 
</article> 

而對於highchart初始化函數是：

$scope.measurementPageInit = function(){ 

    console.log("measurement template loading"); 
    /*$scope.val1 =10; 
    angular.element("#templt").load("/partials/temp1");*/ 
    //angular.element("#graph,#collapse-graph #graph").html('<div id="chart1" style="margin-top:20px; margin-left:20px;"></div>'); 
    var data =[[1444780800,6],[1444867200,7],[1444953600,8]]; 
    $('#container').highcharts({ 
     chart: { 
      zoomType: 'x' 
     }, 
     title: { 
      text: 'USD to EUR exchange rate over time' 
     }, 
     subtitle: { 
      text: document.ontouchstart === undefined ? 
        'Click and drag in the plot area to zoom in' : 'Pinch the chart to zoom in' 
     }, 
     xAxis: { 
      type: 'datetime' 
     }, 
     yAxis: { 
      title: { 
       text: 'Exchange rate' 
      } 
     }, 
     legend: { 
      enabled: false 
     }, 
     plotOptions: { 
      area: { 
       fillColor: { 
        linearGradient: { 
         x1: 0, 
         y1: 0, 
         x2: 0, 
         y2: 1 
        } 
       }, 
       marker: { 
        radius: 2 
       }, 
       lineWidth: 1, 
       states: { 
        hover: { 
         lineWidth: 1 
        } 
       }, 
       threshold: null 
      } 
     }, 

     series: [{ 
      type: 'area', 
      name: 'USD to EUR', 
      data: data 
     }] 
    }); 


}; 

我一派錯誤，它顯示了，我應該添加的jQuery在我已經做過的highcharts之前的cdn可以找到這個代碼的其他錯誤嗎？

Answer 1

你錯過了jQuery，包裹裏面以下

$(function(){ // put highcharts code here }); 

看來你正在使用angularJS，如果你是在$ scope.someFunction調用此代碼，定義如下圖所示

var myChart = new Highcharts.Chart({ //put your code of chart config 
        });