| `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
| `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.
| `zeroLineWidth` | `Number` | `1` | Stroke width of the grid line for the first index (index 0).
| `zeroLineColor` | Color | `'rgba(0, 0, 0, 0.25)'` | Stroke color of the grid line for the first index (index 0).
| `zeroLineBorderDash` | `Number[]` | `[]` | Length and spacing of dashes of the grid line for the first index (index 0). See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash).
-| `zeroLineBorderDashOffset` | `Number` | `0` | Offset for line dashes of the grid line for the first index (index 0). See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset).
+| `zeroLineBorderDashOffset` | `Number` | `0.0` | Offset for line dashes of the grid line for the first index (index 0). See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset).
| `offsetGridLines` | `Boolean` | `false` | If true, grid lines will be shifted to be between labels. This is set to `true` for a category scale in a bar chart by default.
## Tick Configuration
// 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
// Draw all of the tick labels, tick marks, and grid lines at the correct places
helpers.each(itemsToDraw, function(itemToDraw) {
- if (gridLines.display) {
+ var glWidth = itemToDraw.glWidth;
+ var glColor = itemToDraw.glColor;
+
+ if (gridLines.display && glWidth && glColor) {
context.save();
- context.lineWidth = itemToDraw.glWidth;
- context.strokeStyle = itemToDraw.glColor;
+ context.lineWidth = glWidth;
+ context.strokeStyle = glColor;
if (context.setLineDash) {
context.setLineDash(itemToDraw.glBorderDash);
context.lineDashOffset = itemToDraw.glBorderDashOffset;
angleLines: {
display: true,
color: 'rgba(0, 0, 0, 0.1)',
- lineWidth: 1
+ lineWidth: 1,
+ borderDash: [],
+ borderDashOffset: 0.0
},
gridLines: {
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;
+ var lineWidth = helpers.valueOrDefault(angleLineOpts.lineWidth, gridLineOpts.lineWidth);
+ var lineColor = helpers.valueOrDefault(angleLineOpts.color, gridLineOpts.color);
+
+ ctx.save();
+ ctx.lineWidth = lineWidth;
+ ctx.strokeStyle = lineColor;
+ 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);
// Point Label Font
var plFont = getPointLabelFontOptions(scale);
+ ctx.font = plFont.font;
ctx.textBaseline = 'top';
for (var i = getValueCount(scale) - 1; i >= 0; i--) {
- if (angleLineOpts.display) {
+ if (angleLineOpts.display && lineWidth && lineColor) {
var outerPosition = scale.getPointPosition(i, outerDistance);
ctx.beginPath();
ctx.moveTo(scale.xCenter, scale.yCenter);
ctx.lineTo(outerPosition.x, outerPosition.y);
ctx.stroke();
- ctx.closePath();
}
if (pointLabelOpts.display) {
// Keep this in loop since we may support array properties here
var pointLabelFontColor = helpers.valueAtIndexOrDefault(pointLabelOpts.fontColor, i, globalDefaults.defaultFontColor);
- ctx.font = plFont.font;
ctx.fillStyle = pointLabelFontColor;
var angleRadians = scale.getIndexAngle(i);
fillText(ctx, scale.pointLabels[i] || '', pointLabelPosition, plFont.size);
}
}
+ ctx.restore();
}
function drawRadiusLine(scale, gridLineOpts, radius, index) {
var ctx = scale.ctx;
- ctx.strokeStyle = helpers.valueAtIndexOrDefault(gridLineOpts.color, index - 1);
- ctx.lineWidth = helpers.valueAtIndexOrDefault(gridLineOpts.lineWidth, index - 1);
+ var circular = gridLineOpts.circular;
+ var valueCount = getValueCount(scale);
+ var lineColor = helpers.valueAtIndexOrDefault(gridLineOpts.color, index - 1);
+ var lineWidth = helpers.valueAtIndexOrDefault(gridLineOpts.lineWidth, index - 1);
+ var pointPosition;
- if (scale.options.gridLines.circular) {
+ if ((!circular && !valueCount) || !lineColor || !lineWidth) {
+ return;
+ }
+
+ ctx.save();
+ ctx.strokeStyle = lineColor;
+ ctx.lineWidth = lineWidth;
+ if (ctx.setLineDash) {
+ ctx.setLineDash(gridLineOpts.borderDash || []);
+ ctx.lineDashOffset = gridLineOpts.borderDashOffset || 0.0;
+ }
+
+ ctx.beginPath();
+ if (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) {
--- /dev/null
+{
+ "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
+ }
+ }
+ }
+ }
+}
--- /dev/null
+{
+ "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
+ }
+ }
+ }
+ }
+}
--- /dev/null
+{
+ "config": {
+ "type": "radar",
+ "data": {
+ "labels": ["A", "B", "C", "D", "E"]
+ },
+ "options": {
+ "responsive": false,
+ "legend": false,
+ "title": false,
+ "scale": {
+ "gridLines": {
+ "color": [
+ "rgba(0, 0, 0, 0.5)",
+ "rgba(255, 255, 255, 0.5)",
+ false,
+ "",
+ "rgba(255, 0, 0, 0.5)",
+ "rgba(0, 255, 0, 0.5)",
+ "rgba(0, 0, 255, 0.5)",
+ "rgba(255, 255, 0, 0.5)",
+ "rgba(255, 0, 255, 0.5)",
+ "rgba(0, 255, 255, 0.5)"
+ ],
+ "lineWidth": [false, 0, 1, 2, 1, 2, 1, 2, 1, 2]
+ },
+ "angleLines": {
+ "color": "rgba(255, 255, 255, 0.5)",
+ "lineWidth": 2
+ },
+ "pointLabels": {
+ "display": false
+ },
+ "ticks": {
+ "display": false
+ }
+ }
+ }
+ }
+}
// 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);
angleLines: {
display: true,
color: 'rgba(0, 0, 0, 0.1)',
- lineWidth: 1
+ lineWidth: 1,
+ borderDash: [],
+ borderDashOffset: 0.0
},
animate: true,
display: true,
projects / thirdparty / Chart.js.git / commitdiff
