图表js的多行标签

Question

我在 chart.js 中有这张雷达图，它有 5 个标签。标签很长，所以我想在 HTML 中分两行显示它们，但是当我使用“\n”时，它不会换行！

这些是我的标签：

labels: ["COMMUNICATION \n SKILL ", "PRODUCT AND PROCESS \n KNOWLEDGE "]

如您所见，我试图将 "communication skill" 和 "product and process knowledge" 都放在两行中，但它显示在一行中！

正确的做法是什么？

更新

标签在脚本标签中：

var myChart = new Chart(ctx, {
    type: 'radar',
    data: {
        labels: ["COMMUNICATION  SKILL ", "PRODUCT AND PROCESS KNOWLEDGE "],
        datasets: [{
            label: labs,
            data: dps,
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
            ],
            borderWidth: 1
        },
    options: {
        maintainAspectRatio: true,
        scale: {
            ticks:{
                beginAtZero: true,
                max: 4
            }
        }
    }
});

Answer 1

只需阅读文档 https://www.chartjs.org/docs/latest/charts/radar.html 你需要你的 dataset 来拥有属性 data 并且那应该是一个数组。数组中的值将通过索引号与标签中的值相对应。

data: {
    labels: ['Running', 'Swimming', 'Eating', 'Cycling'],
    datasets: [{
        data: [20, 10, 4, 2]
    }]
}

Answer 2

我相信您正在寻找的答案在这里： ChartJS New Lines '\n' in X axis Labels or Displaying More Information Around Chart or Tooltip with ChartJS V2

解决方案是将嵌套数组作为输入传递给 'labels' - 嵌套数组中的每个元素代表标签中的一行新文本。所以在你的情况下，以下应该有效：

labels: [["COMMUNICATION","SKILL"], ["PRODUCT AND PROCESS","KNOWLEDGE"]]

图表js的多行标签

Multiple line labels for chart js

html

javascript

string

radar-chart

chart.js