ucharts提示窗tooltips自定义format配置,换行展示标题

ucharts提示窗tooltips默认显示格式,显示横轴数据+类别+纵轴数据,如下图所示
在这里插入图片描述
现在我们希望横轴类别显示为在第一行显示为标题:
在这里插入图片描述
修改ucharts中的config-ucharts.js和u-charts.js
在这里插入图片描述
config-ucharts.js中自定义format配置
在这里插入图片描述

"myTooltip":function(item, category){
	return item.name+" : "+item.data.toFixed(2)
}

在u-charts.js中textList最前头插入一个数据
在这里插入图片描述
记得在使用的时候为标签添加相应属性
在这里插入图片描述

  var myTitleText = null;
  var textList = seriesData.map(function(item) {
    let titleText = null;
    if (opts.categories && opts.categories.length>0) {
      titleText = categories[index];
    };
	myTitleText = titleText;
    return {
      text: option.formatter ? option.formatter(item, titleText, index, opts) : item.name + ': ' + item.data,
      color: item.color,
      legendShape: opts.extra.tooltip.legendShape == 'auto'? item.legendShape : opts.extra.tooltip.legendShape
    };
  });
  textList.unshift({text:myTitleText,color:null});

参考:ucharts tooltip弹窗自定义换行:https://www.bbsmax.com/A/WpdKNAEr5V/

  • 2
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值