Highcharts: Uncaught TypeError: $(...). Highcharts не является функцией

Получение этой ошибки при запуске 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

Ответ 1

У меня тоже была эта проблема. Убедитесь, что 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

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

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

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

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

Ответ 3

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

Ответ 4

Подход, взятый из официальных примеров, хорошо работает. Они определили тег include script в теге 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>