Highcharts: UnEught TypeError: $ (…) .highcharts no es una function

Obteniendo este error mientras ejecuto un HighCharts en mi aplicación 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 

Por favor, sugiere que hacer

 <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 

Yo estaba teniendo este problema, también. Asegúrese de que jQuery se importe antes que highchart.js. Eso solucionó el problema para mí.

 <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> 

Qué pasa si reemplazas

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

por

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

?

Tuve el mismo problema que hace un time y lo resolví utilizando este tipo de initialization.

Estaba usando una versión anterior de la versión de charts altos. Desde su website asumí que la versión que figura en la versión específica era su última versión y la usé para que no se actualizara automáticamente. Sin embargo, la versión que habían enumerado era muy antigua, por lo que cambiarla a la última versión solucionó el problema.

El enfoque tomado de los ejemplos oficiales está funcionando bien. Definieron la label include script dentro de la label body, por lo tanto creo que la solución dada por Kabulan0lak es mejor.

 <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>