angularjs - Internet Explorer 上的画布宽度/高度未更新

Question

我正在使用 angularchart 在我的 Web 应用程序中创建图表。

我有这个非常标准的标记，它适用于 firefox 和 chrome：

<div ng-if="visible">
    <canvas height="20%" width="80%" style="width: 80%; height: 20%;" id="line_general" class="chart chart-line" chart-data="lineData" chart-legend="true" chart-colours="colours"
    chart-labels="lineLabels" chart-series="lineSeries"/>
</div>

它适用于每种屏幕尺寸，如果您缩小屏幕，它会自动调整尺寸。但是，在 Internet Explorer（我的版本是 10）上它不起作用：它不仅不会调整大小，而且结果图也很模糊。

我该如何解决？

编辑：

有趣的是，罪魁祸首似乎是外部 div 中的 ng-if ！通过删除它，它似乎在 ie 上也能正常工作。尽管如此，我需要那个 ng-if 所以简单地删除它并不能解决我的问题......

Answer 1

解决了。显然这是由于 ng-if 实际上从 html 中删除了画布，因此，当使用新数据更新图形时，它在某种程度上不会更新大小。我创造了一种风格

visibility:hidden;

在其中并使用 ng-class 构造实际上只是隐藏画布而不实际删除它。

<div ng-class="visible==true ? 'chart-container' : 'chart-hidden'>
  <canvas .../>
</div>