diff --git a/src/Chart.Doughnut.js b/src/Chart.Doughnut.js index b25f48f47..fdc4f12e9 100644 --- a/src/Chart.Doughnut.js +++ b/src/Chart.Doughnut.js @@ -7,30 +7,33 @@ helpers = Chart.helpers; var defaultConfig = { - //Boolean - Whether we should show a stroke on each segment - segmentShowStroke: true, + segments: { + //Boolean - Whether we should show a stroke on each segment + showStroke: true, - //String - The colour of each segment stroke - segmentStrokeColor: "#fff", + //String - The colour of each segment stroke + strokeColor: "#fff", - //Number - The width of each segment stroke - borderWidth: 2, + //Number - The width of each segment stroke + borderWidth: 2, + }, + + hover: { + // The duration of animations triggered by hover events + animationDuration: 400, + }, + + animation: { + //Boolean - Whether we animate the rotation of the Doughnut + animateRotate: true, + + //Boolean - Whether we animate scaling the Doughnut from the centre + animateScale: false, + }, //The percentage of the chart that we cut out of the middle. cutoutPercentage: 50, - - // The duration of animations triggered by hover events - hoverAnimationDuration: 400, - - //String - Animation easing effect - animationEasing: "easeOutQuart", - - //Boolean - Whether we animate the rotation of the Doughnut - animateRotate: true, - - //Boolean - Whether we animate scaling the Doughnut from the centre - animateScale: false, - + //String - A legend template legendTemplate: "" @@ -69,9 +72,9 @@ } helpers.extend(metaSlice, { startAngle: Math.PI * 1.5, - circumference: (this.options.animateRotate) ? 0 : this.calculateCircumference(metaSlice.value), - outerRadius: (this.options.animateScale) ? 0 : this.outerRadius, - innerRadius: (this.options.animateScale) ? 0 : (this.outerRadius / 100) * this.options.percentageInnerCutout, + circumference: (this.options.animation.animateRotate) ? 0 : this.calculateCircumference(metaSlice.value), + outerRadius: (this.options.animation.animateScale) ? 0 : this.outerRadius, + innerRadius: (this.options.animation.animateScale) ? 0 : (this.outerRadius / 100) * this.options.percentageInnerCutout, }); if (!metaSlice.backgroundColor) { slice.backgroundColor = 'hsl(' + (360 * index / data.length) + ', 100%, 50%)'; @@ -157,7 +160,7 @@ (this.lastActive.length && this.active.length && changed)) { this.stop(); - this.render(this.options.hoverAnimationDuration); + this.render(this.options.hover.animationDuration); } } @@ -191,7 +194,7 @@ this.total += Math.abs(slice.value); }, this); - this.outerRadius = (helpers.min([this.chart.width, this.chart.height]) - this.options.borderWidth / 2) / 2; + this.outerRadius = (helpers.min([this.chart.width, this.chart.height]) - this.options.segments.borderWidth / 2) / 2; // Map new data to data points helpers.each(this.data.metaData, function(slice, index) { @@ -210,8 +213,8 @@ backgroundColor: datapoint.backgroundColor, hoverBackgroundColor: datapoint.hoverBackgroundColor || datapoint.backgroundColor, - borderWidth: this.options.borderWidth, - borderColor: this.options.segmentStrokeColor, + borderWidth: this.options.segments.borderWidth, + borderColor: this.options.segments.strokeColor, }); helpers.extend(slice, {