mirror of
https://github.com/chartjs/Chart.js.git
synced 2025-12-08 20:36:08 +00:00
Decouple radar chart background colors from angle line drawing so they can be passed separately.
This commit is contained in:
parent
9eedf9adb6
commit
d91c4a14e9
@ -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);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user