element.arc.js 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104
  1. 'use strict';
  2. module.exports = function(Chart) {
  3. var helpers = Chart.helpers,
  4. globalOpts = Chart.defaults.global;
  5. globalOpts.elements.arc = {
  6. backgroundColor: globalOpts.defaultColor,
  7. borderColor: '#fff',
  8. borderWidth: 2
  9. };
  10. Chart.elements.Arc = Chart.Element.extend({
  11. inLabelRange: function(mouseX) {
  12. var vm = this._view;
  13. if (vm) {
  14. return (Math.pow(mouseX - vm.x, 2) < Math.pow(vm.radius + vm.hoverRadius, 2));
  15. }
  16. return false;
  17. },
  18. inRange: function(chartX, chartY) {
  19. var vm = this._view;
  20. if (vm) {
  21. var pointRelativePosition = helpers.getAngleFromPoint(vm, {
  22. x: chartX,
  23. y: chartY
  24. }),
  25. angle = pointRelativePosition.angle,
  26. distance = pointRelativePosition.distance;
  27. // Sanitise angle range
  28. var startAngle = vm.startAngle;
  29. var endAngle = vm.endAngle;
  30. while (endAngle < startAngle) {
  31. endAngle += 2.0 * Math.PI;
  32. }
  33. while (angle > endAngle) {
  34. angle -= 2.0 * Math.PI;
  35. }
  36. while (angle < startAngle) {
  37. angle += 2.0 * Math.PI;
  38. }
  39. // Check if within the range of the open/close angle
  40. var betweenAngles = (angle >= startAngle && angle <= endAngle),
  41. withinRadius = (distance >= vm.innerRadius && distance <= vm.outerRadius);
  42. return (betweenAngles && withinRadius);
  43. }
  44. return false;
  45. },
  46. getCenterPoint: function() {
  47. var vm = this._view;
  48. var halfAngle = (vm.startAngle + vm.endAngle) / 2;
  49. var halfRadius = (vm.innerRadius + vm.outerRadius) / 2;
  50. return {
  51. x: vm.x + Math.cos(halfAngle) * halfRadius,
  52. y: vm.y + Math.sin(halfAngle) * halfRadius
  53. };
  54. },
  55. getArea: function() {
  56. var vm = this._view;
  57. return Math.PI * ((vm.endAngle - vm.startAngle) / (2 * Math.PI)) * (Math.pow(vm.outerRadius, 2) - Math.pow(vm.innerRadius, 2));
  58. },
  59. tooltipPosition: function() {
  60. var vm = this._view;
  61. var centreAngle = vm.startAngle + ((vm.endAngle - vm.startAngle) / 2),
  62. rangeFromCentre = (vm.outerRadius - vm.innerRadius) / 2 + vm.innerRadius;
  63. return {
  64. x: vm.x + (Math.cos(centreAngle) * rangeFromCentre),
  65. y: vm.y + (Math.sin(centreAngle) * rangeFromCentre)
  66. };
  67. },
  68. draw: function() {
  69. var ctx = this._chart.ctx,
  70. vm = this._view,
  71. sA = vm.startAngle,
  72. eA = vm.endAngle;
  73. ctx.beginPath();
  74. ctx.arc(vm.x, vm.y, vm.outerRadius, sA, eA);
  75. ctx.arc(vm.x, vm.y, vm.innerRadius, eA, sA, true);
  76. ctx.closePath();
  77. ctx.strokeStyle = vm.borderColor;
  78. ctx.lineWidth = vm.borderWidth;
  79. ctx.fillStyle = vm.backgroundColor;
  80. ctx.fill();
  81. ctx.lineJoin = 'bevel';
  82. if (vm.borderWidth) {
  83. ctx.stroke();
  84. }
  85. }
  86. });
  87. };