web-dev-qa-db-ja.com

Highcharts：Uncaught TypeError：$（...）。highchartsは関数ではありません

JSPアプリケーションでHighChartsを実行中にこのエラーを取得します。

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

私もこの問題を抱えていました。 highchart.jsの前にjQueryがインポートされていることを確認してください。これで問題は解決しました。

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

交換するとどうなりますか

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

沿って

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

？

しばらく前と同じ問題がありましたが、このタイプの初期化を使用して解決しました。

37
Kabulan0lak

古いバージョンの高チャートバージョンを使用していました。彼らのウェブサイトから、特定のバージョンの下にリストされているバージョンが最新バージョンであると想定し、それを使用したため、自動更新されません。ただし、リストされていたバージョンは非常に古いため、実際の最新バージョンに変更すると問題が修正されました。

2
odyth

それは私にも起こります。私の場合、ボタンをクリックしてチャートをロードする必要があり、2回以上クリックするとチャートが機能しなくなります。私はこのように色を設定していました：

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」を削除すると、チャートは機能します!!!

1
Zanoldor

公式の例から取られたアプローチはうまく機能しています。 bodyタグ内にincludeスクリプトタグを定義したため、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
baris1892