Question

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

这些是我的标签：

labels: ["COMMUNICATION \n SKILL ", "PRODUCT AND PROCESS \n 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: [["COMMUNICATION","SKILL"], ["PRODUCT AND PROCESS","KNOWLEDGE"]]

图表JS的多条线标签

2 个答案: