图表 js 的多行标签

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

我相信您正在寻找的内容在这里得到了解答： 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"]]