Chart.js传奇占据了太多空间 [英] Chart.js legend took up too much spaces

问题描述

我在使用chart.js传奇时遇到了一些问题。长文本的图例占用太多空间，导致我的饼图大小减小：

I was having some problem with chart.js legend. The legend with long text took up too much spaces which resulting in the reduce in the size of my pie chart:

另一个例子是：

如果我有更多的传奇，圆环图最终会变得越来越小。

If I got more legend, the doughnut chart will eventually becomes smaller and smaller.

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

I tried to set maxWidth but to no avail.

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

        };

任何想法？谢谢你提前！

Any ideas? Thanks in advanced!

我试着按照这个[解决方案] [3]创建一个html图例：

I tried to follow this [solution][3] to create a html legend:

<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。

It did restricted the width for legend, but then this lead to another problem which is after I collapsed and expanded the div, the canvas just went missing and I am only left with the legend div.

推荐答案

首先，设置画布的宽度和高度使用的原生属性（不使用 style 属性），像这样：

First off, set canvas­'s width and height using it­'s native attributes (do not use style attribute), like so :

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

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

^{note: width should be twice the height}

然后，将 自适应 属性设置为 false ：

Then, set responsive property to false in your chart options, as such :

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>

这篇关于Chart.js传奇占据了太多空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！