如何增加甜甜圈或饼图的大小，并在图表JS中将图例保留在其旁边？

Question

这就是甜甜圈图和图例的外观

并且当我设置图例->显示为false时，这就是甜甜圈图的外观

我希望甜甜圈的大小和第二张照片一样大，并且旁边的图例就像第一张照片一样在右边。

请提出解决方案的建议

代码如下：

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

显示属性的值将确定元素的行为。默认情况下，该值设置为inline。在图表JS中，当您将显示值设置为false时，等同于将其显示为none。我还将使用画布的高度和宽度进行操作，因为这可以对元素进行分组。正如您提供的HTML和CSS片段一样，很难准确地确定布局问题。希望对您有所帮助。