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

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (35)

我正在使用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>

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

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

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

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

更新

  1. 我发现问题在于,<rect>Highcharts 动态生成的标签在页面加载时占据了浏览器窗口的全宽,而根本没有从容器div宽度中获取它。这是我检查时生成的html: <rect rx="5" ry="5" fill="#FFFFFF" x="0" y="0" **width="1920"** height="200"></rect>
  2. 我试图在JSFiddle中重现,但它似乎在那里工作正常,这真的让我难过。这是我的JSFiddle代码:http//jsfiddle.net/meandnotyou/rMXnY
提问于
用户回答回答于

在文档中定义高架图:

<div style="width:50%" id="charts">

和脚本:

$(document).ready(function(){
    $(#chart).highcharts(){
    ...
    });
)};

希望它有效;)

扫码关注云+社区

领取腾讯云代金券