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

Question

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

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

<div class="row">
    <div class="col-xs-8">
       <div class="chart-container">
          <canvas id="doughnut" 
                  chart-data="data" 
                  chart-labels="labels" 
                  chart-options="mainDonut" 
                  class="chart chart-doughnut">
          </canvas>
       </div>
    </div>
</div>

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

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

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

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

这里有什么解决方案吗？

Answer 1

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

1）在options：

{
   responsive: true,
   maintainAspectRatio: true, 
}

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

<canvas id="doughnut" 
    width="100"
    height="100"
    chart-data="data" 
    chart-labels="labels" 
    chart-options="mainDonut" 
    class="chart chart-doughnut">
</canvas>

Answer 2

图表的宽度似乎受限于 div 的高度，对我来说，出于某种原因，ChartJS 神奇地将其设置为大约 300px。

这是画布元素的默认宽度（http://www.w3.org/TR/html5/scripting-1.html#the-canvas-element）。

这意味着您的responsive选择实际上并没有发挥应有的作用。最可能的原因是图表初始化时，包装元素没有（可测量的）大小。对于 Angular，最常见的原因是初始化图表时包装（父）元素未处于完全渲染状态（例如，它有一个ng-show或它是一个隐藏选项卡等）。

父元素上的 CSS 也可能是一个问题 - 例如，父元素没有大小（但查看你的标记，这似乎有点不太可能）

注意 - 即使您没有在窗口大小调整时调整图表大小，Chart.js 也会自动为所有配置为响应式的图表执行此操作。