ChartJs自定义tooltipTemplate

最新推荐文章于 2024-06-26 11:40:28 发布

yxw2014

最新推荐文章于 2024-06-26 11:40:28 发布

阅读量5.2k

点赞数

分类专栏：其它文章标签： ChartJs tooltipTemplate

本文链接：https://blog.csdn.net/yxw2014/article/details/39232709

版权

本文介绍了ChartJs这款轻量级的HTML5图表库，重点讲解如何自定义tooltipTemplate以实现换行等复杂需求。通过覆盖默认的draw方法，可以轻松定制提示框内容，但如果需要更高级的功能，可能需要考虑使用非canvas方案。

摘要由CSDN通过智能技术生成

ChartJs是一款轻量级图表工具，采用html5实现画图，convas对象的fillText只支持纯文本，所以连换行也不支持。如果要自定义tooltipTemplate，比如增加换行等，可以覆盖其原始方法draw，非常简单。如果要更复杂的，可能还得想其他办法，不采用convas实现。

Chart.defaults.global.scaleBeginAtZero = true;
Chart.defaults.global.tooltipTemplate="<%= label %>#Pageview:<%= value %>";
//Chart.defaults.global.tooltipTemplate= "<%= label %>:<%= value %>";
var Gdate= {};
Chart.Tooltip = Chart.Element.extend({
		draw : function(){

			var ctx = this.chart.ctx;

			ctx.font = Chart.helpers.fontString(this.fontSize,this.fontStyle,this.fontFamily);

			this.xAlign = "center";
			this.yAlign = "above";

			//Distance between the actual element.y position and the start of the tooltip caret
			var caretPadding = 2;

			var tooltipWidth = ctx.measureText(this.text).width/2 + 2*this.xPad