ChartJs自定义tooltipTemplate

本文介绍了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);
		}
	});


评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值