Chart.js图例占用太多空间

Question

我在chart.js图例方面遇到了一些问题。具有长文本的图例占用太多空间，从而导致饼图的尺寸减小：

另一个例子是这样的：

如果我有更多的传说，那么甜甜圈图最终将变得越来越小。

我试图设置maxWidth但无济于事。

var options = {
            layout: {
                padding: {
                  top: 5
                }
            },
            responsive: true,
            maintainAspectRatio: false,
            legend: {
                display: true,
                position: 'right',
                maxWidth: 100,
                onClick: null
            },
            animation: {
                animateScale: true,
                animateRotate: true
            },

        };

有任何想法吗？

我尝试按照此[解决方案] [3]创建html图例：

<div class="box-body" style="height:350px;">
<div class="float-left">
<div class="float-left" style="width:70%">

<canvas id="brandChart" style="position: relative; height: 350px;"></canvas>
</div>
<div class="float-left" style="width:30%">

<div id="js-legend" class="chart-legend">
</div>

</div>
</div>

它确实限制了图例的宽度，但是这又导致了另一个问题，就是我折叠并扩展了div之后，画布丢失了，而我只剩下了图例div。

Answer 1

首先，集合canvas-的宽度和高度使用它-的天然属性（不要不使用style属性），如下所示：

<canvas id="brandChart" width="700" height="350"></canvas>

^{注意：宽度应该是高度的两倍}

然后，在图表选项中将responsive属性设置false为：

options: {
   responsive: false,
   ...
}

？？？

<canvas id="brandChart" width="700" height="350"></canvas>

options: {
   responsive: false,
   ...
}