圖表js的多行標簽

Question

我在chart.js中有這個雷達圖表，它有5個標簽。 標簽很長，所以我想在HTML中用兩行顯示它們但是當我使用“\\ n”時它不會換行！

這些是我的標簽：

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

正如你所看到的那樣，我試圖將“溝通技巧”和“產品與流程知識”分為兩行，但它將它們顯示在一行中！

這樣做的正確方法是什么？

UPDATE

標簽位於腳本標記中：

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'在X軸標簽中或使用ChartJS V2在圖表或工具提示周圍顯示更多信息

解決方案是將嵌套數組作為輸入傳遞給“標簽” - 嵌套數組中的每個元素代表標簽中的新文本行。 所以在你的情況下，以下應該工作：

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