[英]Chartjs Tooltip Line Breaks
Is it possible to get line breaks in chartjs tooltips?是否可以在 chartjs 工具提示中换行?
tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value %>"
I want to replace ": " with a new line.我想用新行替换“:”。
I've tried with 
我试过

, \
, \\n
and <br />
to no avail. ,
\
, \\n
和<br />
无济于事。
Update: I have changed my accepted answer now that chart.js
is on version 2.更新:我已经更改了我接受的答案,因为
chart.js
是第 2 版。
If you are using 2.0.0-beta2, you can use tooltip callback and return array of strings there.如果您使用的是 2.0.0-beta2,您可以使用工具提示回调并在那里返回字符串数组。
tooltips: {
mode: 'single',
callbacks: {
afterBody: function(data) {
var multistringText = ['first string'];
// do some stuff
multistringText.push('another string');
return multistringText;
}
}
}
Actually all tool-tip callbacks support multiple lines of text, and you can use label
callback as usual.实际上所有工具提示回调都支持多行文本,您可以照常使用
label
回调。 It renders data label as tool-tip text by default.默认情况下,它将数据标签呈现为工具提示文本。
Quoted from documentation :引用自文档:
All functions must return either a string or an array of strings.
所有函数都必须返回一个字符串或一个字符串数组。 Arrays of strings are treated as multiple lines of text.
字符串数组被视为多行文本。
Example code:示例代码:
tooltips: {
callbacks: {
label: (tooltipItem, data) => {
if (tooltipItem.index % 2)
return ['Item 1', 'Item 2', 'Item 3'];
else
return 'Single line';
}
}
}
You can use tooltips footer callback,it will also not render coloured square for each list.您可以使用工具提示页脚回调,它也不会为每个列表呈现彩色方块。
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']; } } }
At this point in time, it's not possible to add line breaks to a tooltip or axis label.目前,无法向工具提示或轴标签添加换行符。 Right now the developers are discussion implementation options;
现在开发人员正在讨论实现选项; the discussion can be found Allow wrapping in axis labels (issue on github) .
可以在Allow wrapping in axis labels (issue on github) 中找到讨论。
This worked for me.这对我有用。 Just simply return an array of strings as labels in tooltips.
只需简单地返回一个字符串数组作为工具提示中的标签。
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
let label = "Line 1";
let label2 = "Line 2";
return [label, label2];
}
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.