Chartjs 工具提示换行符

Chartjs Tooltip Line Breaks

提问人：jcuenod 提问时间：3/27/2015 最后编辑：jcuenod 更新时间：3/6/2020 访问量：47076

问：

是否可以在 chartjs 工具提示中获取换行符？

tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value %>"

我想用新行替换“：”。

我试过用 ，但无济于事。&#013;\u000D\n<br />

更新：我已经更改了我接受的答案，因为 chart.js 在版本 2 上。

JavaScript 图表 .js

评论

答：

6赞 Jarvl 3/27/2015 #1

此时，无法向工具提示或轴标签添加换行符。目前，开发人员正在讨论实现选项;讨论可以在允许换行轴标签（github 上的问题）中找到。

评论

2赞 jcuenod 11/29/2015
对于任何谷歌员工来说，都值得一试 github 链接;有一些建议（所以可能是一个解决方案）。
0赞 epalm 12/30/2016
我相信这是在 v2 中实现的 github.com/chartjs/Chart.js/pull/2704
1赞 MarioAraya 5/5/2017
它实现了，而不是添加 <br> 或 \n\r，您必须将每一行都放在返回的数组形式中。
2赞 Zoltan Szabo 9/16/2020
此外，项目符号出现在每行的前面。这似乎更像是一种解决方法。
103赞 Alexey Pavlov 2/17/2016 #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;
        }
    }
}

评论

1赞 Tom Wash 11/1/2016
自 2016 年 11 月 1 日起，这应该成为工具提示中换行符的可接受答案，如果使用 chartjs 2。（或角度图表）。
0赞 Flash 1/13/2021
关于这个问题的任何想法@AlexyPavlov stackoverflow.com/questions/65586632/......
12赞 ghanshyam shah 10/5/2017 #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'];
    }
  }
}

30赞 Tien Do 12/5/2017 #4

实际上，所有工具提示回调都支持多行文本，您可以像往常一样使用回调。默认情况下，它将数据标签呈现为工具提示文本。label

引自文档：

所有函数都必须返回字符串或字符串数组。字符串数组被视为多行文本。

示例代码：

tooltips: {
    callbacks: {
      label: (tooltipItem, data) => {
        if (tooltipItem.index % 2)
          return ['Item 1', 'Item 2', 'Item 3'];
        else
          return 'Single line';
      }
    }
  }

评论

1赞 Hlawuleka MAS 10/28/2020
很棒的解决方案！
1赞 Felipe Thomé 4/21/2022
很棒的回答，我的朋友。像魅力一样工作
5赞 Daniel 3/6/2020 #5

这对我有用。只需在工具提示中简单地返回一个字符串数组作为标签即可。

 tooltips: {
    callbacks: {
      label: function(tooltipItem, data) {
        let label = "Line 1";
        let label2 = "Line 2";
        return [label, label2];
      }
    }
  }

上一个：QVector 与 QList

下一个：指令 require 中的问号