Javascript Chartjs 工具提示换行符
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29302392/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Chartjs Tooltip Line Breaks
提问by jcuenod
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 
, \u000D, \nand <br />to no avail.
我已经试过
，\u000D，\n和<br />无济于事。
Update:I have changed my accepted answer now that chart.jsis on version 2.
更新：我已经更改了我现在接受的答案，chart.js即版本 2。
回答by Alexey Pavlov
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;
}
}
}
回答by Tien Do
Actually all tool-tip callbacks support multiple lines of text, and you can use labelcallback as usual. It renders data label as tool-tip text by default.
实际上所有工具提示回调都支持多行文本，您可以label照常使用回调。默认情况下，它将数据标签呈现为工具提示文本。
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';
}
}
}
回答by Jarvl
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) 中找到讨论。
回答by ghanshyam shah
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'];
}
}
}回答by Daniel
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];
}
}
}
