javascript - 使 Chart.js 水平条标签多行

Question

只是想知道是否有任何方法可以使用 chart.js 为 y 轴设置水平条标签。这是我设置图表的方式:

<div class="box-body">
<canvas id="chart" style="position: relative; height: 300px;"></canvas>
</div>

Javascript:

    var ctx = document.getElementById('chart').getContext("2d");
    var options = {
        layout: {
            padding: {
              top: 5,
            }
        },
        responsive: true,
        animation: {
            animateScale: true,
            animateRotate: true
        },
    };

    var opt = {
      type: "horizontalBar",
      data: { 
        labels: label, 
        datasets: [{ 
        data: price, 
        }] 
      }, 
      options: options
    };

    if (chart) chart.destroy();
    chart= new Chart(ctx, opt);

    chart.update();

如您所见，第一个和第三个标签太长并且被切断。有没有办法让标签多行？

Answer 1

如果您想完全控制标签跨行分解的时间长度，您可以通过在嵌套数组中提供标签来指定断点。例如:

var chart = new Chart(ctx, {
...
  data: {
    labels: [["Label1 Line1:","Label1 Line2"],["Label2 Line1","Label2 Line2"]],
    datasets: [{
...
});