diff --git a/src/controllers/controller.polarArea.js b/src/controllers/controller.polarArea.js index 372ede3f3..0577fbeed 100644 --- a/src/controllers/controller.polarArea.js +++ b/src/controllers/controller.polarArea.js @@ -109,7 +109,7 @@ module.exports = function(Chart) { var _this = this; var chart = _this.chart; var chartArea = chart.chartArea; - var meta = this.getMeta(); + var meta = _this.getMeta(); var opts = chart.options; var arcOpts = opts.elements.arc; var minSize = Math.min(chartArea.right - chartArea.left, chartArea.bottom - chartArea.top); @@ -154,24 +154,12 @@ module.exports = function(Chart) { } } - var distance = arc.hidden? 0 : scale.getDistanceFromCenterForValue(dataset.data[index]); - var startAngle = (-0.5 * Math.PI) + (circumference * visibleCount); - var endAngle = startAngle + (arc.hidden? 0 : circumference); + var negHalfPI = -0.5 * Math.PI; + var distance = arc.hidden ? 0 : scale.getDistanceFromCenterForValue(dataset.data[index]); + var startAngle = (negHalfPI) + (circumference * visibleCount); + var endAngle = startAngle + (arc.hidden ? 0 : circumference); - var resetModel = { - x: centerX, - y: centerY, - innerRadius: 0, - outerRadius: animationOpts.animateScale ? 0 : scale.getDistanceFromCenterForValue(dataset.data[index]), - startAngle: animationOpts.animateRotate ? Math.PI * -0.5 : startAngle, - endAngle: animationOpts.animateRotate ? Math.PI * -0.5 : endAngle, - - backgroundColor: custom.backgroundColor ? custom.backgroundColor : getValueAtIndexOrDefault(dataset.backgroundColor, index, arcOpts.backgroundColor), - borderWidth: custom.borderWidth ? custom.borderWidth : getValueAtIndexOrDefault(dataset.borderWidth, index, arcOpts.borderWidth), - borderColor: custom.borderColor ? custom.borderColor : getValueAtIndexOrDefault(dataset.borderColor, index, arcOpts.borderColor), - - label: getValueAtIndexOrDefault(labels, index, labels[index]) - }; + var resetRadius = animationOpts.animateScale ? 0 : scale.getDistanceFromCenterForValue(dataset.data[index]); helpers.extend(arc, { // Utility @@ -180,22 +168,20 @@ module.exports = function(Chart) { _scale: scale, // Desired view properties - _model: reset ? resetModel : { + _model: { x: centerX, y: centerY, innerRadius: 0, - outerRadius: distance, - startAngle: startAngle, - endAngle: endAngle, - - backgroundColor: custom.backgroundColor ? custom.backgroundColor : getValueAtIndexOrDefault(dataset.backgroundColor, index, arcOpts.backgroundColor), - borderWidth: custom.borderWidth ? custom.borderWidth : getValueAtIndexOrDefault(dataset.borderWidth, index, arcOpts.borderWidth), - borderColor: custom.borderColor ? custom.borderColor : getValueAtIndexOrDefault(dataset.borderColor, index, arcOpts.borderColor), - + outerRadius: reset ? resetRadius : distance, + startAngle: reset && animationOpts.animateRotate ? negHalfPI : startAngle, + endAngle: reset && animationOpts.animateRotate ? negHalfPI : endAngle, label: getValueAtIndexOrDefault(labels, index, labels[index]) } }); + // Apply border and fill style + _this.removeHoverStyle(arc); + arc.pivot(); }, diff --git a/src/core/core.js b/src/core/core.js index 5bbdc5db6..569969b42 100755 --- a/src/core/core.js +++ b/src/core/core.js @@ -4,7 +4,9 @@ module.exports = function() { //Occupy the global variable of Chart, and create a simple base class var Chart = function(context, config) { - this.config = config; + var me = this; + var helpers = Chart.helpers; + me.config = config; // Support a jQuery'd canvas element if (context.length && context[0].getContext) { @@ -16,45 +18,44 @@ module.exports = function() { context = context.getContext("2d"); } - this.ctx = context; - this.canvas = context.canvas; + me.ctx = context; + me.canvas = context.canvas; // Figure out what the size of the chart will be. // If the canvas has a specified width and height, we use those else // we look to see if the canvas node has a CSS width and height. // If there is still no height, fill the parent container - this.width = context.canvas.width || parseInt(Chart.helpers.getStyle(context.canvas, 'width')) || Chart.helpers.getMaximumWidth(context.canvas); - this.height = context.canvas.height || parseInt(Chart.helpers.getStyle(context.canvas, 'height')) || Chart.helpers.getMaximumHeight(context.canvas); + me.width = context.canvas.width || parseInt(helpers.getStyle(context.canvas, 'width'), 10) || helpers.getMaximumWidth(context.canvas); + me.height = context.canvas.height || parseInt(helpers.getStyle(context.canvas, 'height'), 10) || helpers.getMaximumHeight(context.canvas); - this.aspectRatio = this.width / this.height; + me.aspectRatio = me.width / me.height; - if (isNaN(this.aspectRatio) || isFinite(this.aspectRatio) === false) { + if (isNaN(me.aspectRatio) || isFinite(me.aspectRatio) === false) { // If the canvas has no size, try and figure out what the aspect ratio will be. // Some charts prefer square canvases (pie, radar, etc). If that is specified, use that // else use the canvas default ratio of 2 - this.aspectRatio = config.aspectRatio !== undefined ? config.aspectRatio : 2; + me.aspectRatio = config.aspectRatio !== undefined ? config.aspectRatio : 2; } // Store the original style of the element so we can set it back - this.originalCanvasStyleWidth = context.canvas.style.width; - this.originalCanvasStyleHeight = context.canvas.style.height; + me.originalCanvasStyleWidth = context.canvas.style.width; + me.originalCanvasStyleHeight = context.canvas.style.height; // High pixel density displays - multiply the size of the canvas height/width by the device pixel ratio, then scale. - Chart.helpers.retinaScale(this); + helpers.retinaScale(me); if (config) { - this.controller = new Chart.Controller(this); + me.controller = new Chart.Controller(me); } // Always bind this so that if the responsive state changes we still work - var _this = this; - Chart.helpers.addResizeListener(context.canvas.parentNode, function() { - if (_this.controller && _this.controller.config.options.responsive) { - _this.controller.resize(); + helpers.addResizeListener(context.canvas.parentNode, function() { + if (me.controller && me.controller.config.options.responsive) { + me.controller.resize(); } }); - return this.controller ? this.controller : this; + return me.controller ? me.controller : me; };