2015-08-14 3 views
24

Получение этой ошибки при запуске HighCharts в моем приложении JSP.

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 

Пожалуйста, предложите что делать

<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

не могли бы вы добавить jsfiddle? – Farhan

+0

Невозможно воспроизвести, он работает плавно -> ** http: //jsfiddle.net/nate439j/** – adeneo

+0

@Farhan, http://jsfiddle.net/mxex28e2/. Его работа там, но когда ставить то же самое в моем JSP, получив эту ошибку –

ответ

33

У меня тоже была эта проблема. Убедитесь, что jQuery импортирован до highchart.js. Это исправило проблему для меня.

<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

То же самое здесь, я только понял, что highcharts - это библиотека, которая зависит от jQuery, и поэтому jQuery должен идти поверх высоких графиков. Просто сделайте это изменение, и любой должен быть добрым. Так наивно ошибочно - как я могу это сделать! :) – Dharmavir

32

Что произойдет, если вы замените

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

по

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

?

У меня была такая же проблема, как и у вас, и я разрешил ее, используя этот тип инициализации.

+0

Но как вызвать таблицу для прикрепления к контейнеру? –

+0

Посмотрите на строку 'renderTo: 'container''.Здесь вы определяете, к какому элементу html вы присоединяете диаграмму: http://api.highcharts.com/highcharts#chart.renderTo – Kabulan0lak

+0

Он выглядит его работающим, но график не отображается :(.. Нет ошибки –

0

Подход, взятый из официальных примеров, хорошо работает. Они определили тег include include внутри тега body, поэтому решение, данное Kabulan0lak, лучше, я думаю.

<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

Я использовал старую версию версии с высокими чартами. На своем веб-сайте я предположил, что версия, указанная в Специфической версии, была последней версией и использовалась так, чтобы она не обновлялась автоматически. Однако версия, которую они указали, была очень старой, поэтому ее изменение до последней последней версии исправило проблему.

0

Это случается со мной тоже. В моем случае мне нужно нажать кнопку, чтобы загрузить диаграмму, и если я нажму дважды или больше, график перестанет работать. Я устанавливал цвет, как это:

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' 
      }, 
... }); 

я не мог решить эту ошибку, но я удалить «Highcharts.setOptions» и график работы !!!

Смежные вопросы