Chartjs 工具提示换行符答案

【问题标题】：Chartjs Tooltip Line BreaksChartjs 工具提示换行符
【发布时间】：2015-05-31 21:10:07
【问题描述】：

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

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

我想用新的一行替换“:”。

我尝试了&#013;、\u000D、\n 和<br />，但无济于事。

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

【问题讨论】：

标签： javascript chart.js

【解决方案1】：

如果您使用的是 2.0.0-beta2，则可以使用工具提示回调并在此处返回字符串数组。

tooltips: {
    mode: 'single',
    callbacks: {
        afterBody: function(data) {
            var multistringText = ['first string'];
            // do some stuff
            multistringText.push('another string');

            return multistringText;
        }
    }
}

【讨论】：

关于这个问题的任何想法@AlexyPavlov stackoverflow.com/questions/65586632/…

【解决方案2】：

其实所有的tool-tip回调都支持多行文本，你可以照常使用label回调。默认情况下，它将数据标签呈现为工具提示文本。

引用自documentation：

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

示例代码：

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

【讨论】：

很好的解决方案！

【解决方案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】：

目前，无法向工具提示或轴标签添加换行符。现在开发人员正在讨论实现选项；可以在Allow wrapping in axis labels (issue on github)找到讨论。

【讨论】：

对于任何谷歌用户来说，看看这个 github 链接是值得的；有一些建议（所以可能是你的解决方案）。
我相信这是在 v2 中实现的 github.com/chartjs/Chart.js/pull/2704
它已实现，而不是添加
或 \n\r 您必须将每一行放在返回的数组形式中。
每行前面也会出现项目符号。这似乎更像是一种解决方法。

【解决方案5】：

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

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

【讨论】：