it-swarm.com.de

Highcharts: Nicht erfasster TypeError: $ (...). Highcharts ist keine Funktion

Fehler beim Ausführen eines HighCharts in meiner JSP-Anwendung.

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

Bitte schlagen Sie vor, was zu tun ist

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

Ich hatte auch dieses Problem. Stellen Sie sicher, dass jQuery vor highchart.js importiert wird. Das hat das Problem für mich behoben.

<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

Was passiert, wenn Sie es ersetzen?

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

durch 

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

?

Ich hatte vor einer Weile dasselbe Problem wie Sie und ich habe es mit dieser Art der Initialisierung gelöst. 

36
Kabulan0lak

Ich habe eine alte Version der High-Charts-Version verwendet. Von ihrer Website aus ging ich davon aus, dass die unter Spezifische Version aufgelistete Version ihre neueste Version war und verwendete diese, damit sie mich nicht automatisch aktualisiert. Die Version, die sie aufgelistet hatten, war jedoch sehr alt, sodass das Problem durch die Aktualisierung auf die aktuelle Version behoben wurde.

2
odyth

Das passiert auch bei mir. In meinem Fall muss ich auf eine Schaltfläche klicken, um das Diagramm zu laden. Wenn ich zweimal auf das Diagramm klicke, wird das Diagramm angehalten. Ich habe die Farbe so eingestellt: 

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

Ich konnte den Fehler nicht beheben, aber ich entferne die "Highcharts.setOptions" und das Diagramm funktioniert !!! 

1
Zanoldor

Der Ansatz aus den offiziellen Beispielen funktioniert gut. Sie haben das Include-Script-Tag innerhalb des Body-Tags definiert. Daher ist die von Kabulan0lak gegebene Lösung besser, denke ich.

<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