2015-08-14 22 views
24

Nhận lỗi này khi đang chạy một HighCharts trong Ứng dụng JSP của tôi.

Uncaught TypeError: $(...).highcharts is not a function(anonymous function) @ VendorReports:125n.Callbacks.j @ jquery-1.11.0.js:893n.Callbacks.k.fireWith @ jquery-1.11.0.js:928n.extend.ready @ jquery-1.11.0.js:982K @ jquery-1.11.0.js:989 

Xin đề nghị phải làm gì

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<script src="http://code.highcharts.com/highcharts.js"></script> 
<script src="http://code.highcharts.com/modules/exporting.js"></script> 
$(function() { 
    $('#container').highcharts({ 
     colors: ["#7cb5ec", "#f7a35c"], 
     chart: { 
      type: 'column' 
     }, 
     title: { 
      text: 'Total fruit consumtion, grouped by gender' 
     }, 
     xAxis: { 
      categories: ['Apples' ] 
     }, 
     yAxis: { 
      allowDecimals: false, 
      min: 0, 
      title: { 
       text: 'Number of fruits' 
      } 
      //Nothing wrong with this code 
+0

bạn có thể thêm jsfiddle không? – Farhan

+0

Không thể sao chép, nó hoạt động bơi -> ** http: //jsfiddle.net/nate439j/** – adeneo

+0

@Farhan, http://jsfiddle.net/mxex28e2/. Nó làm việc ở đó, Nhưng khi đặt cùng trong JSP của tôi, nhận được lỗi này –

Trả lời

33

Tôi cũng gặp sự cố này. Đảm bảo jQuery được nhập trước highchart.js. Điều đó đã khắc phục vấn đề cho tôi.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<script src="http://code.highcharts.com/highcharts.js"></script> 
+2

Tương tự ở đây, tôi chỉ nhận ra rằng highcharts là một thư viện phụ thuộc vào jQuery và vì vậy jQuery phải đi trên đầu trang của highcharts. Chỉ cần thực hiện thay đổi này và bất kỳ ai cũng nên làm tốt. Vì vậy, ngây thơ nhầm lẫn - làm thế nào tôi có thể làm điều đó.! :) – Dharmavir

32

gì sẽ xảy ra nếu bạn thay thế

$('#container').highcharts({ 
     colors: ["#7cb5ec", "#f7a35c"], 
     chart: { 
      type: 'column' 
     }, 
     /* ... */ 

bởi

var chart = new Highcharts.Chart({ 
       colors: ["#7cb5ec", "#f7a35c"], 
       chart: { 
        type: 'column', 
        renderTo: 'container' 
       }, 
       /* ... */ 

?

Tôi đã gặp vấn đề tương tự như bạn trước đây và tôi đã giải quyết vấn đề này bằng cách sử dụng loại khởi tạo này.

+0

Nhưng làm thế nào để gọi biểu đồ để đính kèm vào container? –

+0

Nhìn vào dòng 'renderTo: 'container''.Đó là nơi xác định phần tử html nào bạn đính kèm biểu đồ: http://api.highcharts.com/highcharts#chart.renderTo – Kabulan0lak

+0

Có vẻ như nó hoạt động nhưng đồ thị không được hiển thị :(.. Không có lỗi –

0

Cách tiếp cận được lấy từ các ví dụ chính thức đang hoạt động tốt. Họ xác định bao gồm các thẻ script trong thẻ cơ thể do đó giải pháp được đưa ra bởi Kabulan0lak là tốt hơn tôi nghĩ.

<html> 
<head> 
    <title>Highcharts Example</title> 

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
    <script type="text/javascript"> 
     $(function() { 
      $('#container').highcharts({ 
       chart: { 
        type: 'spline' 
       } 
       // ... other options and data/series 
      }); 
     }); 
    </script> 
</head> 

<body> 
<script src="https://code.highcharts.com/highcharts.js"></script> 
<script src="https://code.highcharts.com/modules/exporting.js"></script> 
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> 
</body> 
</html> 
1

Tôi đang sử dụng phiên bản cũ của phiên bản biểu đồ cao. Từ trang web của họ, tôi giả định rằng phiên bản được liệt kê trong Phiên bản cụ thể là phiên bản mới nhất của họ và được sử dụng để nó không tự động cập nhật cho tôi. Tuy nhiên phiên bản mà họ đã liệt kê là siêu cũ nên việc thay đổi nó thành phiên bản mới nhất thực tế đã khắc phục được vấn đề.

0

Điều đó cũng xảy ra với tôi. Trong trường hợp của tôi, tôi cần nhấp vào một nút để tải biểu đồ và nếu tôi nhấp hai lần trở lên thì biểu đồ sẽ dừng hoạt động. Tôi đã đặt màu như sau:

Highcharts.setOptions({ 
     colors: Highcharts.map(Highcharts.getOptions().colors, function (color) { 
      return { 
       radialGradient: { 
        cx: 0.5, 
        cy: 0.3, 
        r: 0.7 
       }, 
       stops: [ 
        [0, color], 
        [1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken 
       ] 
      }; 
     }) 
    }); 

$.getJSON("./myDataGraph.php", function(response){ 
     // Create the chart 
     var chart = Highcharts.chart('myGraph', { 
      chart: { 
       plotBackgroundColor: null, 
       plotBorderWidth: null, 
       plotShadow: false, 
       type: 'pie' 
      }, 
... }); 

Tôi không thể giải quyết lỗi, nhưng tôi xóa "Highcharts.setOptions" và biểu đồ hoạt động!

Các vấn đề liên quan