Chartjs工具提示换行

Chartjs Tooltip Line Breaks

本文关键字：换行 工具提示 Chartjs      更新时间：2023-09-26

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

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

我想用新行替换"："。

我尝试过&#013;、'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];
      }
    }
  }
相关文章：