Легенда Chart.js заняла слишком много места

1

У меня возникла проблема с легендой 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.

  • 0
    Вы пытались изменить положение легенды внизу или вверху?
  • 0
    Хм, я бы хотел, чтобы он был справа, так как он намного аккуратнее.
Теги:
chart.js
legend

3 ответа

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>
Поделиться
1

Длинная легенда nowrap - это известная проблема проверки https://github.com/chartjs/Chart.js/issues/3641

Может быть, они могут покрыть его в следующих выпусках. На данный момент решение состоит в том, чтобы удалить родную легенду и нарисовать свой собственный

Я создал этот плунж в качестве примера для диаграммы с графиком с пользовательской легендой https://embed.plnkr.co/5nuGS2KEV6hvESwGrOse/

Поделиться
  • 0
    Я создал легенду HTML, но это приводит к другой проблеме, которая заключается в том, что после того, как я свернул и развернул обратно самый внешний div, холст пропал, но не div легенды. Кроме того, после того, как я обернул холст с помощью div, пропала анимация для построения графика.
  • 0
    Анимация пошла из-за того, что у обертки есть float, так что эта разметка должна заставить анимацию работать <div class = "clearfix"> <div class = "float-left" style = "width: 70%"> <canvas id = "myChart "width =" 500 "height =" 300 "> </ canvas> </ div> <div class =" float-left "style =" width: 30% "> <div id =" js-legend "class =" chart-legend "> </ div> </ div> Мне непонятно уточнить это" после того, как я свернул и развернул обратно самый внешний div, холст пропал, но не легендарный div "
Показать ещё 1 комментарий
0

Это сообщение составляет 9 месяцев, но для тех, кто ищет решение, используйте следующее, и это сделает пирог/пончик больше в мобильном/отзывчивом виде

Chart.defaults.global.maintainAspectRatio = false;

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню