Canvas width/height 未在 Internet Explorer 上更新

Question

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

我有这个非常标准的标记，它适用于 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）上它不起作用：它不仅不调整大小，而且生成的图形也很模糊。

我该如何解决？

编辑：

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

Answer 1

已解决。显然，这是由于 ng-if 实际上从 html 中删除了 canvas，因此，在使用新数据更新图形时，它不会更新大小。我用

创建了一个样式

visibility:hidden;

在其中并使用 ng-class 构造实际上只是隐藏了 canvas 而没有实际删除它。

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

Canvas width/height 未在 Internet Explorer 上更新

Canvas width/height not updating on internet explorer

internet-explorer

angularjs

chart.js

angular-chart