Chart.JS带有Bootstrap的全宽响应圆环图

Question

我使用Angular.js variant，但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神奇地被设置为大约300px   ChartJS出于某种原因。

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

这意味着您的responsive选项实际上并没有按照预期执行。最可能的原因是在初始化图表时包装元素没有（可测量的）大小。对于Angular，最常见的原因是在初始化图表时包装（父）元素未处于完全呈现状态（例如，它具有ng-show或它是隐藏的选项卡等。） 。

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

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

Answer 3

function initChart() {
    var canvas = document.getElementById('chart-canvas');
    canvas.width = parent.offsetWidth;
    canvas.height = parent.offsetWidth; ... 
}

+css parent block {
   width: 100%;
   min-height: 300px;
}

希望这会对你有所帮助。