在外部js中Highcharts条形图中断 [英] Highcharts bar chart breaks when in external js
问题描述
我在使用Highcharts时遇到了一些麻烦.我有一个默认的堆积条形图设置的图形.看起来不错.该代码位于html文件中.
I'm having a little trouble with Highcharts. I have a graph set up with a default stacked bar layout. It looks fine. The code is in an html file.
然后，我将相同的代码(不做任何修改)放入一个外部.js文件中，第二个结果就是我得到的.我很沮丧，我不知道为什么会这样.有什么想法吗?
I then put the same code, no modifications, into an external .js file, and the second result is what I get. I'm totally stumped, I have no idea why this is happening. Any ideas?
js文件还有很多其他代码，但我认为它不应该与图形生成冲突...
The js file has a bunch of other code, but I don't think it should conflict with the graph generation...
谢谢.
工作图: http://i.stack.imgur.com/51QTV.png 损坏的图表: http://i.stack.imgur.com/VyDzK.png
Working Graph: http://i.stack.imgur.com/51QTV.png Broken Graph: http://i.stack.imgur.com/VyDzK.png
推荐答案
由于您未提供任何示例代码，因此我将疯狂地猜测原因:
Since you didn't provide any sample code, I'm going to wildly guess at causes:
-
外部JS文件中的代码/确实确实在干扰图形的生成.如果未通过onload事件正确加载，则可能会发生这种情况.大多数Javascript仅应在文档完全加载后才执行(jQuery对此非常有用).
The code in the external JS file /is indeed/ interfering with the graph generation. This may happen if it isn't being loaded properly with the onload event. Most Javascript should only be executed after the document has completely loaded (jQuery is good for this).
通过将Highcharts代码放入外部文件中，您正在破坏加载顺序.也许某些代码取决于您稍后要加载的其他代码.也许它正在尝试使用尚不存在的样式表.也许在覆盖全局对象之前有一些代码，一些属性和方法正在消失.
By putting the Highcharts code in an external file, you're breaking the order of loading. Perhaps, some of the code depends on other code that you're now loading later. Maybe it's trying to use a stylesheet that doesn't exist yet. Maybe some code before it is overwriting a global object, and some properties and methods are disappearing.
通常，应在样式表之后加载Javascript文件，并且大多数Javascript逻辑应在文档加载后执行.这可以通过在主体上附加onload ="javascript:foo()"属性或使用$(foo)来完成. (其中foo是一个函数)，如果您使用的是jQuery.
As a general rule, Javascript files should be loaded AFTER stylesheets, and most Javascript logic should execute after the document loads. This can either be done by attaching an onload="javascript:foo()" attribute to the body, or using $(foo); (where foo is a function) if you're using jQuery.
这篇关于在外部js中Highcharts条形图中断的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
