From d91c4a14e97882dbdcf3243717a0c67022d2ae1f Mon Sep 17 00:00:00 2001 From: Rahul Vaidya Date: Thu, 16 Apr 2015 11:35:43 -0700 Subject: [PATCH] Decouple radar chart background colors from angle line drawing so they can be passed separately. --- src/Chart.Core.js | 40 ++++++++++++++++++++++++---------------- 1 file changed, 24 insertions(+), 16 deletions(-) diff --git a/src/Chart.Core.js b/src/Chart.Core.js index d7314aca9..a78bb637a 100755 --- a/src/Chart.Core.js +++ b/src/Chart.Core.js @@ -2004,31 +2004,39 @@ ctx.lineWidth = this.angleLineWidth; ctx.strokeStyle = this.angleLineColor; for (var i = this.valuesCount - 1; i >= 0; i--) { + var centerOffset = null, outerPosition = null; + if (this.angleLineWidth > 0){ - var centerOffset = this.calculateCenterOffset(this.max); - var outerPosition = this.getPointPosition(i, centerOffset); + centerOffset = this.calculateCenterOffset(this.max); + outerPosition = this.getPointPosition(i, centerOffset); ctx.beginPath(); ctx.moveTo(this.xCenter, this.yCenter); ctx.lineTo(outerPosition.x, outerPosition.y); ctx.stroke(); ctx.closePath(); + } - if (this.backgroundColors && this.backgroundColors.length == this.valuesCount) { - var previousOuterPosition = this.getPointPosition(i === 0 ? this.valuesCount - 1 : i - 1, centerOffset); - var nextOuterPosition = this.getPointPosition(i === this.valuesCount - 1 ? 0 : i + 1, centerOffset); + if (this.backgroundColors && this.backgroundColors.length == this.valuesCount) { + if (centerOffset == null) + centerOffset = this.calculateCenterOffset(this.max); - var previousOuterHalfway = { x: (previousOuterPosition.x + outerPosition.x) / 2, y: (previousOuterPosition.y + outerPosition.y) / 2 }; - var nextOuterHalfway = { x: (outerPosition.x + nextOuterPosition.x) / 2, y: (outerPosition.y + nextOuterPosition.y) / 2 }; + if (outerPosition == null) + outerPosition = this.getPointPosition(i, centerOffset); - ctx.beginPath(); - ctx.moveTo(this.xCenter, this.yCenter); - ctx.lineTo(previousOuterHalfway.x, previousOuterHalfway.y); - ctx.lineTo(outerPosition.x, outerPosition.y); - ctx.lineTo(nextOuterHalfway.x, nextOuterHalfway.y); - ctx.fillStyle = this.backgroundColors[i]; - ctx.fill(); - ctx.closePath(); - } + var previousOuterPosition = this.getPointPosition(i === 0 ? this.valuesCount - 1 : i - 1, centerOffset); + var nextOuterPosition = this.getPointPosition(i === this.valuesCount - 1 ? 0 : i + 1, centerOffset); + + var previousOuterHalfway = { x: (previousOuterPosition.x + outerPosition.x) / 2, y: (previousOuterPosition.y + outerPosition.y) / 2 }; + var nextOuterHalfway = { x: (outerPosition.x + nextOuterPosition.x) / 2, y: (outerPosition.y + nextOuterPosition.y) / 2 }; + + ctx.beginPath(); + ctx.moveTo(this.xCenter, this.yCenter); + ctx.lineTo(previousOuterHalfway.x, previousOuterHalfway.y); + ctx.lineTo(outerPosition.x, outerPosition.y); + ctx.lineTo(nextOuterHalfway.x, nextOuterHalfway.y); + ctx.fillStyle = this.backgroundColors[i]; + ctx.fill(); + ctx.closePath(); } // Extra 3px out for some label spacing var pointLabelPosition = this.getPointPosition(i, this.calculateCenterOffset(this.max) + 5); -- 2.47.2