Несколько меток строк для диаграммы JS

У меня есть эта радарная диаграмма в chart.js, которая имеет 5 меток. Метки довольно длинные, поэтому я хочу показать их в две строки в HTML, но когда я использую «\n», это не создает новую строку!

Это мои этикетки:

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

Как видите, я пытаюсь указать «коммуникативные навыки» и «знания о продуктах и ​​процессах» в двух строках, но это показывает их в одной строке!

Как правильно это сделать?

ОБНОВЛЕНИЕ

Ярлыки находятся в теге script:

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
            }
        }
    }
});

javascript string html chart.js radar-chart
person Moe    schedule 11.02.2019    source источник
comment
Вы пробовали ‹br /›?   -  person Cavva79    schedule 11.02.2019
comment
Да, и это не работает, потому что оно находится в теге script.   -  person Moe    schedule 11.02.2019
comment
см. код в обновленном разделе объяснения. Спасибо   -  person Moe    schedule 12.02.2019
comment
посмотрите на ответ @Villa07. Я тестировал здесь jsfiddle.net/Cavva79/cg6oepLs/1.   -  person Cavva79    schedule 12.02.2019

Ответы (2)


arrow_upward
3
arrow_downward

Просто прочитайте документы https://www.chartjs.org/docs/latest/charts/radar.html вам нужно, чтобы ваш dataset имел свойство data, и это должен быть массив. Значения в массиве будут соответствовать значениям в метках по их порядковому номеру.

data: {
    labels: ['Running', 'Swimming', 'Eating', 'Cycling'],
    datasets: [{
        data: [20, 10, 4, 2]
    }]
}
person Thomas Valadez    schedule 11.02.2019

arrow_upward
4
arrow_downward

Я считаю, что здесь есть ответ на ваш вопрос: Новые строки ChartJS '\n' в метках оси X или отображение дополнительной информации вокруг диаграммы или всплывающей подсказки с помощью ChartJS V2

Решение состоит в том, чтобы передать вложенный массив в качестве входных данных для «меток», при этом каждый элемент вложенного массива представляет новую строку текста в вашей метке. Итак, в вашем случае должно работать следующее:

labels: [["COMMUNICATION","SKILL"], ["PRODUCT AND PROCESS","KNOWLEDGE"]]
person Villa07    schedule 12.02.2019