使用 Highcharts 时出现 JavaScript 错误
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5480591/
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
JavaScript error when using Highcharts
提问by pepe
I am having a weird problem that I hope you can help me with.
我遇到了一个奇怪的问题，希望你能帮助我。
I have Highchartsrunning on a dev website -- I use a simple form to allow the user to enter data.
我在开发网站上运行Highcharts——我使用一个简单的表单来允许用户输入数据。
On the same page, a Highchart shows once data is entered.
在同一页面上，一旦输入数据，就会显示一个 Highchart。
The data entry form has very simple jQuery-based snippets, eg. form validation, a counter for max number of characters, etc.
数据输入表单具有非常简单的基于 jQuery 的片段，例如。表单验证、最大字符数计数器等。
What happens is that when there is chart data in the database, the chart plots correctly, and the remaining JS snippets work as expected wen you try to enter new datapoints.
发生的情况是，当数据库中有图表数据时，图表会正确绘制，并且剩余的 JS 代码段在您尝试输入新数据点时按预期工作。
But if there is no data in the database (therefore no Highchart is shown), all my JS snippets stop working.
但是如果数据库中没有数据（因此没有显示 Highchart），我所有的 JS 代码段都将停止工作。
On Firebug console, I get this error when there is no data to form a chart:
在 Firebug 控制台上，当没有形成图表的数据时，我收到此错误：
jb is null
function n(m,h){kc=ya(a.title,m);tc=ya...play:""});Aa.body.appendChild(Qb)}Tc=
highcharts.js (line 47)
On Chrome, a different error shows as
在 Chrome 上，一个不同的错误显示为
Uncaught TypeError: Cannot set property 'innerHTML' of null
d.d.extend._Deferred.f.resolveWith jquery.min.js:16
d.d.extend.ready jquery.min.js:16
d.c.addEventListener.A
Again, these errors disappear as soon as I enter the first data point and a chart is formed.
同样，一旦我输入第一个数据点并形成图表，这些错误就会消失。
Does anyone know what is happening and how I can get my JS to work when a Highchart is empty?
有谁知道发生了什么以及当 Highchart 为空时如何让我的 JS 工作？
Any pointers are much appreciated. Thanks!
任何指针都非常感谢。谢谢！
采纳答案by pepe
OK, this error popped up again and that's because my comment above did not really solve it.
好的，这个错误又出现了，那是因为我上面的评论并没有真正解决它。
Here's the culprit: if you have a model that generates data for charts happen to return an empty array (say it's a new user and she hasn't added any data yet to the database), this empty array is passed to the controller -- which will then pass the empty array to the view with Highcharts.
罪魁祸首是：如果您有一个为图表生成数据的模型碰巧返回一个空数组（假设它是一个新用户并且她尚未向数据库添加任何数据），则该空数组将传递给控制器——然后将空数组传递给带有 Highcharts 的视图。
When passing an empty array to my view containing Highcharts, Highcharts would run but would not find an element to inject the chart, because I also had a condition in the view that removed #containerif there was no data.
当将一个空数组传递给我包含 Highcharts 的视图时，Highcharts 会运行但不会找到一个元素来注入图表，因为我在视图中也有一个条件，#container如果没有数据，它会被删除。
Without where to put the chart, Highcharts returns an innerHTMLerror, that may or may not break your remaining javascript (my case).
如果没有放置图表的位置，Highcharts 会返回一个innerHTML错误，这可能会也可能不会破坏您剩余的 javascript（我的情况）。
The solution here had nothing to do with JS, but actually with putting a condition in my controller which would be in pseudo code:
这里的解决方案与 JS 无关，但实际上是在我的控制器中放置了一个伪代码条件：
if model that generates chart data returns empty array
don't generate view containing Highcharts
else
generate view containing Highcharts
Doing this not only I prevented the error for good but also reduced the overhead of running Highcharts when no data is present.
这样做不仅可以永久避免错误，还可以减少在没有数据时运行 Highcharts 的开销。
回答by Charles Clayton
For me the problem was that I wasn't including jQuery before including HighCharts.
对我来说，问题是在包含 HighCharts 之前我没有包含 jQuery。
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
Threw the errors:
抛出错误：
Uncaught TypeError: Cannot read property 'addEvent' of undefined(anonymous function) @ highcharts.js:313(anonymous function) @ highcharts.js:315(anonymous function) @ highcharts.js:331
Uncaught TypeError: n.getOptions is not a function(anonymous function) @ highcharts-more.js:8(anonymous function) @ highcharts-more.js:55
Uncaught TypeError: Cannot read property 'fireEvent' of undefined(anonymous function) @ exporting.js:9(anonymous function) @ exporting.js:24
未捕获的类型错误：无法读取未定义（匿名函数）@highcharts.js:313（匿名函数）@highcharts.js:315（匿名函数）@highcharts.js:331 的属性“addEvent”
未捕获的类型错误：n.getOptions 不是函数（匿名函数）@highcharts-more.js:8（匿名函数）@highcharts-more.js:55
未捕获的类型错误：无法读取未定义（匿名函数）@exporting.js:9（匿名函数）@exporting.js:24 的属性“fireEvent”
But if I included jQuery first it didn't.
但是如果我首先包含 jQuery，它就没有。
回答by coderman
I had this problem. I had to surround the highChart creation code with document.ready
我有这个问题。我不得不用 document.ready 包围 highChart 创建代码
$(document).ready({
chart = new Highcharts.Chart({ //my cool chart
});
});
