Add support for gridLines/angleLines borderDash for polarArea/radar c…

…harts
chartjs · Nov 20, 2018 · a002da9 · a002da9
1 parent f6d9a39
commit a002da9
Show file tree

Hide file tree

Showing 9 changed files with 109 additions and 25 deletions.
diff --git a/docs/axes/radial/linear.md b/docs/axes/radial/linear.md
@@ -95,6 +95,8 @@ The following options are used to configure angled lines that radiate from the c
 | `display` | `Boolean` | `true` | if true, angle lines are shown.
 | `color` | `Color` | `rgba(0, 0, 0, 0.1)` | Color of angled lines.
 | `lineWidth` | `Number` | `1` | Width of angled lines.
+| `borderDash` | `Number[]` | `[]` | Length and spacing of dashes on angled lines. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash).
+| `borderDashOffset` | `Number` | `0.0` | Offset for line dashes. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset).
 
 ## Point Label Options
 

diff --git a/docs/axes/styling.md b/docs/axes/styling.md
@@ -12,7 +12,7 @@ The grid line configuration is nested under the scale configuration in the `grid
 | `circular` | `Boolean` | `false` | If true, gridlines are circular (on radar chart only).
 | `color` | `Color/Color[]` | `'rgba(0, 0, 0, 0.1)'` | The color of the grid lines. If specified as an array, the first color applies to the first grid line, the second to the second grid line and so on.
 | `borderDash` | `Number[]` | `[]` | Length and spacing of dashes on grid lines. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash).
-| `borderDashOffset` | `Number` | `0` | Offset for line dashes. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset).
+| `borderDashOffset` | `Number` | `0.0` | Offset for line dashes. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset).
 | `lineWidth` | `Number/Number[]` | `1` | Stroke width of grid lines.
 | `drawBorder` | `Boolean` | `true` | If true, draw border at the edge between the axis and the chart area.
 | `drawOnChartArea` | `Boolean` | `true` | If true, draw lines on the chart area inside the axis lines. This is useful when there are multiple axes and you need to control which grid lines are drawn.

diff --git a/src/core/core.scale.js b/src/core/core.scale.js
@@ -728,13 +728,13 @@ module.exports = Element.extend({
 				// Draw the first index specially
 				lineWidth = gridLines.zeroLineWidth;
 				lineColor = gridLines.zeroLineColor;
-				borderDash = gridLines.zeroLineBorderDash;
-				borderDashOffset = gridLines.zeroLineBorderDashOffset;
+				borderDash = gridLines.zeroLineBorderDash || [];
+				borderDashOffset = gridLines.zeroLineBorderDashOffset || 0.0;
 			} else {
 				lineWidth = helpers.valueAtIndexOrDefault(gridLines.lineWidth, index);
 				lineColor = helpers.valueAtIndexOrDefault(gridLines.color, index);
-				borderDash = helpers.valueOrDefault(gridLines.borderDash, globalDefaults.borderDash);
-				borderDashOffset = helpers.valueOrDefault(gridLines.borderDashOffset, globalDefaults.borderDashOffset);
+				borderDash = gridLines.borderDash || [];
+				borderDashOffset = gridLines.borderDashOffset || 0.0;
 			}
 
 			// Common properties

diff --git a/src/scales/scale.radialLinear.js b/src/scales/scale.radialLinear.js
@@ -19,7 +19,9 @@ module.exports = function(Chart) {
 		angleLines: {
 			display: true,
 			color: 'rgba(0, 0, 0, 0.1)',
-			lineWidth: 1
+			lineWidth: 1,
+			borderDash: [],
+			borderDashOffset: 0.0
 		},
 
 		gridLines: {
@@ -240,10 +242,16 @@ module.exports = function(Chart) {
 		var ctx = scale.ctx;
 		var opts = scale.options;
 		var angleLineOpts = opts.angleLines;
+		var gridLineOpts = opts.gridLines;
 		var pointLabelOpts = opts.pointLabels;
 
-		ctx.lineWidth = angleLineOpts.lineWidth;
-		ctx.strokeStyle = angleLineOpts.color;
+		ctx.save();
+		ctx.lineWidth = helpers.valueOrDefault(angleLineOpts.lineWidth, gridLineOpts.lineWidth);
+		ctx.strokeStyle = helpers.valueOrDefault(angleLineOpts.color, gridLineOpts.color);
+		if (ctx.setLineDash) {
+			ctx.setLineDash(helpers.valueOrDefault(angleLineOpts.borderDash, gridLineOpts.borderDash) || []);
+			ctx.lineDashOffset = helpers.valueOrDefault(angleLineOpts.borderDashOffset, gridLineOpts.borderDashOffset) || 0.0;
+		}
 
 		var outerDistance = scale.getDistanceFromCenterForValue(opts.ticks.reverse ? scale.min : scale.max);
 
@@ -259,7 +267,6 @@ module.exports = function(Chart) {
 				ctx.moveTo(scale.xCenter, scale.yCenter);
 				ctx.lineTo(outerPosition.x, outerPosition.y);
 				ctx.stroke();
-				ctx.closePath();
 			}
 
 			if (pointLabelOpts.display) {
@@ -278,39 +285,43 @@ module.exports = function(Chart) {
 				fillText(ctx, scale.pointLabels[i] || '', pointLabelPosition, plFont.size);
 			}
 		}
+		ctx.restore();
 	}
 
 	function drawRadiusLine(scale, gridLineOpts, radius, index) {
 		var ctx = scale.ctx;
+		var valueCount = getValueCount(scale);
+		var pointPosition;
+
+		if (!gridLineOpts.circular && valueCount === 0) {
+			return;
+		}
+
+		ctx.save();
 		ctx.strokeStyle = helpers.valueAtIndexOrDefault(gridLineOpts.color, index - 1);
 		ctx.lineWidth = helpers.valueAtIndexOrDefault(gridLineOpts.lineWidth, index - 1);
+		if (ctx.setLineDash) {
+			ctx.setLineDash(gridLineOpts.borderDash || []);
+			ctx.lineDashOffset = gridLineOpts.borderDashOffset || 0.0;
+		}
 
-		if (scale.options.gridLines.circular) {
+		ctx.beginPath();
+		if (gridLineOpts.circular) {
 			// Draw circular arcs between the points
-			ctx.beginPath();
 			ctx.arc(scale.xCenter, scale.yCenter, radius, 0, Math.PI * 2);
-			ctx.closePath();
-			ctx.stroke();
 		} else {
 			// Draw straight lines connecting each index
-			var valueCount = getValueCount(scale);
-
-			if (valueCount === 0) {
-				return;
-			}
-
-			ctx.beginPath();
-			var pointPosition = scale.getPointPosition(0, radius);
+			pointPosition = scale.getPointPosition(0, radius);
 			ctx.moveTo(pointPosition.x, pointPosition.y);
 
 			for (var i = 1; i < valueCount; i++) {
 				pointPosition = scale.getPointPosition(i, radius);
 				ctx.lineTo(pointPosition.x, pointPosition.y);
 			}
-
-			ctx.closePath();
-			ctx.stroke();
 		}
+		ctx.closePath();
+		ctx.stroke();
+		ctx.restore();
 	}
 
 	function numberOrZero(param) {

diff --git a/test/fixtures/scale.radialLinear/border-dash.json b/test/fixtures/scale.radialLinear/border-dash.json
@@ -0,0 +1,33 @@
+{
+    "config": {
+        "type": "radar",
+        "data": {
+            "labels": ["A", "B", "C", "D", "E"]
+        },
+        "options": {
+            "responsive": false,
+            "legend": false,
+            "title": false,
+            "scale": {
+                "gridLines": {
+                    "color": "rgba(0, 0, 255, 0.5)",
+                    "lineWidth": 1,
+                    "borderDash": [4, 2],
+                    "borderDashOffset": 2
+                },
+                "angleLines": {
+                    "color": "rgba(0, 0, 255, 0.5)",
+                    "lineWidth": 1,
+                    "borderDash": [4, 2],
+                    "borderDashOffset": 2
+                },
+                "pointLabels": {
+                    "display": false
+                },
+                "ticks": {
+                    "display": false
+                }
+            }
+        }
+    }
+}
diff --git a/test/fixtures/scale.radialLinear/border-dash.png b/test/fixtures/scale.radialLinear/border-dash.png
diff --git a/test/fixtures/scale.radialLinear/circular-border-dash.json b/test/fixtures/scale.radialLinear/circular-border-dash.json
@@ -0,0 +1,34 @@
+{
+    "config": {
+        "type": "radar",
+        "data": {
+            "labels": ["A", "B", "C", "D", "E"]
+        },
+        "options": {
+            "responsive": false,
+            "legend": false,
+            "title": false,
+            "scale": {
+                "gridLines": {
+                    "circular": true,
+                    "color": "rgba(0, 0, 255, 0.5)",
+                    "lineWidth": 1,
+                    "borderDash": [4, 2],
+                    "borderDashOffset": 2
+                },
+                "angleLines": {
+                    "color": "rgba(0, 0, 255, 0.5)",
+                    "lineWidth": 1,
+                    "borderDash": [4, 2],
+                    "borderDashOffset": 2
+                },
+                "pointLabels": {
+                    "display": false
+                },
+                "ticks": {
+                    "display": false
+                }
+            }
+        }
+    }
+}
diff --git a/test/fixtures/scale.radialLinear/circular-border-dash.png b/test/fixtures/scale.radialLinear/circular-border-dash.png
diff --git a/test/specs/scale.radialLinear.tests.js b/test/specs/scale.radialLinear.tests.js
@@ -1,5 +1,7 @@
 // Tests for the radial linear scale used by the polar area and radar charts
 describe('Test the radial linear scale', function() {
+	describe('auto', jasmine.fixture.specs('scale.radialLinear'));
+
 	it('Should register the constructor with the scale service', function() {
 		var Constructor = Chart.scaleService.getScaleConstructor('radialLinear');
 		expect(Constructor).not.toBe(undefined);
@@ -12,7 +14,9 @@ describe('Test the radial linear scale', function() {
 			angleLines: {
 				display: true,
 				color: 'rgba(0, 0, 0, 0.1)',
-				lineWidth: 1
+				lineWidth: 1,
+				borderDash: [],
+				borderDashOffset: 0.0
 			},
 			animate: true,
 			display: true,