图表 js 3 雷达，如何启用多行标签

Question

我正在使用 chart js 3 来绘制雷达图。

我正在从后端获取标签文本。

我正在尝试使标签具有响应性并应用多行和换行。

我目前的配置是：

const myChart = new Chart(ctx, {
        type: "radar",
        data: {
          labels: labels,
          datasets: [
          ...

我添加了一个选项列表以使图形响应并提供自定义样式：

options: {
          scales: {
            r: {
              pointLabels: {
                font: {
                  fontSize: 14,
                  fontFamily: "Roboto",
                },
              },
            },
          },
          maintainAspectRatio: false,
          responsive: true,
          layout: {
            padding: 0,
          },
          tooltips: {
            enabled: false,
          },
          plugins: {
            title: {
              display: false,
              text: "Les évaluations",
            },
            legend: {
              display: false,
            },
          },
        },

我得到这张图：

我找不到启用多行标签或对文本应用换行的选项

Answer 1

您可以将labels 定义为字符串数组。

这在 Data Structures 下的 Chart.js 文档中描述如下：“如果您需要多行标签，您可以提供一个数组，其中每一行作为数组中的一个条目。”

请看下面的可运行代码sn-p，看看它是如何工作的。

new Chart('myChart', {
  type: 'radar',
  data: {
    labels: [['Deep', 'Red'], ['Nice', 'Blue'], ['Cute', 'Yellow']],
    datasets: [{
      label: 'My Dataset',
      data: [300, 250, 280],
      borderColor: '#FF6384'
    }]
  },
  options: {
    responsive: false
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js"></script>
<canvas id="myChart" height="200"></canvas>

Answer 2

其实你的变量labels是一个数组，包含这样的字符串：["Je note la qualité du pitch...", "Je donne ma voix pour sélectionner cette startup, sous réserve"]

你要做的是制作一个包含相同句子但拆分为子数组的二维数组：[["Je note la qualité", "du pitch..."], ["Je donne ma voix", "pour sélectionner", "cette startup, sous réserve"]]

通过这样做，你应该有多行句子，将你的字符串分成多个字符串（块），这是一个快速实现： const newLabels = labels.map(l => l.match(/.{1,n}/g)) 其中 n 是每行的最大长度。

如果你想按字数分割你的字符串，试试这个分块实现：

const splitString = (text, chunkSize) => {
    const arr = text.split(" ")
    const output = []

    for (let i = 0, length = arr.length; i < length; i += chunkSize) {
        output.push(arr.slice(i, i + chunkSize))
    }

    return output
}

console.log(splitString("Hi this is a sample string that I would like to break down into an array!", 3))

你应该得到这个：

[
  [ 'Hi', 'this', 'is' ],
  [ 'a', 'sample', 'string' ],
  [ 'that', 'I', 'would' ],
  [ 'like', 'to', 'break' ],
  [ 'down', 'into', 'an' ],
  [ 'array!' ]
]