Javascript Chart.JS全宽响应甜甜圈图表，带引导

我使用的是，但是Chart.js的核心是完全相同的

我有一个简单的油炸圈饼图，我在一个响应引导容器中使用它：

<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>

图表的宽度似乎被限制在div的任何高度，对于我来说，ChartJS出于某种原因神奇地将div设置为300px左右。下面是它的渲染方式：

我希望高度能够响应我的

.col-xs-8

的宽度，并填充整个分区。我知道我可以通过观察窗口大小事件来使用Javascript，但如果可能的话，我希望避免这种情况

这里有什么解决办法吗

图表的宽度似乎被限制在任何高度 div的最大值是，对我来说，它神奇地被 出于某种原因

这是canvas元素（）的默认宽度

这意味着您的

响应式

选项实际上并没有做它应该做的事情。最可能的原因是，在初始化图表时，包装元素没有（可测量的）大小。对于Angular，最常见的原因是图表初始化时包装（父）元素未处于完全呈现状态（例如，它具有

ng show

或隐藏选项卡等）

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

---

---

注意-即使不在调整窗口大小时调整图表大小，chart.js也会自动为所有配置为响应的图表调整大小。

如果要使其响应并保留纵横比，需要考虑两件事：

1） 在

选项中

：

{
   responsive: true,
   maintainAspectRatio: true, 
}

2） 通过将

宽度

和

高度

属性设置到

画布

来定义纵横比。在您的情况下，它们可能是相等的：

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

---

希望这能对您有所帮助。

当我尝试更新活动的100%宽度图表时，它会变得模糊和中断。我用这种方法，工作起来很有魅力。谢谢

ctx.canvas.width=document.querySelector（“.chart”）.offsetWidth；ctx.canvas.height=document.querySelector（“.chart”）.offsetHeight；chart.update（）
<canvas id="doughnut" 
    width="100"
    height="100"
    chart-data="data" 
    chart-labels="labels" 
    chart-options="mainDonut" 
    class="chart chart-doughnut">
</canvas>

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

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