如何增加圓環圖或餅圖的大小並將圖例保留在圖表JS中？

Question

這就是帶有圖例的圓環圖的外觀

當我將 legend -> display 設置為 false 時，這就是甜甜圈圖的外觀

我希望甜甜圈的大小和第二張照片一樣大，右邊的圖例和第一張照片一樣。

請建議如何 go 關於這個

代碼如下：

CSS：

#monthly_chart{
            border: 0px solid black;
            height: 300px;
            width: 300px;
            margin-left: auto;
            margin-right: auto;
        }

HTML：

<div id="monthly_chart">
    <canvas id="monthly_chart_content"></canvas>
</div>

Javascript：

var ctx = document.getElementById('monthly_chart_content').getContext('2d');
  var chart = new Chart(ctx, {

    type: 'doughnut',

    data: {
        labels: client_data,
        datasets: [{
            label: 'Grey Inwards',
           backgroundColor: ["#1b3862","#0078c6","#00552c","#2d9a27","#fcfa43","#fbbe00","#fe7d00","#e73300","#cb247f","#8636ca","#d3d3d3","#31343d"],
            data: grey_data,

        }]
    },

    // Configuration options go here
    options: {
        aspectRatio: 1,
        responsive: false,
        maintainAspectRatio: true,
        cutoutPercentage: 70,
        legend: {
            display: true,
            position: 'right',
            labels: {
                boxWidth: 20,
                }
            },


    }
});

Answer 1

display 屬性的值將決定元素的行為。 默認情況下，該值設置為內聯。 在圖表 JS 中，當您將顯示值設置為 false 時，它等於將其顯示為無。 我還將使用 canvas 高度和寬度進行操作，因為這可能會產生對元素進行分組的效果。 由於您提供了 HTML 和 CSS 的片段，因此很難准確確定您的布局問題。 我希望這有幫助。