javascript - Chart.js 图例占用太多空间

Question

我对chart.js 图例有一些问题。带有长文本的图例占用了太多空间，导致我的饼图尺寸减小:

另一个例子是这样的:

如果我得到更多的图例， donut chart 最终会变得越来越小。

我试图设置 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 之后， Canvas 丢失了，我只剩下图例 div。

Answer 1

首先，使用它的 native 属性设置 Canvas 的宽度和高度(使用 而不是 使用 style 属性)，如下所示:

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

注:宽度应该是高度的两倍

然后，设置 responsive 属性(property)给 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>