具有Bootstrap的Chart.JS全宽响应式甜甜圈图

我正在使用Angular.js变体，但Chart.js的核心是完全相同的。

我有一个简单的甜甜圈图，正在响应式Bootstrap容器中使用：

没有什么花哨。我的控制器选项是：

 $scope.mainDonut ={
    percentageInnerCutout : 90,
    responsive: true
}

似乎图表的宽度受到div高度的限制，对于我来说，由于某种原因，ChartJS将其神奇地设置为大约300px。呈现方式如下：

我希望高度能够响应我.col-xs-8的宽度，并填充整个div。我了解可以通过监视窗口调整大小事件来使用Javascript来做到这一点，但我想尽可能避免这种情况。

这里有什么解决方案吗？

如果要使其具有响应性并保持长宽比，请考虑以下两点：

1）在options：

{
   responsive: true,
   maintainAspectRatio: true, 
}

2）通过设置width和height属性来定义纵横比canvas。在您的情况下，它们可能相等：