是否可以在chartjs工具提示中获取换行符?
tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value %>"
我想用新行替换":"。
我尝试过
、u000D
、n
和<br />
,但都没有成功。
更新:由于chart.js
版本为2,我已更改了已接受的答案。
如果您使用的是2.0.0-beta2,您可以在那里使用工具提示回调和返回字符串数组。
tooltips: {
mode: 'single',
callbacks: {
afterBody: function(data) {
var multistringText = ['first string'];
// do some stuff
multistringText.push('another string');
return multistringText;
}
}
}
实际上所有的工具提示回调都支持多行文本,并且您可以像往常一样使用label
回调。默认情况下,它将数据标签渲染为工具提示文本。
引用自文件:
所有函数都必须返回字符串或字符串数组。字符串数组被视为多行文本。
示例代码:
tooltips: {
callbacks: {
label: (tooltipItem, data) => {
if (tooltipItem.index % 2)
return ['Item 1', 'Item 2', 'Item 3'];
else
return 'Single line';
}
}
}
您可以使用工具提示页脚回调,它也不会为每个列表呈现彩色正方形。
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'];
}
}
}
此时,无法在工具提示或轴标签中添加换行符。目前,开发人员正在讨论实现选项;讨论可以找到允许在轴标签中换行(github上的问题)。
这对我很有用。只需在工具提示中返回一个字符串数组作为标签即可。
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
let label = "Line 1";
let label2 = "Line 2";
return [label, label2];
}
}
}