diff --git a/src/Chart.Core.js b/src/Chart.Core.js index aa6c58d8d..9521397a8 100755 --- a/src/Chart.Core.js +++ b/src/Chart.Core.js @@ -2039,14 +2039,40 @@ 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 outerPosition = this.getPointPosition(i, this.calculateCenterOffset(this.max)); + 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) { + if (centerOffset == null) + centerOffset = this.calculateCenterOffset(this.max); + + if (outerPosition == null) + outerPosition = this.getPointPosition(i, centerOffset); + + 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); ctx.font = fontString(this.pointLabelFontSize,this.pointLabelFontStyle,this.pointLabelFontFamily); diff --git a/src/Chart.Radar.js b/src/Chart.Radar.js index 6d00eeb12..93d7352fd 100644 --- a/src/Chart.Radar.js +++ b/src/Chart.Radar.js @@ -174,6 +174,7 @@ showLabels: this.options.scaleShowLabels, showLabelBackdrop: this.options.scaleShowLabelBackdrop, backdropColor: this.options.scaleBackdropColor, + backgroundColors: this.options.scaleBackgroundColors, backdropPaddingY : this.options.scaleBackdropPaddingY, backdropPaddingX: this.options.scaleBackdropPaddingX, lineWidth: (this.options.scaleShowLine) ? this.options.scaleLineWidth : 0,