热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

Chartjs工具提示换行符

如何解决《Chartjs工具提示换行符》经验,为你挑选了4个好方法。

是否有可能在chartjs工具提示中获得换行符?

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

我想用新行替换":".

我已经试过&#013;,\u000D,\n
无济于事.

更新:我已经更改了我现在接受的答案,chart.js即版本2.



1> Alexey Pavl..:

如果您使用的是2.0.0-beta2,则可以使用工具提示回调并返回字符串数组.

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

            return multistringText;
        }
    }
}



2> Jarvl..:

此时,无法在工具提示或轴标签上添加换行符.现在开发人员是讨论实施选项; 讨论可以找到允许换行轴标签(在github上发布).


对于任何googlers,值得查看github链接; 有一些建议(所以可能是你的解决方案).

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> Tien Do..:

实际上,所有工具提示回调都支持多行文本,您可以label照常使用回调。默认情况下,它将数据标签显示为工具提示文本。

引用文档:

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

示例代码:

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


推荐阅读
author-avatar
缅甸环球国际
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有