Chart.js 标签自动换行 - Javascript

当使用 Chart.js 绘制图表时，如果图表上的标签过长，就可能会出现标签被截断的问题。这时候，我们可以使用 Chart.js 提供的一些配置选项来实现标签自动换行。

配置选项

使用 Chart.js 绘制图表时，可以通过以下两个配置选项来实现标签自动换行：

• maxTicksLimit：指定最多显示多少个刻度标签。
• callback：一个回调函数，用于自定义刻度标签的显示方式。其中，可以使用 Canvas API 来进行文本换行操作。

代码示例

var chart = new Chart(document.getElementById('myChart'), {
  type: 'bar',
  data: {
    labels: ['标签1', '标签2', '标签3', '标签4', '标签5', '标签6', '标签7', '标签8', '标签9'],
    datasets: [{
      label: '数据集1',
      data: [12, 19, 3, 5, 2, 3, 7, 8, 14],
    }]
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }],
      xAxes: [{
        ticks: {
          maxTicksLimit: 5,
          callback: function(value) {
            if (value.length > 5) {
              return value.substring(0, 5) + '...';
            } else {
              return value;
            }
          }
        }
      }]
    }
  }
});

在上面的代码中，maxTicksLimit 配置项设置为 5，表示最多显示 5 个 x 轴刻度标签。而 callback 配置项则用于自定义刻度标签的显示方式。在这个例子中，如果一个刻度标签的长度超过了 5，就将其截取前 5 个字符并添加省略号。这样，在图表上，长度较长的标签就会自动换行显示，从而避免标签被截断。