HighCharts uncaught exception

2019-02-17 19:07发布

I am trying to run the same code in this jsFiddle locally but I got error from firebug

uncaught exception: Highcharts error #13: www.highcharts.com/errors/13

The included script fiels:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://highcharts.com/js/testing.js"></script>
<script type="text/javascript" src="test.js"></script>  // my js file

same thing happens for this jsFiddle as well.

Anyone know why this happens?

EDIT: I've found the reason for the problem. Actually I have to put the <script type="text/javascript" src="test.js"></script> tag after my <div id="container"></div> tag, otherwise the uncaught exception will be showing even I put the <script> tag in <head>. I never put the script file in the <body> tag before, and this is the first time I met this problem. Can Someone explain me why that happen?

Thanks

3条回答
2楼-- · 2019-02-17 19:51

The element/div you are trying to render the chart to is missing

A standard set of logs that I would use to troubleshoot highcharts error #13 are

        console.log("JSON: " + JSON.stringify(chartingOptions));
        console.log("Render to element with ID : " + chartingOptions.chart.renderTo);
        console.log("Number of matching dom elements : " + $("#" + chartingOptions.chart.renderTo).length);

These should be added just before calling the Highcharts constructor

        chart = new Highcharts.Chart(chartingOptions);

If all is well you should see the correct element ID, and length as 1.

Troubleshooting highcharts error # 13 | Highchart & Highstock @ jsFiddle

Here is the log that is seen for the demo above

JSON: {"chart":{"renderTo":"container"...}}
Render to element with ID : container
Number of matching dom elements : 1

查看更多
乱世女痞
3楼-- · 2019-02-17 20:00

This means that Highcharts is loaded and the config is loaded, but the renderTo option is wrong, or there is no div with that id in the page. See www.highcharts.com/errors/13.

查看更多
狗以群分
4楼-- · 2019-02-17 20:10

I think I know why you should add that tag after the div /div. If you are using a JSP or any other server-side stuf. You should add your Highcharts script after the declaration of the div container so it can recognize your div's id and then proceed to render it. Just like I did in the example bellow:

    <head>
    <title>HighCharts :D</title>
    <script src="http://code.highcharts.com/highcharts.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
</head>
<body>
<div id="container" style="width: 600px; height: 400px; margin: 0 auto">
</div>
<script type="text/javascript">
    var myChart = Highcharts.chart('container', {
        chart: {
            type: 'bar'
        },
        title: {
            text: 'Fruit Consumption'
        },
        xAxis: {
            categories: ['Apples', 'Bananas', 'Oranges']
        },
        yAxis: {
            title: {
                text: 'Fruit eaten'
            }
        },
        series: [{
            name: 'Jane',
            data: [1, 0, 4]
        }, {
            name: 'John',
            data: [5, 7, 3]
        }]
    });


</script>
</body>
查看更多
登录 后发表回答