React-Chartjs-2 -如何让标签文本居中换行？

Question

我需要在这个图表中的文本保持居中换行，但它是水平的。有人遇到过chartjs的这个问题吗？

Picture of the graph

如果你使用了一定数量的字母，比如'dummy‘，它就会起作用。

  datasets: {
    labels: ["Dummy text 1", "Dummy text 2", "Dummy text 3"],
    datasets: [
      {
        label: "",
        data: [13, 11, 2],
        backgroundColor: [
          "rgba(0, 135, 136)",
          "rgba(0, 193, 189)",
          "rgba(255, 9, 49)"
        ],
        borderColor: [
          "rgba(0, 135, 136)",
          "rgba(0, 193, 189)",
          "rgba(255, 9, 49)"
        ],
        borderWidth: 1
      }
    ]

Answer 1

使用多数组和更改xaxes可以很容易地解决这个问题。下面是示例修复-

  labels: [
  ["Dummy", "Data 1"],
  ["Dummy", "Data 2"],
  ["Dummy", "Data 3"]
],

 xAxes: [
        {
          ticks: {
            maxRotation: 0,
            minRotation: 0
          },
      }
  ]

希望这能帮助某些人:)

Answer 2

scales: {
  xAxes: [
    {
      ticks: {
        callback: function (label, index, labels) {
          if (/\s/.test(label)) {
            return label.split(' ');
          } else {
            return label;
          }
        }
      }
    }
  ]

这个回调函数将在空间的基础上拆分X轴标签，并以包装的方式排列所有单词。您也可以对Y轴值使用相同的函数