Highcharts屏幕配件问题

Question

我在代码中生成高级图表。在第一次被调用时，以下是生成的svg代码

<svg version="1.1" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Arial, Helvetica, sans-serif;font-size:12px;" xmlns="http://www.w3.org/2000/svg" width="690" height="475">

因此，在svg中生成的默认宽度为690，该值使图表不在我的屏幕中。按下按钮再次生成相同的图表后，生成的svg代码为

<svg version="1.1" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Arial, Helvetica, sans-serif;font-size:12px;" xmlns="http://www.w3.org/2000/svg" width="491" height="475">

现在这个491的宽度非常适合我的屏幕。有什么方法可以确保图表第一次适合我的屏幕？我该如何修复它的宽度？如果我使用

chart: {
       width: 400
                        }

然后它在ipad上不起作用

第二次显示（正确）

第一次显示（不正确，因容器而被切断）

Answer 1

您通常会让容器决定宽度和高度，因此您应该对container-div的样式应用正确的宽度/高度限制。例如：

<div id="container" style="width: 400px; height: 400px;"></div>

您可能还想使用min-width，max-width，min-height和max-height，具体取决于您的要求。您可以试用this JSFiddle demonstration。

要使图表水平居中，您可以将margin: 0 auto添加到您的样式中。

从the API您可以看到：

  

默认情况下，宽度是根据包含元素的偏移宽度计算的。

     

默认情况下，高度是根据包含元素的偏移高度计算的，如果包含元素的高度为0，则计算为400像素。