Highcahrts Error,Uncaught TypeError:Cannot read property 'destroy' of undefined

Question

I want to clear the data of highcharts when the page initialization.But when I use: $('#container').highcharts().destroy();

A error has happened.The error message is : Uncaught TypeError:Cannot read property 'destroy' of undefined.

How to fix this error? My html's code:

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <link rel="icon" href="https://static.jianshukeji.com/highcharts/images/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1">    <script src="https://img.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
    <script src="https://img.hcharts.cn/highcharts/highcharts.js"></script>
    <script src="https://img.hcharts.cn/highcharts/highcharts-more.js"></script>
    <script src="https://img.hcharts.cn/highcharts/modules/exporting.js"></script>
    <script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
</head>
<body>

    <div id="container" style="min-width:400px;height:400px"></div>

    <script>
    $(function () {
    $('#container').highcharts().destroy();
    $('#container').highcharts({
        chart: {
            type: 'bubble',
            plotBorderWidth: 1,
            zoomType: 'xy'
        },
        title: {
            text: 'Highcharts 3D'
        },
        xAxis: {
            gridLineWidth: 1
        },
        yAxis: {
            startOnTick: false,
            endOnTick: false
        },
        series: [{
            name:'qipao1',
            data: [
                [9, 81, 63],
                [98, 5, 89],
                [51, 50, 73],
                [41, 22, 14],
                [58, 24, 20],
                [78, 37, 34],
                [55, 56, 53],
                [18, 45, 70],
                [42, 44, 28],
                [3, 52, 59],
                [31, 18, 97],
                [79, 91, 63],
                [93, 23, 23],
                [44, 83, 22]
            ],
            marker: {
                fillColor: {
                    radialGradient: { cx: 0.4, cy: 0.3, r: 0.7 },
                    stops: [
                        [0, 'rgba(255,255,255,0.5)'],
                        [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0.5).get('rgba')]
                    ]
                }
            }
        }, {
            name:'qipao2',
            data: [
                [42, 38, 20],
                [6, 18, 1],
                [1, 93, 55],
                [57, 2, 90],
                [80, 76, 22],
                [11, 74, 96],
                [88, 56, 10],
                [30, 47, 49],
                [57, 62, 98],
                [4, 16, 16],
                [46, 10, 11],
                [22, 87, 89],
                [57, 91, 82],
                [45, 15, 98]
            ],
            marker: {
                fillColor: {
                    radialGradient: { cx: 0.4, cy: 0.3, r: 0.7 },
                    stops: [
                        [0, 'rgba(255,255,255,0.5)'],
                        [1, Highcharts.Color(Highcharts.getOptions().colors[1]).setOpacity(0.5).get('rgba')]
                    ]
                }
            }
        }]
    });
});
</script>
</body>
</html>

Answer 1

Just test to see if highcharts is attached to the container before calling the destroy method:

$(function () {
  if ($('#container').highcharts()) $('#container').highcharts().destroy();
  $('#container').highcharts({
    chart: {
    // ...

Highcahrts Error,Uncaught TypeError:Cannot read property 'destroy' of undefined

Question

1 answers

solution1
0 2018-04-17 00:09:28

Highcahrts Error,Uncaught TypeError:Cannot read property 'destroy' of undefined

Question

1 answers

solution1 0 2018-04-17 00:09:28

solution1
0 2018-04-17 00:09:28