Fix Label custom tooltips

This commit is contained in:
Tanner Linsley 2015-06-17 15:14:26 -06:00
parent cc2fb73e87
commit 061566ee27
3 changed files with 85 additions and 85 deletions

84
Chart.js vendored
View File

@ -2163,6 +2163,10 @@
var ctx = this._chart.ctx;
var vm = this._view;
if (this._options.tooltips.custom) {
this._options.tooltips.custom(this);
}
switch (this._options.hover.mode) {
case 'single':
@ -2194,50 +2198,46 @@
ctx.fillStyle = helpers.color(vm.backgroundColor).alpha(vm.opacity).rgbString();
// Custom Tooltips
if (this._options.tooltips.custom) {
this._options.tooltips.custom(this._view);
} else {
switch (vm.yAlign) {
case "above":
//Draw a caret above the x/y
ctx.beginPath();
ctx.moveTo(vm.x, vm.y - caretPadding);
ctx.lineTo(vm.x + vm.caretHeight, vm.y - (caretPadding + vm.caretHeight));
ctx.lineTo(vm.x - vm.caretHeight, vm.y - (caretPadding + vm.caretHeight));
ctx.closePath();
ctx.fill();
break;
case "below":
tooltipY = vm.y + caretPadding + vm.caretHeight;
//Draw a caret below the x/y
ctx.beginPath();
ctx.moveTo(vm.x, vm.y + caretPadding);
ctx.lineTo(vm.x + vm.caretHeight, vm.y + caretPadding + vm.caretHeight);
ctx.lineTo(vm.x - vm.caretHeight, vm.y + caretPadding + vm.caretHeight);
ctx.closePath();
ctx.fill();
break;
}
switch (vm.xAlign) {
case "left":
tooltipX = vm.x - tooltipWidth + (vm.cornerRadius + vm.caretHeight);
break;
case "right":
tooltipX = vm.x - (vm.cornerRadius + vm.caretHeight);
break;
}
helpers.drawRoundedRectangle(ctx, tooltipX, tooltipY, tooltipWidth, tooltipRectHeight, vm.cornerRadius);
ctx.fill();
ctx.fillStyle = helpers.color(vm.textColor).alpha(vm.opacity).rgbString();
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillText(vm.text, tooltipX + tooltipWidth / 2, tooltipY + tooltipRectHeight / 2);
switch (vm.yAlign) {
case "above":
//Draw a caret above the x/y
ctx.beginPath();
ctx.moveTo(vm.x, vm.y - caretPadding);
ctx.lineTo(vm.x + vm.caretHeight, vm.y - (caretPadding + vm.caretHeight));
ctx.lineTo(vm.x - vm.caretHeight, vm.y - (caretPadding + vm.caretHeight));
ctx.closePath();
ctx.fill();
break;
case "below":
tooltipY = vm.y + caretPadding + vm.caretHeight;
//Draw a caret below the x/y
ctx.beginPath();
ctx.moveTo(vm.x, vm.y + caretPadding);
ctx.lineTo(vm.x + vm.caretHeight, vm.y + caretPadding + vm.caretHeight);
ctx.lineTo(vm.x - vm.caretHeight, vm.y + caretPadding + vm.caretHeight);
ctx.closePath();
ctx.fill();
break;
}
switch (vm.xAlign) {
case "left":
tooltipX = vm.x - tooltipWidth + (vm.cornerRadius + vm.caretHeight);
break;
case "right":
tooltipX = vm.x - (vm.cornerRadius + vm.caretHeight);
break;
}
helpers.drawRoundedRectangle(ctx, tooltipX, tooltipY, tooltipWidth, tooltipRectHeight, vm.cornerRadius);
ctx.fill();
ctx.fillStyle = helpers.color(vm.textColor).alpha(vm.opacity).rgbString();
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillText(vm.text, tooltipX + tooltipWidth / 2, tooltipY + tooltipRectHeight / 2);
break;
case 'label':

2
Chart.min.js vendored

File diff suppressed because one or more lines are too long

View File

@ -207,6 +207,10 @@
var ctx = this._chart.ctx;
var vm = this._view;
if (this._options.tooltips.custom) {
this._options.tooltips.custom(this);
}
switch (this._options.hover.mode) {
case 'single':
@ -238,50 +242,46 @@
ctx.fillStyle = helpers.color(vm.backgroundColor).alpha(vm.opacity).rgbString();
// Custom Tooltips
if (this._options.tooltips.custom) {
this._options.tooltips.custom(this._view);
} else {
switch (vm.yAlign) {
case "above":
//Draw a caret above the x/y
ctx.beginPath();
ctx.moveTo(vm.x, vm.y - caretPadding);
ctx.lineTo(vm.x + vm.caretHeight, vm.y - (caretPadding + vm.caretHeight));
ctx.lineTo(vm.x - vm.caretHeight, vm.y - (caretPadding + vm.caretHeight));
ctx.closePath();
ctx.fill();
break;
case "below":
tooltipY = vm.y + caretPadding + vm.caretHeight;
//Draw a caret below the x/y
ctx.beginPath();
ctx.moveTo(vm.x, vm.y + caretPadding);
ctx.lineTo(vm.x + vm.caretHeight, vm.y + caretPadding + vm.caretHeight);
ctx.lineTo(vm.x - vm.caretHeight, vm.y + caretPadding + vm.caretHeight);
ctx.closePath();
ctx.fill();
break;
}
switch (vm.xAlign) {
case "left":
tooltipX = vm.x - tooltipWidth + (vm.cornerRadius + vm.caretHeight);
break;
case "right":
tooltipX = vm.x - (vm.cornerRadius + vm.caretHeight);
break;
}
helpers.drawRoundedRectangle(ctx, tooltipX, tooltipY, tooltipWidth, tooltipRectHeight, vm.cornerRadius);
ctx.fill();
ctx.fillStyle = helpers.color(vm.textColor).alpha(vm.opacity).rgbString();
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillText(vm.text, tooltipX + tooltipWidth / 2, tooltipY + tooltipRectHeight / 2);
switch (vm.yAlign) {
case "above":
//Draw a caret above the x/y
ctx.beginPath();
ctx.moveTo(vm.x, vm.y - caretPadding);
ctx.lineTo(vm.x + vm.caretHeight, vm.y - (caretPadding + vm.caretHeight));
ctx.lineTo(vm.x - vm.caretHeight, vm.y - (caretPadding + vm.caretHeight));
ctx.closePath();
ctx.fill();
break;
case "below":
tooltipY = vm.y + caretPadding + vm.caretHeight;
//Draw a caret below the x/y
ctx.beginPath();
ctx.moveTo(vm.x, vm.y + caretPadding);
ctx.lineTo(vm.x + vm.caretHeight, vm.y + caretPadding + vm.caretHeight);
ctx.lineTo(vm.x - vm.caretHeight, vm.y + caretPadding + vm.caretHeight);
ctx.closePath();
ctx.fill();
break;
}
switch (vm.xAlign) {
case "left":
tooltipX = vm.x - tooltipWidth + (vm.cornerRadius + vm.caretHeight);
break;
case "right":
tooltipX = vm.x - (vm.cornerRadius + vm.caretHeight);
break;
}
helpers.drawRoundedRectangle(ctx, tooltipX, tooltipY, tooltipWidth, tooltipRectHeight, vm.cornerRadius);
ctx.fill();
ctx.fillStyle = helpers.color(vm.textColor).alpha(vm.opacity).rgbString();
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillText(vm.text, tooltipX + tooltipWidth / 2, tooltipY + tooltipRectHeight / 2);
break;
case 'label':