mirror of
https://github.com/chartjs/Chart.js.git
synced 2024-10-07 12:49:07 +02:00
Merge pull request #2067 from nnnick/fix/animations
Fix bar chart and doughnut chart animations
This commit is contained in:
commit
431f930c15
@ -113,7 +113,7 @@ module.exports = function(Chart) {
|
||||
datasetLabel: this.getDataset().label,
|
||||
|
||||
// Appearance
|
||||
base: this.calculateBarBase(this.index, index),
|
||||
base: reset ? yScalePoint : this.calculateBarBase(this.index, index),
|
||||
width: this.calculateBarWidth(numBars),
|
||||
backgroundColor: rectangle.custom && rectangle.custom.backgroundColor ? rectangle.custom.backgroundColor : helpers.getValueAtIndexOrDefault(this.getDataset().backgroundColor, index, this.chart.options.elements.rectangle.backgroundColor),
|
||||
borderColor: rectangle.custom && rectangle.custom.borderColor ? rectangle.custom.borderColor : helpers.getValueAtIndexOrDefault(this.getDataset().borderColor, index, this.chart.options.elements.rectangle.borderColor),
|
||||
|
@ -163,16 +163,11 @@ module.exports = function(Chart) {
|
||||
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: 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
|
||||
endAngle: Math.PI * -0.5,
|
||||
circumference: (this.chart.options.animation.animateRotate) ? 0 : this.calculateCircumference(this.getDataset().data[index]),
|
||||
outerRadius: (this.chart.options.animation.animateScale) ? 0 : this.outerRadius,
|
||||
innerRadius: (this.chart.options.animation.animateScale) ? 0 : this.innerRadius
|
||||
};
|
||||
var startAngle = Math.PI * -0.5; // non reset case handled later
|
||||
var endAngle = Math.PI * -0.5; // non reset case handled later
|
||||
var circumference = reset && this.chart.options.animation.animateRotate ? 0 : this.calculateCircumference(this.getDataset().data[index]);
|
||||
var innerRadius = reset && this.chart.options.animation.animateScale ? 0 : this.innerRadius;
|
||||
var outerRadius = reset && this.chart.options.animation.animateScale ? 0 : this.outerRadius;
|
||||
|
||||
helpers.extend(arc, {
|
||||
// Utility
|
||||
@ -181,12 +176,14 @@ module.exports = function(Chart) {
|
||||
_index: index,
|
||||
|
||||
// Desired view properties
|
||||
_model: reset ? resetModel : {
|
||||
_model: {
|
||||
x: centerX,
|
||||
y: centerY,
|
||||
circumference: this.calculateCircumference(this.getDataset().data[index]),
|
||||
outerRadius: this.outerRadius,
|
||||
innerRadius: this.innerRadius,
|
||||
startAngle: startAngle,
|
||||
endAngle: endAngle,
|
||||
circumference: circumference,
|
||||
outerRadius: outerRadius,
|
||||
innerRadius: innerRadius,
|
||||
|
||||
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),
|
||||
@ -197,6 +194,7 @@ module.exports = function(Chart) {
|
||||
}
|
||||
});
|
||||
|
||||
// Set correct angles if not resetting
|
||||
if (!reset) {
|
||||
|
||||
if (index === 0) {
|
||||
@ -206,12 +204,6 @@ module.exports = function(Chart) {
|
||||
}
|
||||
|
||||
arc._model.endAngle = arc._model.startAngle + arc._model.circumference;
|
||||
|
||||
|
||||
//Check to see if it's the last arc, if not get the next and update its start angle
|
||||
if (index < this.getDataset().data.length - 1) {
|
||||
this.getDataset().metaData[index + 1]._model.startAngle = arc._model.endAngle;
|
||||
}
|
||||
}
|
||||
|
||||
arc.pivot();
|
||||
|
@ -58,7 +58,6 @@ module.exports = function(Chart) {
|
||||
this.updateLayout();
|
||||
this.resetElements();
|
||||
this.initToolTip();
|
||||
this.draw();
|
||||
this.update();
|
||||
|
||||
// TODO
|
||||
|
@ -82,7 +82,7 @@ describe('Doughnut controller tests', function() {
|
||||
var controller = new Chart.controllers.doughnut(chart, 1);
|
||||
controller.reset(); // reset first
|
||||
|
||||
expect(chart.data.datasets[1].metaData[0]._model).toEqual({
|
||||
expect(chart.data.datasets[1].metaData[0]._model).toEqual(jasmine.objectContaining({
|
||||
x: 50,
|
||||
y: 100,
|
||||
startAngle: Math.PI * -0.5,
|
||||
@ -90,9 +90,9 @@ describe('Doughnut controller tests', function() {
|
||||
circumference: 2.166614539857563,
|
||||
outerRadius: 49,
|
||||
innerRadius: 36.75
|
||||
});
|
||||
}));
|
||||
|
||||
expect(chart.data.datasets[1].metaData[1]._model).toEqual({
|
||||
expect(chart.data.datasets[1].metaData[1]._model).toEqual(jasmine.objectContaining({
|
||||
x: 50,
|
||||
y: 100,
|
||||
startAngle: Math.PI * -0.5,
|
||||
@ -100,9 +100,9 @@ describe('Doughnut controller tests', function() {
|
||||
circumference: 3.2499218097863447,
|
||||
outerRadius: 49,
|
||||
innerRadius: 36.75
|
||||
});
|
||||
}));
|
||||
|
||||
expect(chart.data.datasets[1].metaData[2]._model).toEqual({
|
||||
expect(chart.data.datasets[1].metaData[2]._model).toEqual(jasmine.objectContaining({
|
||||
x: 50,
|
||||
y: 100,
|
||||
startAngle: Math.PI * -0.5,
|
||||
@ -110,9 +110,9 @@ describe('Doughnut controller tests', function() {
|
||||
circumference: 0,
|
||||
outerRadius: 49,
|
||||
innerRadius: 36.75
|
||||
});
|
||||
}));
|
||||
|
||||
expect(chart.data.datasets[1].metaData[3]._model).toEqual({
|
||||
expect(chart.data.datasets[1].metaData[3]._model).toEqual(jasmine.objectContaining({
|
||||
x: 50,
|
||||
y: 100,
|
||||
startAngle: Math.PI * -0.5,
|
||||
@ -120,11 +120,11 @@ describe('Doughnut controller tests', function() {
|
||||
circumference: 0.8666458159430251,
|
||||
outerRadius: 49,
|
||||
innerRadius: 36.75
|
||||
});
|
||||
}));
|
||||
|
||||
controller.update();
|
||||
|
||||
expect(chart.data.datasets[1].metaData[0]._model).toEqual({
|
||||
expect(chart.data.datasets[1].metaData[0]._model).toEqual(jasmine.objectContaining({
|
||||
x: 50,
|
||||
y: 100,
|
||||
startAngle: Math.PI * -0.5,
|
||||
@ -139,9 +139,9 @@ describe('Doughnut controller tests', function() {
|
||||
hoverBackgroundColor: 'rgb(255, 255, 255)',
|
||||
|
||||
label: 'label0',
|
||||
});
|
||||
}));
|
||||
|
||||
expect(chart.data.datasets[1].metaData[1]._model).toEqual({
|
||||
expect(chart.data.datasets[1].metaData[1]._model).toEqual(jasmine.objectContaining({
|
||||
x: 50,
|
||||
y: 100,
|
||||
startAngle: 0.5958182130626666,
|
||||
@ -156,9 +156,9 @@ describe('Doughnut controller tests', function() {
|
||||
hoverBackgroundColor: 'rgb(255, 255, 255)',
|
||||
|
||||
label: 'label1'
|
||||
});
|
||||
}));
|
||||
|
||||
expect(chart.data.datasets[1].metaData[2]._model).toEqual({
|
||||
expect(chart.data.datasets[1].metaData[2]._model).toEqual(jasmine.objectContaining({
|
||||
x: 50,
|
||||
y: 100,
|
||||
startAngle: 3.8457400228490113,
|
||||
@ -173,9 +173,9 @@ describe('Doughnut controller tests', function() {
|
||||
hoverBackgroundColor: 'rgb(255, 255, 255)',
|
||||
|
||||
label: 'label2'
|
||||
});
|
||||
}));
|
||||
|
||||
expect(chart.data.datasets[1].metaData[3]._model).toEqual({
|
||||
expect(chart.data.datasets[1].metaData[3]._model).toEqual(jasmine.objectContaining({
|
||||
x: 50,
|
||||
y: 100,
|
||||
startAngle: 3.8457400228490113,
|
||||
@ -190,7 +190,7 @@ describe('Doughnut controller tests', function() {
|
||||
hoverBackgroundColor: 'rgb(255, 255, 255)',
|
||||
|
||||
label: 'label3'
|
||||
});
|
||||
}));
|
||||
|
||||
// Change the amount of data and ensure that arcs are updated accordingly
|
||||
chart.data.datasets[1].data = [1, 2]; // remove 2 elements from dataset 0
|
||||
|
Loading…
Reference in New Issue
Block a user