javascript - Highcharts 屏幕适配问题

Question

我正在我的代码中生成 Highcharts 。第一次调用时，以下是生成的 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

您通常会让容器决定宽度和高度，因此您应该对容器 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你可以读到:

By default the width is calculated from the offset width of the containing element.

By default the height is calculated from the offset height of the containing element, or 400 pixels if the containing element's height is 0.