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

【问题标题】：How to increase the size of the donut or pie chart and keep the legend next to it in chart JS?如何增加圆环图或饼图的大小并将图例保留在图表JS中？
【发布时间】：2020-05-16 11:48:51
【问题描述】：

这是带有图例的圆环图的外观

当我将 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,
                }
            },


    }
});

【问题讨论】：

标签： javascript css chart.js donut-chart chartjs-2.6.0

【解决方案1】：

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

【讨论】：

感谢您的回答。当我尝试使用画布的高度和宽度时，圆环图看起来被拉伸和像素化。这就是为什么我将 div 保留为正方形的原因。当我增加宽度时，它看起来只是被拉伸了。
我尝试了您的建议并使用了 div 的高度和宽度。我没有得到想要的结果，但仍然比最初展示的小甜甜圈好。感谢您的帮助
没问题。我也会尝试复制您的代码，但我将不得不假设一些属性，这些属性可能与您的代码不一致。如果您可以在 px f.e. 中写出所需的甜甜圈大小和图例大小，那将会很有帮助
甜甜圈大小为 400 像素 x 400 像素，图例大小不是特定的，它应该是可见的并且位于甜甜圈的右侧，就像离开浮动时两个 div 并排放置