From 891655b3cea3ac48becc637a578222136297e248 Mon Sep 17 00:00:00 2001 From: Evert Timberg Date: Thu, 18 Jun 2015 18:51:00 -0400 Subject: [PATCH] Polar area charts now support addData and removeData. Fixed an issue with the animateRotate and animateScale options for polar area charts. --- samples/polar-area.html | 29 +++++++- src/controllers/controller.polarArea.js | 94 +++++++++++++++---------- 2 files changed, 82 insertions(+), 41 deletions(-) diff --git a/samples/polar-area.html b/samples/polar-area.html index 73d5c6049..a8c74d16b 100644 --- a/samples/polar-area.html +++ b/samples/polar-area.html @@ -8,10 +8,12 @@ -
+
+ + diff --git a/src/controllers/controller.polarArea.js b/src/controllers/controller.polarArea.js index 733ab9dc6..4fe948bf8 100644 --- a/src/controllers/controller.polarArea.js +++ b/src/controllers/controller.polarArea.js @@ -16,6 +16,7 @@ //Boolean - Whether to animate the rotation of the chart animateRotate: true, + animateScale: true, }; Chart.controllers.polarArea = function(chart, datasetIndex) { @@ -56,6 +57,23 @@ }); }, this); }, + addElementAndReset: function(index) { + this.getDataset().metaData = this.getDataset().metaData || []; + var arc = new Chart.elements.Arc({ + _chart: this.chart.chart, + _datasetIndex: this.index, + _index: index, + }); + + // Reset the point + this.updateElement(arc, index, true); + + // Add to the points array + this.getDataset().metaData.splice(index, 0, arc); + }, + removeElement: function(index) { + this.getDataset().metaData.splice(index, 1); + }, reset: function() { this.update(true); @@ -82,14 +100,44 @@ this.innerRadius = this.outerRadius - this.chart.radiusLength; helpers.each(this.getDataset().metaData, function(arc, index) { + this.updateElement(arc, index, reset); + }, this); + }, + updateElement: function(arc, index, reset) { + var circumference = 1 / this.getDataset().data.length * 2; + var startAngle = (-0.5 * Math.PI) + (Math.PI * circumference) * index; + var endAngle = startAngle + (circumference * Math.PI); - var resetModel = { + var resetModel = { + x: this.chart.chart.width / 2, + y: this.chart.chart.height / 2, + innerRadius: 0, + outerRadius: this.chart.options.animateScale ? 0 : this.chart.scale.getDistanceFromCenterForValue(this.getDataset().data[index]), + startAngle: this.chart.options.animateRotate ? Math.PI * -0.5 : startAngle, + endAngle: this.chart.options.animateRotate ? Math.PI * -0.5 : endAngle, + + backgroundColor: arc.custom && arc.custom.backgroundColor ? arc.custom.backgroundColor : helpers.getValueAtIndexOrDefault(this.getDataset().backgroundColor, index, this.chart.options.elements.arc.backgroundColor), + hoverBackgroundColor: arc.custom && arc.custom.hoverBackgroundColor ? arc.custom.hoverBackgroundColor : helpers.getValueAtIndexOrDefault(this.getDataset().hoverBackgroundColor, index, this.chart.options.elements.arc.hoverBackgroundColor), + borderWidth: arc.custom && arc.custom.borderWidth ? arc.custom.borderWidth : helpers.getValueAtIndexOrDefault(this.getDataset().borderWidth, index, this.chart.options.elements.arc.borderWidth), + borderColor: arc.custom && arc.custom.borderColor ? arc.custom.borderColor : helpers.getValueAtIndexOrDefault(this.getDataset().borderColor, index, this.chart.options.elements.arc.borderColor), + + label: helpers.getValueAtIndexOrDefault(this.chart.data.labels, index, this.chart.data.labels[index]) + }; + + helpers.extend(arc, { + // Utility + _chart: this.chart.chart, + _datasetIndex: this.index, + _index: index, + + // Desired view properties + _model: reset ? resetModel : { x: this.chart.chart.width / 2, y: this.chart.chart.height / 2, innerRadius: 0, - outerRadius: 0, - startAngle: Math.PI * -0.5, - endAngle: Math.PI * -0.5, + outerRadius: this.chart.scale.getDistanceFromCenterForValue(this.getDataset().data[index]), + startAngle: startAngle, + endAngle: endAngle, backgroundColor: arc.custom && arc.custom.backgroundColor ? arc.custom.backgroundColor : helpers.getValueAtIndexOrDefault(this.getDataset().backgroundColor, index, this.chart.options.elements.arc.backgroundColor), hoverBackgroundColor: arc.custom && arc.custom.hoverBackgroundColor ? arc.custom.hoverBackgroundColor : helpers.getValueAtIndexOrDefault(this.getDataset().hoverBackgroundColor, index, this.chart.options.elements.arc.hoverBackgroundColor), @@ -97,40 +145,10 @@ borderColor: arc.custom && arc.custom.borderColor ? arc.custom.borderColor : helpers.getValueAtIndexOrDefault(this.getDataset().borderColor, index, this.chart.options.elements.arc.borderColor), label: helpers.getValueAtIndexOrDefault(this.chart.data.labels, index, this.chart.data.labels[index]) - }; + }, + }); - var circumference = 1 / this.getDataset().data.length * 2; - var startAngle = (-0.5 * Math.PI) + (Math.PI * circumference) * index; - var endAngle = startAngle + (circumference * Math.PI); - - console.log() - - helpers.extend(arc, { - // Utility - _chart: this.chart.chart, - _datasetIndex: this.index, - _index: index, - - // Desired view properties - _model: reset ? resetModel : { - x: this.chart.chart.width / 2, - y: this.chart.chart.height / 2, - innerRadius: 0, - outerRadius: this.chart.scale.getDistanceFromCenterForValue(this.getDataset().data[index]), - startAngle: startAngle, - endAngle: endAngle, - - backgroundColor: arc.custom && arc.custom.backgroundColor ? arc.custom.backgroundColor : helpers.getValueAtIndexOrDefault(this.getDataset().backgroundColor, index, this.chart.options.elements.arc.backgroundColor), - hoverBackgroundColor: arc.custom && arc.custom.hoverBackgroundColor ? arc.custom.hoverBackgroundColor : helpers.getValueAtIndexOrDefault(this.getDataset().hoverBackgroundColor, index, this.chart.options.elements.arc.hoverBackgroundColor), - borderWidth: arc.custom && arc.custom.borderWidth ? arc.custom.borderWidth : helpers.getValueAtIndexOrDefault(this.getDataset().borderWidth, index, this.chart.options.elements.arc.borderWidth), - borderColor: arc.custom && arc.custom.borderColor ? arc.custom.borderColor : helpers.getValueAtIndexOrDefault(this.getDataset().borderColor, index, this.chart.options.elements.arc.borderColor), - - label: helpers.getValueAtIndexOrDefault(this.chart.data.labels, index, this.chart.data.labels[index]) - }, - }); - - arc.pivot(); - }, this); + arc.pivot(); }, draw: function(ease) { @@ -141,8 +159,6 @@ }, this); }, - - setHoverStyle: function(arc) { var dataset = this.chart.data.datasets[arc._datasetIndex]; var index = arc._index;