我正在使用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>标签在页面加载时占据浏览器窗口的整个宽度，而不是从容器div宽度取得它。这是我检查时生成的html：
<rect rx="5" ry="5" fill="#FFFFFF" x="0" y="0" **width="1920"** height="200"></rect>打电话给chart.reflow()帮助了我。文件：http://api.highcharts.com/highcharts#Chart.reflow
我也遇到过这个问题，而.highcharts-container css解决方案对我来说并不适用。我设法通过将ng-class条件（将容器div设置不同的宽度）拆分为单独的div来解决它。
比如，这个
<div ng-class="condition?'col-12':'col-6'">
<chart></chart>
</div>
成
<div ng-show="condition" class="col-12">
<chart></chart>
</div>
<div ng-show="!condition" class="col-6">
<chart></chart>
</div>
我无法告诉你为什么它有效。我猜测ng-class需要更长的时间来计算容器宽度，所以highcharts首先呈现未定义的宽度？希望无论如何这对某人有帮助。
我在我的应用程序中也有相同的问题，我使用角度，我也使用ngCloak指令，我已删除，因为我不需要它
这样做之后我的问题就解决了。
我刚刚看到，有时会同时发生几个问题。
如果发生高度超过预期高度：
SCSS风格：
.parent_container{
position:relative;
.highcharts-container{position: absolute; width:100% !important;height:100% !important;}
}
如果宽度超过容器（大于预期的容量）或者没有正确调整到较小的容器：
let element = $("#"+id);
element.highcharts({...});
// For some reason it exceeds the div height.
// Trick done to reflow the graph.
setTimeout(()=>{
element.highcharts().reflow();
}, 100 );
当摧毁图表并创建一个新图表时，最后一个发生在我身上...新版本的宽度超出了额外的尺寸。
我也遇到过这个问题。两者都受到图表桌面和移动视图的影响。
在我的情况下，我有一个图表，根据最小或最大更新系列颜色。更新点后，高图宽度超过第一次加载时的容器div。
要解决这个问题，我所做的就是添加chart.reflow（）;更新积分后。
码：
//First declare the chart
var chart = $('#TopPlayer').highcharts();
//Set the min and max
var min = chart.series[0].dataMin; //Top Losser
var max = chart.series[0].dataMax; //Top Winner
for (var i = 0; i < chart.series[0].points.length; i++) {
if (chart.series[0].points[i].y === max) {
chart.series[0].points[i].update({
color: 'GREEN',
});
}
if (chart.series[0].points[i].y === min) {
chart.series[0].points[i].update({
color: 'RED',
});
}
}
// redraw the chart after updating the points
chart.reflow();
希望这有助于那些像我一样有同样问题的人。 :)
我今天遇到了同样的问题 - 不是在移动设备上，而是在第一页加载时窗口小。当页面加载时，图表被隐藏，然后在页面上的一些选择之后，我们创建图表。我们在css中设置了容器的最小宽度和最大宽度，但不是宽度。
创建图表时，需要确定创建SVG的维度。由于图表是隐藏的，因此无法正确获取尺寸，因此代码克隆图表容器，将其放在屏幕外并将其附加到正文，以便确定高度/宽度。
由于未设置宽度，克隆的div会尝试占用尽可能多的空间 - 直到我设置的最大宽度。 SVG元素是使用该宽度创建的，但是添加到当前较小的图表容器div中（基于屏幕的大小）。结果是图表延伸超过容器div的边界。
图表首次渲染后，屏幕尺寸已知，并且未调用克隆功能。这意味着任何窗口调整大小或重新加载图表数据都会导致图表正确调整大小。
我通过覆盖Highcharts函数cloneRenderTo解决了这个初始加载问题，(function (H) {
// encapsulated variables
var ABSOLUTE = 'absolute';
/**
* override cloneRenderTo to get the first chart display to fit in a smaller container based on the viewport size
*/
H.Chart.prototype.cloneRenderTo = function (revert) {
var clone = this.renderToClone,
container = this.container;
// Destroy the clone and bring the container back to the real renderTo div
if (revert) {
if (clone) {
this.renderTo.appendChild(container);
H.discardElement(clone);
delete this.renderToClone;
}
// Set up the clone
} else {
if (container && container.parentNode === this.renderTo) {
this.renderTo.removeChild(container); // do not clone this
}
this.renderToClone = clone = this.renderTo.cloneNode(0);
H.css(clone, {
position: ABSOLUTE,
top: '-9999px',
display: 'block' // #833
});
if (clone.style.setProperty) { // #2631
clone.style.setProperty('display', 'block', 'important');
}
doc.body.appendChild(clone);
//SA: constrain cloned element to width of parent element
if (clone.clientWidth > this.renderTo.parentElement.clientWidth){
clone.style.width = '' + this.renderTo.parentElement.clientWidth + 'px';
}
if (container) {
clone.appendChild(container);
}
}
}
})(Highcharts);
克隆div来获取维度：
documentation
我将此函数保存在一个单独的脚本文件中，该文件在Highchart.js脚本加载后加载。
最好的方法是在渲染事件函数 Highcharts.stockChart( 'chartContainer', {
chart: {
events: {
render: function() {
this.reflow();
}
},
zoomType: 'x',
...
},
中调用chart.reflow;
#chartContainter {
min-width: 0;
overflow: hidden;
}
并记住将min-width设置为零并溢出到图表容器中的隐藏。
<script defer src="script.js"></script>这是一个适合我的解决方案！图表工作正常一段时间，然后在他们开始超过他们的容器的功能之后。原来它是我的应用程序头部脚本的延迟属性。
尝试删除对您的JavaScript标记的延迟：
<script src="script.js"></script>到chart.height
或者将我的样式表链接移到头部更高也似乎解决了它，但它是一个不太可靠的解决方案..
这可能是自2013年OP以来引入的，但你应该可以用https://api.highcharts.com/highcharts/chart.height（ options: {
chart: {
type: 'bar',
height: window.innerHeight + 'px',
},
title: {
text: 'Top 10 Users',
},
subtitle: {
text: 'by scores',
},
）设置高度
$('#container').highcharts({
chart: {
backgroundColor: 'white',
**width:3000**,
..... }
这是一个基于Web的解决方案，但我希望你能把它提供给jQuery.mobile
对我来说，我设置图表宽度：
overflow:auto并在html设置<div id="container" style="**width:100%;overflow:auto**;" ></div>
tab5我挣扎了这么久，发现了一个适合我的解决方案。我的设置有一些背景知识：
所以，我将一个唯一的ID附加到该特定选项卡，我们将其命名为<svg>，然后绑定一个强制的单击函数 - 这是重要的部分 - 使用jQuery将容器div中的$('#tab5').bind('click', function() {
$('#container_div svg').width('100%');
});
元素设置为100％：
width:100%......我的理智已经恢复了。目前。
这就像魔法一样
把你的css文件放在下面
.highcharts-container {
width:100% !important;
height:100% !important;
}
请将overflow:hidden添加到图表容器中。
希望这将解决classname{min-height:450px;width: 100%;}
相关问题。
qazxswpoi
我有同样的问题，在我的情况下有一个highchart图表，它点击一个按钮后显示。我在展示活动后放了$(window).resize();，它正确解决了问题。我希望你服务。
设置图表的宽度。这是唯一对我有用的选择。
chart: {
type: 'line',
width: 835
},
我有一个类似的问题，它集中了它给出的highcharts图。对于某些分辨率，它会正确地居中和大小，但不是全部。如果没有，我就会遇到你在这里描述的完全相同的症状。
我通过附加/覆盖额外的css到highcharts默认值来修复它。
所以在自定义css文件中添加
.highcharts-container{
/** Rules it should follow **/
}
应该解决你的问题。假设你的div“hg = graph”只有highcharts。
对于那些使用角度和定制组件的人，请记住在主机元素的css（例如display或block）中定义尺寸标注的flex。
当图表容器有填充时，您可能会发现这是必不可少的：
HTML
<chart (load)="saveInstance($event.context)">
...
</chart>
TS
saveInstance(chartInstance: any) {
this.chart = chartInstance;
setTimeout(() => {
this.chart.reflow();
}, 0);
}
否则，图表将在加载时流出容器，并仅在下次浏览器重排时获得正确的宽度（例如，当您开始调整窗口大小时）。
在文档中定义高架图：
<div style="width:50%" id="charts">
和脚本：
$(document).ready(function(){
$(#chart).highcharts(){
...
});
)};
希望它有效;）
尝试将高清图生成封装在pageshow事件中
$(document).on("pageshow", "#hg_graph", function() {...});
我通过确保包含UI元素在图表之前呈现来解决此问题（对于我的情况），允许Highcharts计算正确的宽度。
例如：
之前：
var renderChart = function(){
...
};
renderChart();
后：
var renderChart = function(){
...
};
setTimeout(renderChart, 0);