Question

我有一个奇怪的问题，希望你能帮助我。

我在开发网站上运行了Highcharts - 我使用一个简单的表单来允许用户输入数据。

在同一页面上，输入数据后会显示一个Highchart。

数据输入表单具有非常简单的基于jQuery的代码段，例如。表格验证，最大字符数的计数器等。

当数据库中存在图表数据时，图表会正确绘制，剩下的JS片段会在您尝试输入新数据点时按预期工作。

但如果数据库中没有数据（因此没有显示Highchart），那么我的所有JS代码段都会停止工作。

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

在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

同样，一旦我进入第一个数据点并形成图表，这些错误就会消失。

当Highchart为空时，是否有人知道发生了什么以及如何让我的JS工作？

非常感谢任何指针。谢谢！

Answer 1

对我来说，问题是我在包含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>

抛出错误：

Uncaught TypeError：无法读取未定义的属性'addEvent'（匿名函数）@ highcharts.js：313（匿名函数）@ highcharts.js：315（匿名函数）@ highcharts.js：331

未捕获TypeError：n.getOptions不是函数（匿名函数）@ highcharts-more.js：8（匿名函数）@ highcharts-more.js：55

未捕获的TypeError：无法读取未定义的属性'fireEvent'（匿名函数）@ exports.js：9（匿名函数）@ exports.js：24

但是如果我首先包含jQuery它没有。

Answer 2

我有这个问题。我不得不用document.ready

包围highChart创建代码

$(document).ready({
   chart = new Highcharts.Chart({ //my cool chart 
   });
});

Answer 3

好的，这个错误再次弹出，那是因为我上面的评论并没有真正解决它。

这是罪魁祸首：如果你有一个为图表生成数据的模型碰巧返回一个空数组（比如说它是一个新用户而她还没有向数据库添加任何数据），这个空数组将被传递给controller - 然后将使用Highcharts将空数组传递给视图。

将空数组传递给包含Highcharts的视图时，Highcharts会运行但不会找到一个元素来注入图表，因为如果没有数据，我在视图中也有一个删除#container的条件。

无论在何处放置图表，Highcharts都会返回innerHTML错误，这可能会或可能不会破坏您剩余的javascript（我的情况）。

这里的解决方案与JS没有任何关系，但实际上是在我的控制器中添加一个伪代码的条件：

if model that generates chart data returns empty array
    don't generate view containing Highcharts
else
    generate view containing Highcharts

这样做不仅可以防止错误，还可以减少在没有数据时运行Highcharts的开销。

使用Highcharts时出现JavaScript错误

3 个答案: