ChartJs自定义tooltipTemplate

最新推荐文章于 2025-05-30 09:04:28 发布

yxw2014

最新推荐文章于 2025-05-30 09:04:28 发布

阅读量5.3k

点赞数

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/yxw2014/article/details/39232709

其它专栏收录该内容

7 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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.xPadding+ 130,
				tooltipRectHeight = 2*this.fontSize + 4*this.yPadding,
				tooltipHeight = tooltipRectHeight + this.caretHeight + caretPadding;

			if (this.x + tooltipWidth/2 >this.chart.width){
				this.xAlign = "left";
			} else if (this.x - tooltipWidth/2 < 0){
				this.xAlign = "right";
			}

			if (this.y - tooltipHeight < 0){
				this.yAlign = "below";
			}


			var tooltipX = this.x - tooltipWidth/2,
				tooltipY = this.y - tooltipHeight;

			ctx.fillStyle = this.fillColor;

			switch(this.yAlign)
			{
			case "above":
				//Draw a caret above the x/y
				ctx.beginPath();
				ctx.moveTo(this.x,this.y - caretPadding);
				ctx.lineTo(this.x + this.caretHeight, this.y - (caretPadding + this.caretHeight));
				ctx.lineTo(this.x - this.caretHeight, this.y - (caretPadding + this.caretHeight));
				ctx.closePath();
				ctx.fill();
				break;
			case "below":
				tooltipY = this.y + caretPadding + this.caretHeight;
				//Draw a caret below the x/y
				ctx.beginPath();
				ctx.moveTo(this.x, this.y + caretPadding);
				ctx.lineTo(this.x + this.caretHeight, this.y + caretPadding + this.caretHeight);
				ctx.lineTo(this.x - this.caretHeight, this.y + caretPadding + this.caretHeight);
				ctx.closePath();
				ctx.fill();
				break;
			}

			switch(this.xAlign)
			{
			case "left":
				tooltipX = this.x - tooltipWidth + (this.cornerRadius + this.caretHeight);
				break;
			case "right":
				tooltipX = this.x - (this.cornerRadius + this.caretHeight);
				break;
			}

			Chart.helpers.drawRoundedRectangle(ctx,tooltipX,tooltipY,tooltipWidth,tooltipRectHeight,this.cornerRadius);

			ctx.fill();

			ctx.fillStyle = this.textColor;
			ctx.textAlign = "left";
			ctx.textBaseline = "middle";
			//ctx.fillText(this.text, tooltipX + tooltipWidth/2, tooltipY + tooltipRectHeight/2);
			//alert(this.text);
			var arr=  this.text.split("#");
			var date= getDate(arr[0]);
			ctx.fillText("1. "+date, tooltipX + 10, tooltipY + 15);
			ctx.fillText("2. "+arr[1], tooltipX + 10, tooltipY + tooltipRectHeight/2+ 10);
		}
	});