Многострочные метки для диаграммы JS - PullRequest
Новая
       26

Многострочные метки для диаграммы JS

0 голосов
/ 11 февраля 2019

У меня есть этот радарный график в 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
            }
        }
    }
});

Ответы [ 2 ]

0 голосов
/ 12 февраля 2019

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

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

labels: [["COMMUNICATION","SKILL"], ["PRODUCT AND PROCESS","KNOWLEDGE"]]
0 голосов
/ 12 февраля 2019

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

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