Как настроить метку Js Chart? - PullRequest
Новая
       19

Как настроить метку Js Chart?

0 голосов
/ 06 ноября 2018

Как сделать так, чтобы метка записывалась из области диаграммы? Там много места, но оставшаяся часть предложения метки обрезается из-за пробела.

Need to ajust the label

Это код диаграммы: 

<div class="col-md-5">
    <div class="col-md-10" style="padding-top:50px">

        <canvas id="caixa-chart" width="100" height="100"></canvas>
    </div>
</div>

//the chart
<script>
    var myChartcaixa = new Chart(document.getElementById("caixa-chart"), {
        type: 'pie',
        data: {
            labels:  @Html.Raw(Json.Encode(Model.Select(x => x.Descricao).ToArray())),
            datasets: [{
                data:  @Html.Raw(Json.Encode(Model.Select(x => x.Valor).ToArray())),
                backgroundColor: backgroudColor,
                borderWidth: 1,
            }]
        },
        options: {
            legend: false,
            fontsize: 11
        }
    });
</script>

1 Ответ

0 голосов
/ 06 ноября 2018

Чтобы переполнить пространство диаграммы, вам нужно добавить отступы к диаграмме, которые уменьшат его, но текст сможет достичь того, чего вы хотите. Вы можете настроить это в соответствии с размером вашего графика.

Документация

Вам необходимо изменить параметры, например так: 

options: {
  legend: false,
  fontsize: 11,
  layout: {
    padding: {
      right: 50,
      left: 50
    }
  }
}

Кажется, это проблема на github , так что вы можете пойти туда и отследить, когда они смогут это исправить, чтобы вам не нужно было добавлять отступы к вашему графику. Но вот что они сказали:

Это ограничение присуще ограничениям холста, не позволяющим рисовать что-либо вне самого элемента canvas.

Если встречается это ограничение, единственным удачным решением является использование пользовательских всплывающих подсказок, которые отображаются с использованием DOM, а не canvas.

Сопровождающие лица репо знают об этом ограничении и решили, что в настоящее время не существует выполнимого решения, которое не привело бы к очень значительным изменениям в работе подсказок. Возможно, что это будет решено в следующей основной версии Chart.js, но в настоящее время это не планируется. 

var myChartcaixa = new Chart(document.getElementById("caixa-chart"), {
  type: 'pie',
  data: {
    labels: ["Total general dos rendimientos (Origenes)", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 206, 86, 0.2)',
        'rgba(75, 192, 192, 0.2)',
        'rgba(153, 102, 255, 0.2)',
        'rgba(255, 159, 64, 0.2)'
      ],
      borderColor: [
        'rgba(255,99,132,1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)',
        'rgba(75, 192, 192, 1)',
        'rgba(153, 102, 255, 1)',
        'rgba(255, 159, 64, 1)'
      ],
      borderWidth: 1
    }]
  },
  options: {
    legend: false,
    fontsize: 11,
    layout: {
      padding: {
        right: 50,
        left: 50
      }
    }
  }
});
.chart-style {
  width: 300px;
  height: 300px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<div class="col-md-5">
  <div class="chart-style" style="padding-top:50px">

    <canvas id="caixa-chart" width="100" height="100"></canvas>
  </div>
</div>
...