Mirrors/Chart.js
2
0
Fork 0
mirror of https://github.com/chartjs/Chart.js.git synced 2026-03-04 15:34:04 +01:00
Code Issues Packages Projects Releases Wiki Activity

Doughnut controller needs to obey chart area size

Browse Source
This commit is contained in:
Evert Timberg
2015-12-04 19:22:48 -05:00
parent d905f19355
commit 38afefde25
2 changed files with 29 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/controllers/controller.doughnut.js
View File

@@ -129,8 +129,9 @@
},
update: function update(reset) {
var minSize = Math.min(this.chart.chartArea.right - this.chart.chartArea.left, this.chart.chartArea.bottom - this.chart.chartArea.top);
this.chart.outerRadius = Math.max((helpers.min([this.chart.chart.width, this.chart.chart.height]) / 2) - this.chart.options.elements.arc.borderWidth / 2, 0);
this.chart.outerRadius = Math.max((minSize / 2) - this.chart.options.elements.arc.borderWidth / 2, 0);
this.chart.innerRadius = Math.max(this.chart.options.cutoutPercentage ? (this.chart.outerRadius / 100) * (this.chart.options.cutoutPercentage) : 1, 0);
this.chart.radiusLength = (this.chart.outerRadius - this.chart.innerRadius) / this.getVisibleDatasetCount();
@@ -147,9 +148,12 @@
}, this);
},
updateElement: function(arc, index, reset) {
var centerX = (this.chart.chartArea.left + this.chart.chartArea.right) / 2;
var centerY = (this.chart.chartArea.top + this.chart.chartArea.bottom) / 2;
var resetModel = {
x: this.chart.chart.width / 2,
y: this.chart.chart.height / 2,
x: centerX,
y: centerY,
startAngle: Math.PI * -0.5, // use - PI / 2 instead of 3PI / 2 to make animations better. It means that we never deal with overflow during the transition function
circumference: (this.chart.options.animation.animateRotate) ? 0 : this.calculateCircumference(this.getDataset().data[index]),
outerRadius: (this.chart.options.animation.animateScale) ? 0 : this.outerRadius,
@@ -164,8 +168,8 @@
// Desired view properties
_model: reset ? resetModel : {
x: this.chart.chart.width / 2,
y: this.chart.chart.height / 2,
x: centerX,
y: centerY,
circumference: this.calculateCircumference(this.getDataset().data[index]),
outerRadius: this.outerRadius,
innerRadius: this.innerRadius,

32
test/controller.doughnut.tests.js
View File

@@ -62,9 +62,11 @@ describe('Doughnut controller tests', function() {
it ('Should reset and update elements', function() {
var chart = {
chart: {
width: 100,
height: 200,
chartArea: {
left: 0,
top: 0,
right: 100,
bottom: 200,
},
data: {
datasets: [{
@@ -228,9 +230,11 @@ describe('Doughnut controller tests', function() {
it ('should draw all arcs', function() {
var chart = {
chart: {
width: 100,
height: 200,
chartArea: {
left: 0,
top: 0,
right: 100,
bottom: 200,
},
data: {
datasets: [{
@@ -275,9 +279,11 @@ describe('Doughnut controller tests', function() {
it ('should set the hover style of an arc', function() {
var chart = {
chart: {
width: 100,
height: 200,
chartArea: {
left: 0,
top: 0,
right: 100,
bottom: 200,
},
data: {
datasets: [{
@@ -354,9 +360,11 @@ describe('Doughnut controller tests', function() {
it ('should unset the hover style of an arc', function() {
var chart = {
chart: {
width: 100,
height: 200,
chartArea: {
left: 0,
top: 0,
right: 100,
bottom: 200,
},
data: {
datasets: [{