图表 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,
            },
          },
        },

我得到这张图：

I can't find and options to enable multlines labels or to apply wrap to text

Answer 1

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

This is described in the Chart.js documentation under Data Structures as follows: "In case you want multiline labels you can provide an array with each line as one entry in the array."

请查看下面的可运行代码片段，看看它是如何工作的。

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!' ]
]

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

chart js 3 radar, how to enabe multiline labels

javascript

radar-chart

webpack

chart.js