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
            },

        };

有任何想法吗？

我试着按照这个 [solution][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。

原文由 QWERTY 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

首先，使用它的 原生 属性设置画布的 宽度 和高度（不要 使用--- style ），如下所示：

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

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

然后，在您的图表选项中将 responsive 属性设置为 false ，如下所示：

 options: {
   responsive: false,
   ...
}

ᴅᴇᴍᴏ

 var chart = new Chart(brandChart, {
   type: 'doughnut',
   data: {
      labels: ['Etronin Home Appliances Service & trading Pte Ltd', 'Giant'],
      datasets: [{
         data: [30, 70],
         backgroundColor: ['#2196f3', '#4caf50']
      }]
   },
   options: {
      responsive: false,
      legend: {
         display: true,
         position: 'right',
         onClick: null
      },
   }
});

 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="brandChart" width="700" height="350"></canvas>

原文由 ɢʀᴜɴᴛ 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

Long legend nowrap 是一个已知问题检查 https://github.com/chartjs/Chart.js/issues/3641

也许他们可以在下一个版本中涵盖它。现在的解决方案是删除本地图例并绘制您的自定义图例

我创建了这个 plunk 作为带有自定义图例的 doghnut 图表的示例 https://embed.plnkr.co/5nuGS2KEV6hvESwGrOse/

原文由 Mina paulis 发布，翻译遵循 CC BY-SA 3.0 许可协议