blocks|key|42674|text|打电话给chart.reflow()帮了我。文档：http://api.highcharts.com/highcharts#Chart.reflow|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|42675|entityMap|0|LINK|mutability|MUTABLE|url|http://api.highcharts.com/highcharts#Chart.reflow^0|4|E|P|1D|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@$9|O|A|P|B|C]]|D|@$9|Q|A|R|1|S]]|E|$]]|$1|F|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|G|$H|$5|I|J|K|E|$L|M]]]]

To call <code>chart.reflow()</code> helped me. 
Docs: <a href="http://api.highcharts.com/highcharts#Chart.reflow">http://api.highcharts.com/highcharts#Chart.reflow</a>

blocks|key|42872|text|这就像变魔术一样|type|unstyled|depth|inlineStyleRanges|entityRanges|data|42873|在你的css文件中放入如下内容|42874|.highcharts-container+{
++++width:100%25+!important;
++++height:100%25+!important;
}|code-block|syntax|javascript|42875|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

this works like magic

put in your css file following

<pre><code>.highcharts-container {
 width:100% !important;
 height:100% !important;
}
</code></pre>

blocks|key|44003|text|我也有同样的问题，在我的例子中有一个高度表的图表，它是在点击一个按钮后显示的。我在显示事件之后添加了$(window).resize();，它正确地解决了这个问题。我希望你能发球。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|44004|entityMap^0|1E|J|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

I have the same problem, in my case had a graph of highchart that it is shown after click a button. I put <code>$(window).resize();</code> after show event and it solved the problem correctly. I hope you serve.

blocks|key|43935|text|设置图表的宽度。对我来说，这是唯一可行的选择。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|43936|chart:+{
++++++++++++type:+'line',
++++++++++++width:+835
++++++++},|code-block|syntax|javascript|43937|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Set width of the chart. That's the only option that worked for me. 

<pre><code>chart: {
 type: 'line',
 width: 835
 },
</code></pre>

blocks|key|2517530|text|准备好定义文档内的highcharts：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2517531|<div+style="width:50%25"+id="charts">|code-block|syntax|javascript|2517532|和脚本：|2517533|$(document).ready(function(){
++++$(#chart).highcharts(){
++++...
++++});
)};|2517534|希望它能正常工作;)|2517535|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

Define the highcharts inside the document ready:

<pre><code>&lt;div style="width:50%" id="charts"&gt;
</code></pre>

and the script:

<pre><code>$(document).ready(function(){
 $(#chart).highcharts(){
 ...
 });
)};
</code></pre>

Hope it works ;)

blocks|key|42619|text|我有一个类似的问题，居中的highcharts图表它给出。对于某些分辨率，它会正确地居中和调整大小，但不是所有分辨率。当它不起作用时，我出现了你在这里描述的完全相同的症状。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|42620|我通过将额外的css附加/覆盖到highcharts缺省值来修复它。|42621|因此，在自定义css文件中，添加|42622|.highcharts-container{
/**+Rules+it+should+follow+**/
}|code-block|syntax|javascript|42623|应该可以解决你的问题。假设你的div+"hg=graph“只有highcharts。|42624|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|Q|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|R|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

I had a similar issue with centering the highcharts graph it gave. It would center and size correctly for some resolutions but not all. When it didn't, I had the exact same symptoms you're describing here.

I fixed it by attaching/overriding additional css to the highcharts default.

so in a custom css file, adding

<pre><code>.highcharts-container{
/** Rules it should follow **/
}
</code></pre>

should fix your issue. Assuming that your div "hg=graph" has nothing but highcharts.

blocks|key|2517601|text|对于使用angular和自定义构件的用户，请记住在css中为主体元素定义标注尺寸的display+(如block或flex)。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2517602|当图表容器有填充时，您可能会发现这是必不可少的：|2517603|html|BOLD|2517604|<chart+(load)="saveInstance($event.context)">
...
</chart>|code-block|syntax|javascript|2517605|ts|2517606|++saveInstance(chartInstance:+any)+{
++++this.chart+=+chartInstance;
++++setTimeout(()+=>+{
++++++this.chart.reflow();
++++},+0);
++}|2517607|否则，图表将在加载时溢出容器，并仅在下一次浏览器回流时获得其正确宽度(例如。当您开始调整窗口大小时)。|2517608|entityMap^0|15|7|1F|5|1L|4|0|0|0|4|0|0|0|2|0|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@$9|Y|A|Z|B|C]|$9|10|A|11|B|C]|$9|12|A|13|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|14|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|15|8|@$9|16|A|17|B|J]]|D|@]|E|$]]|$1|K|3|L|5|M|7|18|8|@]|D|@]|E|$N|O]]|$1|P|3|Q|5|6|7|19|8|@$9|1A|A|1B|B|J]]|D|@]|E|$]]|$1|R|3|S|5|M|7|1C|8|@]|D|@]|E|$N|O]]|$1|T|3|U|5|6|7|1D|8|@]|D|@]|E|$]]|$1|V|3|-4|5|6|7|1E|8|@]|D|@]|E|$]]]|W|$]]

For those using angular and custom-built components, remember to define a dimensioned <code>display</code> in css (such as <code>block</code> or <code>flex</code>) for the host element.

And when the chart container has padding, you might find this indispensable:

html

<pre><code>&lt;chart (load)="saveInstance($event.context)"&gt;
...
&lt;/chart&gt;
</code></pre>

ts

<pre><code> saveInstance(chartInstance: any) {
 this.chart = chartInstance;
 setTimeout(() =&gt; {
 this.chart.reflow();
 }, 0);
 }
</code></pre>

Otherwise the chart will bleed past the container on load and get its correct width only at next browser reflow (eg. when you start to resize window).

blocks|key|43063|text|我今天也遇到了同样的问题--不是在手机上，而是在第一个页面加载时窗口大小很小。当页面加载时，图表被隐藏，然后在页面上进行一些选择后，我们创建图表。我们在css中设置了容器的最小宽度和最大宽度，但没有设置宽度。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|43064|在创建图表时，需要确定用于创建SVG的维度。由于图表是隐藏的，因此无法正确获取尺寸，因此代码克隆了图表容器，将其定位在屏幕外，并将其附加到正文，以便确定高度/宽度。|offset|length|style|BOLD|43065|因为没有设置宽度，所以克隆的div会尽可能多地占用空间--直到我设置的最大宽度。SVG元素是使用该宽度创建的，但添加到当前较小的图表容器div中(基于屏幕的大小)。结果是图表超出了容器div的边界。|43066|在图表第一次呈现之后，屏幕上的尺寸是已知的，并且不会调用克隆函数。这意味着任何窗口都会调整大小，或者重新加载图表数据会导致图表大小正确。|43067|我通过覆盖Highcharts函数cloneRenderTo解决了这个初始加载问题，该函数克隆div以获取尺寸：|CODE|43068|(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+=+''+%2B+this.renderTo.parentElement.clientWidth+%2B+'px';
++++++++++++}

++++++++++++if+(container)+{
++++++++++++++++clone.appendChild(container);
++++++++++++}
++++++++}
++++}

})(Highcharts);|code-block|syntax|javascript|43069|我将此函数保存在一个单独的脚本文件中，该文件在Highchart.js脚本加载后加载。|43070|entityMap^0|0|M|1O|0|0|0|H|D|0|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Y|8|@$D|Z|E|10|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|11|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|12|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|13|8|@$D|14|E|15|F|N]]|9|@]|A|$]]|$1|O|3|P|5|Q|7|16|8|@]|9|@]|A|$R|S]]|$1|T|3|U|5|6|7|17|8|@]|9|@]|A|$]]|$1|V|3|-4|5|6|7|18|8|@]|9|@]|A|$]]]|W|$]]

I just ran into the same problem today - not on mobile, but with a window sized small on first page load. When the page loads, the chart is hidden, then after some selections on the page, we create the chart. We have set a min-width and max-width for the container in css, but not a width. 

When the chart is being created, it needs to determine the dimensions to create the SVG . Since the chart is hidden, it cant get the dimensions properly so the code clones the chart container, positions it off-screen and appends it to the body so that it can determine the height/width.

Since the width is not set, the cloned div tries to take as much space as it can - up to the max-width that I had set. The SVG elements are created using that width, but added to the chart container div which currently is smaller (based on the size of the screen). The result is that the chart extends past the container div's boundaries. 

After the chart has rendered the first time, the on-screen dimensions are known and the clone function is not called. This means that any window resizes, or reloading of the chart data cause the chart to size correctly.

I got around this initial-load problem by overriding the Highcharts function <code>cloneRenderTo</code> which clones the div to get dimensions:

<pre><code>(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 &amp;&amp; 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 &gt; this.renderTo.parentElement.clientWidth){
 clone.style.width = '' + this.renderTo.parentElement.clientWidth + 'px';
 }

 if (container) {
 clone.appendChild(container);
 }
 }
 }

})(Highcharts);
</code></pre>

I saved this function in a separate script file that loads after the Highchart.js script has loaded.

blocks|key|43075|text|最好的方法是在渲染事件函数documentation中调用chart.reflow；|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|43076|+Highcharts.stockChart(+'chartContainer',+{
+chart:+{
++events:+{
++++render:+function()+{
++++++this.reflow();
++++}
++},
++zoomType:+'x',
+++...
},|code-block|syntax|javascript|43077|记住在图表容器中将min-width设置为0，并将overflow设置为隐藏。|43078|#chartContainter+{
++min-width:+0;
++overflow:+hidden;
++}|43079|entityMap|0|LINK|mutability|MUTABLE|url|https://api.highcharts.com/highcharts/chart.events.render^0|D|D|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@$A|V|B|W|1|X]]|C|$]]|$1|D|3|E|5|F|7|Y|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|Z|8|@]|9|@]|C|$]]|$1|K|3|L|5|F|7|10|8|@]|9|@]|C|$G|H]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|C|$]]]|N|$O|$5|P|Q|R|C|$S|T]]]]

The best way is to call chart.reflow in render event function <a href="https://api.highcharts.com/highcharts/chart.events.render" rel="nofollow noreferrer">documentation</a>;

<pre><code> Highcharts.stockChart( 'chartContainer', {
 chart: {
 events: {
 render: function() {
 this.reflow();
 }
 },
 zoomType: 'x',
 ...
},
</code></pre>

and remember to set min-width to zero and overflow to hidden in chart container.

<pre><code>#chartContainter {
 min-width: 0;
 overflow: hidden;
 }
</code></pre>

blocks|key|42876|text|尝试将highchart生成封装在页面显示事件中|type|unstyled|depth|inlineStyleRanges|entityRanges|data|42877|$(document).on("pageshow",+"#hg_graph",+function()+{...});|code-block|syntax|javascript|42878|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

try and encapsulate the highchart generation inside a pageshow event

<pre><code>$(document).on("pageshow", "#hg_graph", function() {...});
</code></pre>

blocks|key|2726949|text|我通过确保包含的UI元素在图表之前呈现，允许Highcharts计算正确的宽度，解决了这个问题(对于我的情况)。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2726950|例如：|2726951|之前：|2726952|var+renderChart+=+function(){
...
};
renderChart();|code-block|syntax|javascript|2726953|之后：|2726954|var+renderChart+=+function(){
...
};
setTimeout(renderChart,+0);|2726955|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|S|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|T|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|H|7|V|8|@]|9|@]|A|$I|J]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

I resolved this problem (for my case) by ensuring that the containing UI elements render before the chart, allowing Highcharts to calculate the correct width.

For example:

Before:

<pre><code>var renderChart = function(){
...
};
renderChart();
</code></pre>

After:

<pre><code>var renderChart = function(){
...
};
setTimeout(renderChart, 0);
</code></pre>

blocks|key|42950|text|我也遇到过这个问题，.highcharts-container+css解决方案对我不起作用。我通过将一个ng-class条件(为容器div设置不同的宽度)分到单独的div中，设法解决了这个问题。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|42951|例如，这个|42952|<div+ng-class="condition?'col-12':'col-6'">
++++<chart></chart>
</div>|code-block|syntax|javascript|42953|转到|42954|<div+ng-show="condition"+class="col-12">
++++<chart></chart>
</div>
<div+ng-show="!condition"+class="col-6">
++++<chart></chart>
</div>|42955|不过，我真的不能告诉你为什么它能工作。我猜ng-class需要更长的时间来计算容器的宽度，所以highcharts首先使用未定义的宽度进行渲染？无论如何，希望这对某些人有所帮助。|42956|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|T|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

I have been having this issue too, and the .highcharts-container css solution wasn't working for me. I managed to solve it for my case by splitting out an ng-class condition (which was setting different widths for the container div) into separate divs.

eg, this

<pre><code>&lt;div ng-class="condition?'col-12':'col-6'"&gt;
 &lt;chart&gt;&lt;/chart&gt;
&lt;/div&gt;
</code></pre>

into

<pre><code>&lt;div ng-show="condition" class="col-12"&gt;
 &lt;chart&gt;&lt;/chart&gt;
&lt;/div&gt;
&lt;div ng-show="!condition" class="col-6"&gt;
 &lt;chart&gt;&lt;/chart&gt;
&lt;/div&gt;
</code></pre>

I couldn't really tell you why it worked though. I'm guessing the ng-class takes longer to calculate the container width and so highcharts renders first with an undefined width? Hopefully this helps someone anyway.

blocks|key|2727003|text|我在我的应用程序中也遇到了同样的问题，我正在使用angular和ngCloak指令，我已经删除了它，因为我不需要它|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2727004|这样做之后，我的问题就解决了。|2727005|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

I also have the same issue in my app where i am using angular
and i also using ngCloak directive which i have removed as i don't need it

after doing this my problem is solved.

blocks|key|44046|text|我刚刚看到，有时会有几个问题同时发生。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|44047|如果发生这种情况，则高度超过预期高度：|44048|SCSS风格：|offset|length|style|BOLD|44049|.parent_container{

++++position:relative;

++++.highcharts-container{position:+absolute;+width:100%25+!important;height:100%25+!important;}
}|code-block|syntax|javascript|44050|如果宽度超过容器(比预期的大)，或者没有正确地调整到较小的|44051|++++let+element+=+$("#"%2Bid);
++++element.highcharts({...});

++++//+For+some+reason+it+exceeds+the+div+height.
++++//+Trick+done+to+reflow+the+graph.+
++++setTimeout(()=>{
++++++++element.highcharts().reflow();
++++},+100+);|44052|最后一次发生在我销毁图表并创建新图表的时候……新的那件带有宽大的尺码。|44053|entityMap^0|0|0|0|7|0|0|0|T|0|0|0|Z|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|X|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|Y|8|@$F|Z|G|10|H|I]]|9|@]|A|$]]|$1|J|3|K|5|L|7|11|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|6|7|12|8|@$F|13|G|14|H|I]]|9|@]|A|$]]|$1|Q|3|R|5|L|7|15|8|@]|9|@]|A|$M|N]]|$1|S|3|T|5|6|7|16|8|@$F|17|G|18|H|I]]|9|@]|A|$]]|$1|U|3|-4|5|6|7|19|8|@]|9|@]|A|$]]]|V|$]]

I have just seen that sometimes there are several issues going on at the same time. 

If it happens the height exceed the expected heigh:

SCSS style:

<pre><code>.parent_container{

 position:relative;

 .highcharts-container{position: absolute; width:100% !important;height:100% !important;}
}
</code></pre>

If the width exceeds the container (bigger than what's supposed to) or does not resize properly to smaller one:

<pre><code> let element = $("#"+id);
 element.highcharts({...});

 // For some reason it exceeds the div height.
 // Trick done to reflow the graph. 
 setTimeout(()=&gt;{
 element.highcharts().reflow();
 }, 100 );
</code></pre>

The last one happened to me when destroying the chart and creating a new one... the new one was coming with width extra size.

blocks|key|2517516|text|我也遇到过这个问题。在图表的桌面和移动视图中均受影响。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2517517|在我的例子中，我有一个高亮图表，它根据最小或最大.After更新点来更新系列颜色，highcharts宽度在第一次加载时超过了容器div。|2517518|为了解决这个问题，我所做的是在更新点之后添加chart.reflow();。|offset|length|style|BOLD|2517519|代码：|2517520|//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%2B%2B)+{
++++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();|code-block|syntax|javascript|2517521|希望这对像我一样有同样问题的人有所帮助。:)|2517522|entityMap^0|0|0|M|F|0|0|3|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|W|8|@$F|X|G|Y|H|I]]|9|@]|A|$]]|$1|J|3|K|5|6|7|Z|8|@$F|10|G|11|H|I]]|9|@]|A|$]]|$1|L|3|M|5|N|7|12|8|@]|9|@]|A|$O|P]]|$1|Q|3|R|5|6|7|13|8|@]|9|@]|A|$]]|$1|S|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|T|$]]

I have been also bump into this issue. both affected in desktop and mobile view of the chart.

In my case i have a Chart that update the series color depending on min or max.After updating the points, the highcharts width exceeds container div on its first load.

To fix that, what i did is add chart.reflow(); after the update of points.

CODE:

<pre><code>//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 &lt; 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();
</code></pre>

Hope this helps to those who has the same issue like me. :)

blocks|key|43050|text|这是一个对我有效的解决方案！图表在一段时间内运行良好，然后在一个功能之后，它们开始超出其容器。原来是我的应用程序头部的脚本上的defer属性。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|43051|尝试删除javascript标记上的defer：|43052|<script+defer+src="script.js"></script>到<script+src="script.js"></script>|offset|length|style|CODE|43053|或者将我的样式表链接放在头部更高的位置似乎也可以解决这个问题，但这是一个不太可靠的解决方案。|43054|entityMap^0|0|0|0|13|14|X|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|P|8|@$F|Q|G|R|H|I]|$F|S|G|T|H|I]]|9|@]|A|$]]|$1|J|3|K|5|6|7|U|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|M|$]]

Here's a solution that worked for me ! The charts were working fine for a while and then after a feature they started exceeding their container. Turns out it was the defer attribute on the script in the head of my application.

Try removing defer on your javascript tags:

<code>&lt;script defer src="script.js"&gt;&lt;/script&gt;</code>
to
<code>&lt;script src="script.js"&gt;&lt;/script&gt;</code>

Or moving my stylesheet link higher in the head also seemed to fix it but it's a less reliable solution..

blocks|key|43085|text|这可能是从2013年的OP开始引入的，但您应该能够使用chart.height+(https://api.highcharts.com/highcharts/chart.height)设置高度|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|43086|++++++++++++++++options:+{
++++++++++++++++++++chart:+{
++++++++++++++++++++++++type:+'bar',
++++++++++++++++++++++++height:+window.innerHeight+%2B+'px',
++++++++++++++++++++},
++++++++++++++++++++title:+{
++++++++++++++++++++++++text:+'Top+10+Users',
++++++++++++++++++++},
++++++++++++++++++++subtitle:+{
++++++++++++++++++++++++text:+'by+scores',
++++++++++++++++++++},|code-block|syntax|javascript|43087|这是一个基于web的解决方案，但我希望你能满足jQuery.mobile的需要|43088|entityMap|0|LINK|mutability|MUTABLE|url|https://api.highcharts.com/highcharts/chart.height^0|R|C|15|1E|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@$9|X|A|Y|1|Z]]|E|$]]|$1|F|3|G|5|H|7|10|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|11|8|@]|D|@]|E|$]]|$1|M|3|-4|5|6|7|12|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|T]]]]

This may have been introduced since the OP in 2013, but you should be able to set height with <code>chart.height</code> (<a href="https://api.highcharts.com/highcharts/chart.height" rel="nofollow noreferrer">https://api.highcharts.com/highcharts/chart.height</a>)

<pre><code> options: {
 chart: {
 type: 'bar',
 height: window.innerHeight + 'px',
 },
 title: {
 text: 'Top 10 Users',
 },
 subtitle: {
 text: 'by scores',
 },

</code></pre>

This is a web based solution, but I would expect you could cater it to jQuery.mobile

blocks|key|44154|text|没有一个答案对我有帮助。我动态地改变图表数据，最高答案解决方案破坏了动画，并导致图表位置的跳跃。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|44155|我最终想出的解决办法是为图表包装器元素设置一些填充(在我的示例中，图表左侧的某些部分被隐藏，因此我提供了一些左侧填充)，然后将图表主元素溢出属性设置为可见。它工作正常，动画效果也很好。您可能需要对填充数值进行一些试验才能使其完美显示。|44156|<div+class="chart-wrapper">
+++
</div>|code-block|syntax|javascript|44157|和风格|44158|.chart-wrapper{
++padding-left:+20px;
}

.chart-wrapper+>+div:first-child{
++overflow:+visible+!important;
}|44159|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

None of the answers helped me. I dynamically change chart data and the top answer solution ruins the animations and causes a jump in the chart position.
The workaround that I finally came up with was to set some padding for the chart wrapper element (in my case some part of the chart to left was hidden, so I gave some left padding), and then set the chart main element overflow property to visible. It works and the animations are just fine. You may need some experimenting with padding value to get it perfectly displayed.
<pre><code>&lt;div class=&quot;chart-wrapper&quot;&gt;
 &lt;!-- high charts main element here --&gt;
&lt;/div&gt;
</code></pre>
and the style
<pre><code>.chart-wrapper{
 padding-left: 20px;
}

.chart-wrapper &gt; div:first-child{
 overflow: visible !important;
}
</code></pre>

blocks|key|43001|text|对我来说，我设置了图表宽度：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|43002|$('#container').highcharts({
++++chart:+{
++++++++backgroundColor:+'white',
++++++++**width:3000**,
++++++++.....+}|code-block|syntax|javascript|43003|和html+set+overflow:auto中的|offset|length|style|CODE|43004|<div+id="container"+style="**width:100%25;overflow:auto**;"+></div>|43005|entityMap^0|0|0|A|D|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@$I|T|J|U|K|L]]|9|@]|A|$]]|$1|M|3|N|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

for me, I set chart width:

<pre><code>$('#container').highcharts({
 chart: {
 backgroundColor: 'white',
 **width:3000**,
 ..... }
</code></pre>

and in html set <code>overflow:auto</code>

<pre><code>&lt;div id="container" style="**width:100%;overflow:auto**;" &gt;&lt;/div&gt;
</code></pre>

blocks|key|42992|text|我在这个问题上挣扎了很长时间，并找到了一个适合我的解决方案。关于我的设置的一些背景知识：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|42993|42994|将highcharts加载到我的网站上的某个选项卡上，该选项卡在登录网站时不可见。|ordered-list-item|42995|切换到该选项卡时，该图表位于|42996|分区之外|42997|因此，我将唯一ID附加到该特定选项卡上，我们将其称为tab5，然后绑定一个单击函数，该函数使用jQuery将容器div中的<svg>元素强制(这是重要的部分)设置为100%25：|offset|length|style|CODE|BOLD|42998|$('#tab5').bind('click',+function()+{
++++$('#container_div+svg').width('100%25');
});|code-block|syntax|javascript|42999|...and我已经恢复理智了。就目前而言。|43000|entityMap^0|0|0|0|0|0|Q|4|1P|5|1P|5|0|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|10|8|@]|9|@]|A|$]]|$1|C|3|D|5|E|7|11|8|@]|9|@]|A|$]]|$1|F|3|G|5|E|7|12|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|13|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|14|8|@$L|15|M|16|N|O]|$L|17|M|18|N|O]|$L|19|M|1A|N|P]]|9|@]|A|$]]|$1|Q|3|R|5|S|7|1B|8|@]|9|@]|A|$T|U]]|$1|V|3|W|5|6|7|1C|8|@]|9|@]|A|$]]|$1|X|3|-4|5|6|7|1D|8|@]|9|@]|A|$]]]|Y|$]]

I struggled with this for way too long, and found a solution that works for me. A little bit of background on my setup:

<ol>
<li>The highcharts chart was loading on a tab on my website that is not visible upon logging into the site.</li>
<li>When switching to that tab, the chart was well outside the div.</li>
</ol>

So, I attached a unique ID to that particular tab, we'll call it <code>tab5</code>, and then bound a click function that forced - and this is the important part - the <code>&lt;svg&gt;</code> element within the container div to 100% using jQuery:

<pre><code>$('#tab5').bind('click', function() {
 $('#container_div svg').width('100%');
});
</code></pre>

...and my sanity has been restored. For the moment.

blocks|key|2517704|text|请将width:100%25添加到图表容器。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2517705|希望这能解决overflow:hidden相关的问题。|2517706|classname{min-height:450px;width:+100%25;}|code-block|syntax|javascript|2517707|entityMap^0|2|A|0|6|F|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|R|8|@$9|S|A|T|B|C]]|D|@]|E|$]]|$1|H|3|I|5|J|7|U|8|@]|D|@]|E|$K|L]]|$1|M|3|-4|5|6|7|V|8|@]|D|@]|E|$]]]|N|$]]

Please add <code>width:100%</code> to chart container. 
Hope this will resolve <code>overflow:hidden</code> related issue.

<pre><code>classname{min-height:450px;width: 100%;}
</code></pre>

I'm using Highcharts with jQuery Mobile.

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

<pre class="lang-html prettyprint-override"><code>&lt;div style="padding-top: 5px; padding-bottom: 10px; position: relative; width: 100%;"&gt;
 &lt;div id="hg_graph" style="width: 100%"&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>

My highcharts graph is a basic graph taken from one of their examples where I have not set the chart <code>width</code> 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

<ol>
<li>I've identified the problem is that the dynamically generated <code>&lt;rect&gt;</code> 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:

<code>&lt;rect rx="5" ry="5" fill="#FFFFFF" x="0" y="0" **width="1920"** height="200"&gt;&lt;/rect&gt;</code></li>
<li>I tried to reproduce in JSFiddle, but it seems to work fine there, which really has me stumped. Here's my JSFiddle code: <a href="http://jsfiddle.net/meandnotyou/rMXnY" rel="noreferrer">http://jsfiddle.net/meandnotyou/rMXnY</a> </li>
</ol>

Highcharts width exceeds container div on first load

容器

jQuery

我正在使用jQuery移动版的Highcharts。我在jQM data-role="content"容器中绘制了一个面积图，在该容器中我有以下div：<div style="padding-top: 5px; padding-bottom: 10px; position: relative; width: 100%;"> <div id="hg_graph" style="width: 1

问Highcharts宽度在第一次加载时超过容器div
EN

回答 21

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Highcharts宽度在第一次加载时超过容器divEN

回答 21

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Highcharts宽度在第一次加载时超过容器div
EN