第一次加载时，Highcharts宽度超过容器格 [英] Highcharts width exceeds container div on first load

问题描述

我在jQM data-role =content中绘制了一张面积图， 容器，并在该容器内我有以下div：

 < ; div style =padding-top：5px; padding-bottom：10px; position：relative; width：100％;> 
< div id =hg_graphstyle =width：100％>< / div> 
< / div> 
  

我的highcharts图是一个基本图，取自他们的一个例子，我没有设置图表 width 属性。

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

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

我已经回顾了堆栈溢出的类似帖子，并且这些解决方案似乎都无法正常工作。

更新

1. 我发现问题在于动态生成的< rect> 标记在页面加载时取得了浏览器窗口的全部宽度，并且根本不会从容器div宽度中取得它。这里是我检查时生成的html：



   < rect rx =5ry =5fill =＃FFFFFFx = 0y =0** width =1920** height =200>< / rect>




2. 我试图在JSFiddle中重现，但它似乎在那里工作很好，这真的让我难住。这里是我的JSFiddle代码： http://jsfiddle.net/meandnotyou/rMXnY




解决方案

调用 chart.reflow（）帮助过我。
文档： http://api.highcharts.com/highcharts#Chart.reflow

I'm using Highcharts with jQuery Mobile.

I have an area graph being drawn within a jQM data-role="content" container and within that container I have the following divs:

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

My highcharts graph is a basic graph taken from one of their examples where I have not set the chart width property.

On the first load the graph exceeds the width of the containing divs, but when I resize the browser it snaps to the appropriate width.

How can I make it so that the width of it is right on first page load and not just on resize?

I've reviewed similar posts on stack overflow and none of the solutions seem to work.

UPDATES

1. I've identified the problem is that the dynamically generated <rect> tag by Highcharts is taking the full width of the browser window on page load and not taking it from the containiner div width at all. Here's the html generated when I inspect:

   <rect rx="5" ry="5" fill="#FFFFFF" x="0" y="0" **width="1920"** height="200"></rect>

2. I tried to reproduce in JSFiddle, but it seems to work fine there, which really has me stumped. Here's my JSFiddle code: http://jsfiddle.net/meandnotyou/rMXnY

解决方案

To call chart.reflow() helped me. Docs: http://api.highcharts.com/highcharts#Chart.reflow

这篇关于第一次加载时，Highcharts宽度超过容器格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！