From: Evert Timberg Date: Wed, 11 Jan 2017 01:05:35 +0000 (-0500) Subject: Split radial scale lineArc setting into a combination of existing and new settings. X-Git-Tag: v2.6.0~2^2~50 X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=a3b8fb266a1e68aee36577c16a6f808689a83a4d;p=thirdparty%2FChart.js.git 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 a8abfb4b3..ba0e470af 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 4f2d8960d..d9b8f8a4d 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 78234ea59..7db8935b3 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 b51fa698b..5aa0c72c5 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 69d6c167f..baff12eb8 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 },