Javascript Highcharts jQuery 渲染问题 - 所有浏览器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6924356/
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
Highcharts jQuery rendering problem - all browsers
提问by Matt
I have a strange problem whilst trying to build a stacked column chart using Highcharts
我在尝试使用Highcharts构建堆积柱形图时遇到一个奇怪的问题
When the chart renders, the columns don't display, until, you resize the browserin anyway, causing the chart to redraw. (I think)! The rest of the chart displays (axis, titles, etc) but not the columns themselves.
当图表呈现时，列不会显示，直到您以任何方式调整浏览器的大小，导致图表重新绘制。（我认为）！图表的其余部分显示（轴、标题等），但不显示列本身。
I get the same behaviour in IE, Firefox and chrome.
我在 IE、Firefox 和 chrome 中得到相同的行为。
I have put my code on jsfiddle - http://jsfiddle.net/gd7bB/173/Load it up and you should see no data, resize the browser window and "tada", the data appears (rather the columns appear)!
我已经把我的代码放在 jsfiddle - http://jsfiddle.net/gd7bB/173/加载它，你应该看不到数据，调整浏览器窗口和“tada”的大小，数据出现（而不是列出现）！
Any help on this one would be massively appreciated.
对此的任何帮助将不胜感激。
采纳答案by Igor Dymov
Remove line chart.render();
删除线 chart.render();
When HighCharts constructor is called there's no need to call renderimplicitly.
调用 HighCharts 构造函数时，无需render隐式调用。
回答by Glycerine
I had exactly the same problem - Highcharts JS v2.1.5 (2011-06-22) does not work with jQuery 1.7.1
我遇到了完全相同的问题 - Highcharts JS v2.1.5 (2011-06-22) 不适用于 jQuery 1.7.1
After changing to jQuery 1.6.1 (The last stable release I used) it worked. Someone should check other versions of jQuery.
更改为 jQuery 1.6.1（我使用的最后一个稳定版本）后，它起作用了。有人应该检查其他版本的 jQuery。
回答by Asped
I had the same problem - after loading the page, the chart didn't display the lines (only the title and legend). After any browser resize or also zooming the chart suddenly appeared.
我遇到了同样的问题 - 加载页面后，图表没有显示线条（只有标题和图例）。在任何浏览器调整大小或缩放图表后突然出现。
The problem was with jQuery > 1.7 (my version now is 1.8.2) Update of the Highcharts to the latest version (v2.3.3 (2012-10-04)) fixed the problem (and also other small issues)
问题出在 jQuery > 1.7（我现在的版本是 1.8.2）将 Highcharts 更新到最新版本（v2.3.3 (2012-10-04)）修复了问题（以及其他小问题）
回答by Ebru
You needn't change any version of Highcharts or Jquery, if you resize()your div-container at the end of your script.
如果您resize()在脚本末尾设置了 div-container ，则无需更改 Highcharts 或 Jquery 的任何版本。
For example:
例如：
$('#div').resize();
回答by lomantpa
Using jQuery 1.7.2 + HighCharts 3.0.2 the problem was solved by using:
使用 jQuery 1.7.2 + HighCharts 3.0.2 问题通过使用解决：
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
events: {
load: function(event) {
//When is chart ready?
$(window).resize();
}
}
}, ..
This is the almost the same as @revo, but uses the 'window' object instead of 'document'.
这与@revo 几乎相同，但使用“window”对象而不是“document”。
回答by revo
Maybe a little late , but i had the same problem with jQuery 1.9.1 and didn't want to downgrade it for Highcharts with dotnet.highcharts.
也许有点晚了，但我在 jQuery 1.9.1 上遇到了同样的问题，并且不想使用 dotnet.highcharts 将它降级为 Highcharts。
if you crate a new Highchart there e.g.
如果你在那里创建一个新的 Highchart，例如
.InitChart(new Chart
{
DefaultSeriesType = ChartTypes.Line,
MarginRight = 130,
MarginBottom = 25,
ClassName = "chart",
Events = new ChartEvents { Load = "function(event) { $(document).resize(); }" }
}) .....
You also can use it
你也可以使用它
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
events: {
load: function(event) {
//When is chart ready?
$(document).resize();
}
}
}, ..
. the events line is what you need then you render your chart
. 事件线是你需要的，然后你呈现你的图表
I hope it helped, i had some hours to figure it out how it works :)
我希望它有所帮助，我有几个小时来弄清楚它是如何工作的:)
