Разбивка строк подсказки Chartjs
Можно ли получить разрывы строк в подсказках chartjs?
tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value %>"
Я хочу заменить ":" на новую строку.
Я пробовал с 
, \u000D
, \n
и <br />
безрезультатно.
Обновление: Теперь я изменил принятый ответ, что chart.js
находится на версии 2. p >
Ответы
Ответ 1
Если вы используете 2.0.0-beta2, вы можете использовать обратный вызов tooltip и возвращать массив строк.
tooltips: {
mode: 'single',
callbacks: {
afterBody: function(data) {
var multistringText = ['first string'];
// do some stuff
multistringText.push('another string');
return multistringText;
}
}
}
Ответ 2
В этот момент времени невозможно добавить разрывы строк во всплывающую подсказку или метку оси. В настоящее время разработчиками являются варианты реализации обсуждения; обсуждение можно найти Разрешить обертывание меток осей (проблема с github).
Ответ 3
Вы можете использовать обратный вызов нижнего колонтитула всплывающих подсказок, он также не будет отображать цветной квадрат для каждого списка.
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
let label = data.datasets[tooltipItem.datasetIndex].label;
let value = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
return label + ': ' + value;
},
footer: function(tooltipItems, data) {
return ['new line', 'another line'];
}
}
}
Ответ 4
Actuall все обратные вызовы всплывающих подсказок поддерживают несколько строк текста, и вы можете использовать обратный вызов label
, как обычно. Он по умолчанию помещает метку данных в текст подсказки.
Цитата из документация:
Все функции должны возвращать либо строку, либо массив строк. Массивы строк рассматриваются как несколько строк текста.
Пример кода:
tooltips: {
callbacks: {
label: (tooltipItem, data) => {
if (tooltipItem.index % 2)
return ['Item 1', 'Item 2', 'Item 3'];
else
return 'Single line';
}
}
}