Javascript HighCharts 未捕获异常

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/11486553/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-24 06:01:20  来源:igfitidea点击:

HighCharts uncaught exception

javascriptjqueryhighcharts

提问by sozhen

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

我正在尝试在本地jsFiddle 中运行相同的代码,但我收到了来自 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 jsFiddleas well.

这个jsFiddle也会发生同样的事情。

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?

编辑:我找到了问题的原因。实际上我必须将<script type="text/javascript" src="test.js"></script>标签放在我的标签之后<div id="container"></div>,否则即使我将<script>标签放入<head>. 之前没把脚本文件放在<body>标签里,第一次遇到这个问题。有人可以解释我为什么会这样吗?

Thanks

谢谢

回答by Torstein H?nsi

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.

这意味着加载了 Highcharts 并加载了配置,但是 renderTo 选项错误,或者页面中没有具有该 id 的 div。请参见www.highcharts.com/errors/13

回答by Jugal Thakkar

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

您尝试将图表渲染到的元素/div 丢失

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

我用来解决 highcharts 错误 #13 的一组标准日志是

        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

这些应该在调用 Highcharts 构造函数之前添加

        chart = new Highcharts.Chart(chartingOptions);

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

如果一切顺利,您应该会看到正确的元素 ID,长度为 1。

Troubleshooting highcharts error # 13 | Highchart & Highstock @ jsFiddle

故障排除 highcharts 错误 # 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

JSON: {"chart":{"renderTo":"container"...}}
渲染到元素 ID 为:container
匹配的 dom 元素数:1

回答by Taua Negri

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 afterthe 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:

我想我知道为什么要在 div / div 之后添加该标签。如果您使用的是 JSP 或任何其他服务器端 stuf。您应该在 div 容器的声明之后添加您的 Highcharts 脚本以便它可以识别您的 div 的 id,然后继续渲染它。就像我在下面的示例中所做的那样:

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