如何增加圆环图或饼图的大小并在图表 JS 中将图例保留在它旁边？

Question

这是圆环图与图例的外观

当我将 legend -> display 设置为 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

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

如何增加圆环图或饼图的大小并在图表 JS 中将图例保留在它旁边？

How to increase the size of the donut or pie chart and keep the legend next to it in chart JS?

javascript

css

chart.js

donut-chart

chartjs-2.6.0