diff --git a/docs/02-Scales.md b/docs/02-Scales.md index af7812ce03b..f68957978c3 100644 --- a/docs/02-Scales.md +++ b/docs/02-Scales.md @@ -310,14 +310,14 @@ The following additional configuration options are provided by the radial linear Name | Type | Default | Description --- | --- | --- | --- -lineArc | Boolean | false | If true, circular arcs are used else straight lines are used. The former is used by the polar area chart and the latter by the radar chart +*gridLines*.circular | Boolean | false | if true, radial lines are circular. If false, they are straight lines connecting the the different angle line locations. angleLines | Object | - | See the Angle Line Options section below for details. pointLabels | Object | - | See the Point Label Options section below for details. ticks | Object | - | See the Ticks table below for options. #### Angle Line Options -The following options are used to configure angled lines that radiate from the center of the chart to the point labels. They can be found in the `angleLines` sub options. Note that these options only apply if `lineArc` is false. +The following options are used to configure angled lines that radiate from the center of the chart to the point labels. They can be found in the `angleLines` sub options. Note that these options only apply if `angleLines.display` is true. Name | Type | Default | Description --- | --- | --- | --- @@ -327,10 +327,11 @@ lineWidth | Number | 1 | Width of angled lines #### Point Label Options -The following options are used to configure the point labels that are shown on the perimeter of the scale. They can be found in the `pointLabels` sub options. Note that these options only apply if `lineArc` is false. +The following options are used to configure the point labels that are shown on the perimeter of the scale. They can be found in the `pointLabels` sub options. Note that these options only apply if `pointLabels.display` is true. Name | Type | Default | Description --- | --- | --- | --- +display | Boolean | true | If true, point labels are shown callback | Function | - | Callback function to transform data label to axis label fontColor | Color | '#666' | Font color fontFamily | String | "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif" | Font family to render diff --git a/docs/06-Polar-Area-Chart.md b/docs/06-Polar-Area-Chart.md index 4f2d8960d0b..d9b8f8a4d06 100644 --- a/docs/06-Polar-Area-Chart.md +++ b/docs/06-Polar-Area-Chart.md @@ -79,7 +79,6 @@ Name | Type | Default | Description startAngle | Number | -0.5 * Math.PI | Sets the starting angle for the first item in a dataset scale | Object | [See Scales](#scales) and [Defaults for Radial Linear Scale](#scales-radial-linear-scale) | Options for the one scale used on the chart. Use this to style the ticks, labels, and grid. *scale*.type | String |"radialLinear" | As defined in ["Radial Linear"](#scales-radial-linear-scale). -*scale*.lineArc | Boolean | true | When true, lines are circular. *animation*.animateRotate | Boolean |true | If true, will animate the rotation of the chart. *animation*.animateScale | Boolean | true | If true, will animate scaling the chart. *legend*.*labels*.generateLabels | Function | `function(data) {} ` | Returns labels for each the legend diff --git a/src/controllers/controller.polarArea.js b/src/controllers/controller.polarArea.js index 78234ea59d4..7db8935b317 100644 --- a/src/controllers/controller.polarArea.js +++ b/src/controllers/controller.polarArea.js @@ -8,7 +8,15 @@ module.exports = function(Chart) { scale: { type: 'radialLinear', - lineArc: true, // so that lines are circular + angleLines: { + display: false + }, + gridLines: { + circular: true + }, + pointLabels: { + display: false + }, ticks: { beginAtZero: true } diff --git a/src/scales/scale.radialLinear.js b/src/scales/scale.radialLinear.js index b51fa698bd9..5aa0c72c517 100644 --- a/src/scales/scale.radialLinear.js +++ b/src/scales/scale.radialLinear.js @@ -10,7 +10,6 @@ module.exports = function(Chart) { // Boolean - Whether to animate scaling the chart from the centre animate: true, - lineArc: false, position: 'chartArea', angleLines: { @@ -19,6 +18,10 @@ module.exports = function(Chart) { lineWidth: 1 }, + gridLines: { + circular: false + }, + // label settings ticks: { // Boolean - Show a backdrop to the scale label @@ -37,6 +40,9 @@ module.exports = function(Chart) { }, pointLabels: { + // Boolean - if true, show point labels + display: true, + // Number - Point label font size in pixels fontSize: 10, @@ -48,7 +54,8 @@ module.exports = function(Chart) { }; function getValueCount(scale) { - return !scale.options.lineArc ? scale.chart.data.labels.length : 0; + var opts = scale.options; + return opts.angleLines.display || opts.pointLabels.display ? scale.chart.data.labels.length : 0; } function getPointLabelFontOptions(scale) { @@ -253,19 +260,22 @@ module.exports = function(Chart) { ctx.stroke(); ctx.closePath(); } - // Extra 3px out for some label spacing - var pointLabelPosition = scale.getPointPosition(i, outerDistance + 5); - // Keep this in loop since we may support array properties here - var pointLabelFontColor = getValueOrDefault(pointLabelOpts.fontColor, globalDefaults.defaultFontColor); - ctx.font = plFont.font; - ctx.fillStyle = pointLabelFontColor; + if (pointLabelOpts.display) { + // Extra 3px out for some label spacing + var pointLabelPosition = scale.getPointPosition(i, outerDistance + 5); - var angleRadians = scale.getIndexAngle(i); - var angle = helpers.toDegrees(angleRadians); - ctx.textAlign = getTextAlignForAngle(angle); - adjustPointPositionForLabelHeight(angle, scale._pointLabelSizes[i], pointLabelPosition); - fillText(ctx, scale.pointLabels[i] || '', pointLabelPosition, plFont.size); + // Keep this in loop since we may support array properties here + var pointLabelFontColor = getValueOrDefault(pointLabelOpts.fontColor, globalDefaults.defaultFontColor); + ctx.font = plFont.font; + ctx.fillStyle = pointLabelFontColor; + + var angleRadians = scale.getIndexAngle(i); + var angle = helpers.toDegrees(angleRadians); + ctx.textAlign = getTextAlignForAngle(angle); + adjustPointPositionForLabelHeight(angle, scale._pointLabelSizes[i], pointLabelPosition); + fillText(ctx, scale.pointLabels[i] || '', pointLabelPosition, plFont.size); + } } } @@ -274,7 +284,7 @@ module.exports = function(Chart) { ctx.strokeStyle = helpers.getValueAtIndexOrDefault(gridLineOpts.color, index - 1); ctx.lineWidth = helpers.getValueAtIndexOrDefault(gridLineOpts.lineWidth, index - 1); - if (scale.options.lineArc) { + if (scale.options.gridLines.circular) { // Draw circular arcs between the points ctx.beginPath(); ctx.arc(scale.xCenter, scale.yCenter, radius, 0, Math.PI * 2); @@ -365,10 +375,10 @@ module.exports = function(Chart) { return +this.getRightValue(this.chart.data.datasets[datasetIndex].data[index]); }, fit: function() { - if (this.options.lineArc) { - fit(this); - } else { + if (this.options.pointLabels.display) { fitWithPointLabels(this); + } else { + fit(this); } }, /** @@ -502,7 +512,7 @@ module.exports = function(Chart) { } }); - if (!opts.lineArc) { + if (opts.angleLines.display || opts.pointLabels.display) { drawPointLabels(me); } } diff --git a/test/scale.radialLinear.tests.js b/test/scale.radialLinear.tests.js index 69d6c167f92..baff12eb892 100644 --- a/test/scale.radialLinear.tests.js +++ b/test/scale.radialLinear.tests.js @@ -17,6 +17,7 @@ describe('Test the radial linear scale', function() { animate: true, display: true, gridLines: { + circular: false, color: 'rgba(0, 0, 0, 0.1)', drawBorder: true, drawOnChartArea: true, @@ -30,8 +31,8 @@ describe('Test the radial linear scale', function() { borderDash: [], borderDashOffset: 0.0 }, - lineArc: false, pointLabels: { + display: true, fontSize: 10, callback: defaultConfig.pointLabels.callback, // make this nicer, then check explicitly below },