高清风格问题。图表不会显示，因为它是编码的

Question

我使用Highchart库，遇到了一个问题。这是关于造型。

默认情况下，图表不会显示。但是，在更改浏览器窗口后，它会显示在正确的位置。

1）默认

下面的SVG图片涵盖了一半的chard。

2）更改浏览器窗口后

图表开始显示应该是。

我想知道这个问题是否与在浏览器上加载Highchart有关？

[编辑] 高清容器的HTML和CSS

<div id="4c9520e8-bac6-46de-a42a-77e91d62cff3" class="donut-chart" data-highcharts-chart="0”>
<div id="highcharts-gwjcais-0" class="highcharts-container " style="position: relative; overflow: hidden; width: 91px; height: 100px; text-align: left; line-height: normal; z-index: 0; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);”>
<svg version="1.1" class="highcharts-root" 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="91" height="100" viewBox="0 0 91 100"><desc>Created with Highcharts 5.0.14</desc><defs>
<clipPath id="highcharts-gwjcais-1”>
    <rect x="0" y="0" width="71" height="75" fill="none"></rect>
</clipPath></defs>
    <rect fill="none" class="highcharts-background" x="0" y="0" width="91" height="100" rx="0" ry="0"></rect>
    <rect fill="none" class="highcharts-plot-background" x="10" y="10" width="71" height="75"></rect><rect fill="none" class="highcharts-plot-border" x="10" y="10" width="71" height="75"></rect>
    <g class="highcharts-series-group"><g class="highcharts-series highcharts-series-0 highcharts-pie-series highcharts-color-undefined highcharts-tracker " transform="translate(10,10) scale(1 1)”>
    <path fill="rgb(238,56,42)" d="M 35.491018011717046 -6.59999908530483 A 44.1 44.1 0 0 1 74.1590282722946 58.72002669748383 L 70.29312544506514 56.59802402773545 A 39.69 39.69 0 0 0 35.49191621054534 -2.189999176774343 Z" transform="translate(0,0)" stroke="rgb(255,255,255)" stroke-width="1" stroke-linejoin="round" class="highcharts-point highcharts-color-0"></path>
    <path fill="rgb(234,234,234)" d="M 74.13778891962127 58.75867510930048 A 44.1 44.1 0 1 1 35.43874598473104 -6.5999574596803185 L 35.44487138625794 -2.189961713712286 A 39.69 39.69 0 1 0 70.27401002765913 56.632807598370434 Z" transform="translate(0,0)" stroke="rgb(255,255,255)" stroke-width="1" stroke-linejoin="round" class="highcharts-point highcharts-color-1"></path></g>
 <g class="highcharts-markers highcharts-series-0 highcharts-pie-series highcharts-color-undefined " transform="translate(10,10) scale(1 1)"></g></g>
 <g class="highcharts-legend"><rect fill="none" class="highcharts-legend-box" rx="0" ry="0" x="0" y="0" width="8" height="8" visibility="hidden"></rect><g><g></g></g></g></svg>
 <span style="font-family: &quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Arial, Helvetica, sans-serif; font-size: 18px; position: absolute; white-space: nowrap; margin-left: 0px; margin-top: 0px; left: 22px; top: 45px; color: rgb(51, 51, 51);" class="highcharts-title" transform="translate(0,0)”>
     <em class="active">1</em>
     <em class="disabled">/3</em>
 </span>
 </div>
 </div> 


.highcharts-container {
margin-top: -80px!important;
width: 200px;
height: 200px!important;
}

Answer 1

我发现margin在调整CSS后导致了定位问题。我为主要组件（.donut-chart）设置了“高度”，它开始工作正常。

我还用margin-top替换了容器中的top。

 .donut-chart {
  height: 100px;

  .highcharts-container {
    top: -20px !important;
    width: 200px;

    rect {
      width: 0;
    }
  }

  .highcharts-title {
    margin-top: -15px !important;
  }

}
}