帶有 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 神奇地將其設置為大約 300 像素。 這是它的呈現方式：

我希望高度能夠響應我的.col-xs-8的寬度，並填充整個 div。 我知道我可以通過觀察窗口調整大小事件來使用 Javascript 來做到這一點，但如果可能的話，我想避免這種情況。

這里有什么解決方案嗎？

Answer 1

如果您想讓它具有響應性並保持縱橫比，需要考慮兩件事：

1) 在options ：

{
   responsive: true,
   maintainAspectRatio: true, 
}

2) 通過為canvas設置width和height屬性來定義縱橫比。 在您的情況下，它們可能相等：

<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 神奇地將其設置為大約 300 像素。

這是畫布元素的默認寬度（ 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;
}

希望這會幫助你。