相关疑难解决方法(0)

我正在用AngularJS构建一个Ionic App.在这个应用程序中,我想要一个数据的折线图.昨天我问了一个关于这个问题的问题(Angular-Chart没有渲染任何内容),这个问题得到了解答,但现在又出现了一个新问题.

有时候图表会立即可见,但是当我在横向/纵向之间旋转屏幕时,它会在每次旋转时变大.有些时候图形根本不可见(图例除外),直到您旋转屏幕一段时间.

当我在iPhone上使用Web检查器检查时,我发现每次高度的HTML属性都会变大.CSS-height样式也是如此.

Web检查器中的HTML最初看起来像这样:(这是图表在非活动选项卡上的时候)

<div ng-show="graph.visible &amp;&amp; finishedLoading" class="ng-hide" style="">
  <div class="chart-container"><canvas class="chart chart-line" data="graph.data" labels="graph.labels" options="graph.options" series="graph.series" colours="graph.colours" getcolour="graph.getColour" click="graph.click" hover="graph.hover" legend="graph.legend" width="576" height="424" style="width: 288px; height: 212px;">
  </canvas><chart-legend><ul class="line-legend"><li><span style="background-color:rgba(70,191,189,1)"></span>Waarde</li><li><span style="background-color:rgba(247,70,74,1)"></span>Bovengrens</li><li><span style="background-color:rgba(253,180,92,1)"></span>Ondergrens</li></ul></chart-legend></div>
</div>

使该选项卡激活后,其HTML如下所示:

<div ng-show="graph.visible &amp;&amp; finishedLoading" class="" style="">
  <div class="chart-container"><canvas class="chart chart-line" data="graph.data" labels="graph.labels" options="graph.options" series="graph.series" colours="graph.colours" getcolour="graph.getColour" click="graph.click" hover="graph.hover" legend="graph.legend" width="576" height="424" style="width: 288px; height: 212px;">
  </canvas><chart-legend><ul class="line-legend"><li><span style="background-color:rgba(70,191,189,1)"></span>Waarde</li><li><span style="background-color:rgba(247,70,74,1)"></span>Bovengrens</li><li><span style="background-color:rgba(253,180,92,1)"></span>Ondergrens</li></ul></chart-legend></div>
</div>

这次图表立即可见,但情况并非总是如此.我认为这与网络检查员有关.如果我没有打开Web检查器,则最初只能看到图例.

旋转到横向并返回到肖像四次后,HTML看起来像这样:

<div ng-show="graph.visible &amp;&amp; finishedLoading" class="" style="">
  <div class="chart-container"><canvas …