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;
          }
        }
      }
    }
  ]

此回调函数会在space的基础上拆分您的X轴标签，并以换行方式排列所有单词。您也可以对 Y 轴值使用相同的函数

React-Chartjs-2 - 如何使标签文本保持居中？

React-Chartjs-2 - How to make the label text stayed center wrapped?

reactjs

react-chartjs