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

问题描述

我在 jQuery Mobile 中使用 Highcharts.

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

<div id="hg_graph" style="width: 100%"></div>

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

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

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

我查看了有关堆栈溢出的类似帖子，但似乎没有一个解决方案有效.

更新

1. 我发现问题在于 Highcharts 动态生成的 <rect> 标签在页面加载时占用了浏览器窗口的整个宽度，而不是从容器中获取div 宽度.这是我检查时生成的 html:

   ;</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 宽度在第一次加载时超过容器 div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！