6

我正在尝试在本地运行此jsFiddle中的相同代码，但我从 firebug 收到错误

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

包含的脚本文件：

<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

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

有谁知道为什么会这样？

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

谢谢

4

3 回答 3

18

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

于 2012-07-14T19:32:21.500 回答
2

您尝试将图表呈现到的元素/div 丢失

我用来解决 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);

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

        chart = new Highcharts.Chart(chartingOptions);

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

排查 highcharts 错误 #13 | Highchart & Highstock @ jsFiddle

这是上面演示的日志

JSON: {"chart":{"renderTo":"container"...}}
渲染到具有 ID 的元素：容器
匹配 dom 元素的数量：1

于 2012-10-29T10:26:22.893 回答
2

我想我知道为什么要在 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>
于 2017-03-03T12:58:43.130 回答