Split radial scale lineArc setting into a combination of existing and new settings.

gridLines.circular is a new option that toggles circular lines. This allows radar charts with circular lines #3082
pointLabels.display is a new option that toggles the display of point labels.
The existing angleLines.display is used with the new pointLabels.display setting is used to trigger the radar like settings.
This required changing the default polar area config.

diff --git a/docs/02-Scales.md b/docs/02-Scales.md
index a8abfb4b382ef425948a69943dc10ec7cf2f887e..ba0e470afa42bfdf0fb15fa7a62e582a03744cc3 100644 (file)
--- 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 4f2d8960d0b277110af3e6e9197ddcc06a7ca2f9..d9b8f8a4d061f3d6bee30a7151ca6824f8dd8ca5 100644 (file)
--- 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 78234ea59d4ccab8cc4445773798e939df71079f..7db8935b31773ff7028a888155943448122bc21f 100644 (file)
--- 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 b51fa698bd9e85fe9114543dd9f595477f87bd6f..5aa0c72c517a098a240ccea50c24572144f4798b 100644 (file)
--- 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 69d6c167f92b610ba0a76c2492f8f22be8e6a645..baff12eb892d67a1fb5ecfb8a7885d12744d9a6e 100644 (file)
--- 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
                        },