Question

如何使标签写出图表空间？空间很大，但是标签句子的其余部分由于空间而被切除。

这是图表代码：

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

Answer 1

为了溢出图表空间，您需要在图表中添加填充，这将使其变小，但是文本将能够实现您想要的。您可以根据图表的大小进行调整。

Documentation

您需要像这样更改选项：

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

这似乎是issue on github，因此您可以去那里跟踪他们何时可以修复它，因此您无需在图表中添加填充。但这就是他们说的：

此限制是由于画布的限制所致，即无法在画布元素本身之外绘制任何内容。

如果遇到此限制，唯一可取的解决方法是使用自定义工具提示，该提示使用DOM而不是画布进行渲染。

回购协议的维护者已经意识到了这一限制，并决定当前没有可行的解决方案，而这些解决方案不会对工具提示的工作方式进行重大更改。可能会在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>

如何调整Js Chart的标签？

1 个答案: