Highcharts宽度超过第一次加载时的容器div

Question

我正在使用Highcharts和jQuery Mobile.

我在jQM data-role="content"容器中绘制了一个区域图,在该容器中我有以下div:

<div style="padding-top: 5px; padding-bottom: 10px; position: relative; width: 100%;">
    <div id="hg_graph" style="width: 100%"></div>
</div>

我的高图图是从他们的一个示例中获取的基本图,其中我没有设置图表width属性.

在第一次加载时,图形超出了包含div的宽度,但是当我调整浏览器大小时,它会捕捉到适当的宽度.

我怎样才能使它的宽度在第一页加载时正确,而不仅仅是调整大小？

我已经回顾了关于堆栈溢出的类似帖子,但没有一个解决方案似乎有效.

更新

我发现问题在于,<rect>Highcharts 动态生成的标签在页面加载时占据了浏览器窗口的全宽,而根本没有从容器div宽度中获取它.这是我检查时生成的html:

<rect rx="5" ry="5" fill="#FFFFFF" x="0" y="0" **width="1920"** height="200"></rect>
我试图在JSFiddle中重现,但它似乎在那里工作正常,这真的让我难过.这是我的JSFiddle代码:http://jsfiddle.net/meandnotyou/rMXnY

Answer 1

Answer 2

这就像魔法一样

把你的css文件放在下面

.highcharts-container {
    width:100% !important;
    height:100% !important;
}

Answer 3

我有同样的问题,在我的情况下有一个highchart图表,它点击一个按钮后显示.我放在$(window).resize();show事件后,它正确地解决了问题.我希望你服务.

Answer 4

设置图表的宽度.这是唯一对我有用的选择.

chart: {
            type: 'line',
            width: 835
        },

Answer 5

我在将它给出的高图表居中时遇到了类似的问题。对于某些分辨率（但不是全部），它可以正确居中和调整大小。如果没有，我的症状与您在这里描述的完全相同。

我通过将附加 css 附加/覆盖到 highcharts 默认值来修复它。

所以在自定义CSS文件中，添加

.highcharts-container{
/** Rules it should follow **/
}

应该可以解决你的问题。假设您的 div“hg=graph”除了 highcharts 之外什么也没有。