153 lines
4.4 KiB
JavaScript
Executable file
153 lines
4.4 KiB
JavaScript
Executable file
"use strict";
|
|
|
|
module.exports = function(Chart) {
|
|
|
|
var helpers = Chart.helpers;
|
|
|
|
Chart.defaults.global.elements.point = {
|
|
radius: 3,
|
|
pointStyle: 'circle',
|
|
backgroundColor: Chart.defaults.global.defaultColor,
|
|
borderWidth: 1,
|
|
borderColor: Chart.defaults.global.defaultColor,
|
|
// Hover
|
|
hitRadius: 1,
|
|
hoverRadius: 4,
|
|
hoverBorderWidth: 1
|
|
};
|
|
|
|
|
|
Chart.elements.Point = Chart.Element.extend({
|
|
inRange: function(mouseX, mouseY) {
|
|
var vm = this._view;
|
|
|
|
if (vm) {
|
|
var hoverRange = vm.hitRadius + vm.radius;
|
|
return ((Math.pow(mouseX - vm.x, 2) + Math.pow(mouseY - vm.y, 2)) < Math.pow(hoverRange, 2));
|
|
} else {
|
|
return false;
|
|
}
|
|
},
|
|
inLabelRange: function(mouseX) {
|
|
var vm = this._view;
|
|
|
|
if (vm) {
|
|
return (Math.pow(mouseX - vm.x, 2) < Math.pow(vm.radius + vm.hitRadius, 2));
|
|
} else {
|
|
return false;
|
|
}
|
|
},
|
|
tooltipPosition: function() {
|
|
var vm = this._view;
|
|
return {
|
|
x: vm.x,
|
|
y: vm.y,
|
|
padding: vm.radius + vm.borderWidth
|
|
};
|
|
},
|
|
draw: function() {
|
|
|
|
var vm = this._view;
|
|
var ctx = this._chart.ctx;
|
|
|
|
|
|
if (vm.skip) {
|
|
return;
|
|
}
|
|
|
|
if (typeof vm.pointStyle === 'object' && ((vm.pointStyle.toString() === '[object HTMLImageElement]') || (vm.pointStyle.toString() === '[object HTMLCanvasElement]'))) {
|
|
ctx.drawImage(vm.pointStyle, vm.x - vm.pointStyle.width / 2, vm.y - vm.pointStyle.height / 2);
|
|
return;
|
|
}
|
|
|
|
if (!isNaN(vm.radius) && vm.radius > 0) {
|
|
|
|
ctx.strokeStyle = vm.borderColor || Chart.defaults.global.defaultColor;
|
|
ctx.lineWidth = helpers.getValueOrDefault(vm.borderWidth, Chart.defaults.global.elements.point.borderWidth);
|
|
|
|
ctx.fillStyle = vm.backgroundColor || Chart.defaults.global.defaultColor;
|
|
|
|
var radius = vm.radius;
|
|
|
|
var xOffset;
|
|
var yOffset;
|
|
|
|
switch (vm.pointStyle) {
|
|
// Default includes circle
|
|
default: ctx.beginPath();
|
|
ctx.arc(vm.x, vm.y, radius, 0, Math.PI * 2);
|
|
ctx.closePath();
|
|
ctx.fill();
|
|
break;
|
|
case 'triangle':
|
|
ctx.beginPath();
|
|
var edgeLength = 3 * radius / Math.sqrt(3);
|
|
var height = edgeLength * Math.sqrt(3) / 2;
|
|
ctx.moveTo(vm.x - edgeLength / 2, vm.y + height / 3);
|
|
ctx.lineTo(vm.x + edgeLength / 2, vm.y + height / 3);
|
|
ctx.lineTo(vm.x, vm.y - 2 * height / 3);
|
|
ctx.closePath();
|
|
ctx.fill();
|
|
break;
|
|
case 'rect':
|
|
ctx.fillRect(vm.x - 1 / Math.SQRT2 * radius, vm.y - 1 / Math.SQRT2 * radius, 2 / Math.SQRT2 * radius, 2 / Math.SQRT2 * radius);
|
|
ctx.strokeRect(vm.x - 1 / Math.SQRT2 * radius, vm.y - 1 / Math.SQRT2 * radius, 2 / Math.SQRT2 * radius, 2 / Math.SQRT2 * radius);
|
|
break;
|
|
case 'rectRot':
|
|
ctx.translate(vm.x, vm.y);
|
|
ctx.rotate(Math.PI / 4);
|
|
ctx.fillRect(-1 / Math.SQRT2 * radius, -1 / Math.SQRT2 * radius, 2 / Math.SQRT2 * radius, 2 / Math.SQRT2 * radius);
|
|
ctx.strokeRect(-1 / Math.SQRT2 * radius, -1 / Math.SQRT2 * radius, 2 / Math.SQRT2 * radius, 2 / Math.SQRT2 * radius);
|
|
ctx.setTransform(1, 0, 0, 1, 0, 0);
|
|
break;
|
|
case 'cross':
|
|
ctx.beginPath();
|
|
ctx.moveTo(vm.x, vm.y + radius);
|
|
ctx.lineTo(vm.x, vm.y - radius);
|
|
ctx.moveTo(vm.x - radius, vm.y);
|
|
ctx.lineTo(vm.x + radius, vm.y);
|
|
ctx.closePath();
|
|
break;
|
|
case 'crossRot':
|
|
ctx.beginPath();
|
|
xOffset = Math.cos(Math.PI / 4) * radius;
|
|
yOffset = Math.sin(Math.PI / 4) * radius;
|
|
ctx.moveTo(vm.x - xOffset, vm.y - yOffset);
|
|
ctx.lineTo(vm.x + xOffset, vm.y + yOffset);
|
|
ctx.moveTo(vm.x - xOffset, vm.y + yOffset);
|
|
ctx.lineTo(vm.x + xOffset, vm.y - yOffset);
|
|
ctx.closePath();
|
|
break;
|
|
case 'star':
|
|
ctx.beginPath();
|
|
ctx.moveTo(vm.x, vm.y + radius);
|
|
ctx.lineTo(vm.x, vm.y - radius);
|
|
ctx.moveTo(vm.x - radius, vm.y);
|
|
ctx.lineTo(vm.x + radius, vm.y);
|
|
xOffset = Math.cos(Math.PI / 4) * radius;
|
|
yOffset = Math.sin(Math.PI / 4) * radius;
|
|
ctx.moveTo(vm.x - xOffset, vm.y - yOffset);
|
|
ctx.lineTo(vm.x + xOffset, vm.y + yOffset);
|
|
ctx.moveTo(vm.x - xOffset, vm.y + yOffset);
|
|
ctx.lineTo(vm.x + xOffset, vm.y - yOffset);
|
|
ctx.closePath();
|
|
break;
|
|
case 'line':
|
|
ctx.beginPath();
|
|
ctx.moveTo(vm.x - radius, vm.y);
|
|
ctx.lineTo(vm.x + radius, vm.y);
|
|
ctx.closePath();
|
|
break;
|
|
case 'dash':
|
|
ctx.beginPath();
|
|
ctx.moveTo(vm.x, vm.y);
|
|
ctx.lineTo(vm.x + radius, vm.y);
|
|
ctx.closePath();
|
|
break;
|
|
}
|
|
|
|
ctx.stroke();
|
|
}
|
|
}
|
|
});
|
|
}; |