web-dev-qa-db-fra.com

Highcharts: Uncaught TypeError: $ (...). Highcharts n'est pas une fonction.

Obtention de cette erreur lors de l'exécution d'un HighCharts dans mon application 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

S'il vous plaît suggérer quoi faire

<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
javascriptjqueryjsphighcharts
29
Anil Kumar

J'avais aussi ce problème. Assurez-vous que jQuery est importé avant highchart.js. Cela a résolu le problème pour moi.

<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>
40
ved prakash Saini

Qu'est-ce qui se passe si vous remplacez

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

par 

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

?

J'ai eu le même problème que vous il y a quelque temps et je l'ai résolu en utilisant ce type d'initialisation. 

36
Kabulan0lak

J'utilisais une ancienne version de la version High Chart. Sur leur site Web, j'ai supposé que la version répertoriée sous Version spécifique était leur dernière version. Cependant, la version qu'ils avaient listée était très ancienne, aussi la changer pour la dernière version corrigea le problème.

2
odyth

Cela arrive aussi avec moi. Dans mon cas, j'ai besoin de cliquer sur un bouton pour charger le graphique et si je clique deux fois ou plus, le graphique cesse de fonctionner. Je mettais la couleur comme ceci: 

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

Je n'ai pas pu résoudre l'erreur, mais j'ai supprimé les "Highcharts.setOptions" et le graphique fonctionne !!! 

1
Zanoldor

La démarche tirée des exemples officiels fonctionne bien. Ils ont défini la balise include script dans la balise body, c'est pourquoi la solution proposée par Kabulan0lak est meilleure, je pense.

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