Mirrors/Chart.js
1
0
Fork 0
mirror of https://github.com/chartjs/Chart.js.git synced 2024-10-06 12:19:08 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #2280 from nnnick/fix/2143

Browse Source 
Update doughnut and polar area legend callbacks to handle when the background color is not set.
This commit is contained in:
Evert Timberg 2016-04-17 09:03:46 -04:00
commit aae49cd334
3 changed files with 67 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -36,16 +36,25 @@ module.exports = function(Chart) {
labels: {
generateLabels: function(data) {
if (data.labels.length && data.datasets.length) {
return data.labels.map(function(label, i) {
var ds = data.datasets[0];
var arc = ds.metaData[i];
var fill = arc.custom && arc.custom.backgroundColor ? arc.custom.backgroundColor : helpers.getValueAtIndexOrDefault(ds.backgroundColor, i, this.chart.options.elements.arc.backgroundColor);
var stroke = arc.custom && arc.custom.borderColor ? arc.custom.borderColor : helpers.getValueAtIndexOrDefault(ds.borderColor, i, this.chart.options.elements.arc.borderColor);
var bw = arc.custom && arc.custom.borderWidth ? arc.custom.borderWidth : helpers.getValueAtIndexOrDefault(ds.borderWidth, i, this.chart.options.elements.arc.borderWidth);
return {
text: label,
fillStyle: data.datasets[0].backgroundColor[i],
fillStyle: fill,
strokeStyle: stroke,
lineWidth: bw,
hidden: isNaN(data.datasets[0].data[i]),
// Extra data used for toggling the correct item
index: i
};
});
}, this);
} else {
return [];
}

12
src/controllers/controller.polarArea.js
View File

@ -38,15 +38,23 @@ module.exports = function(Chart) {
generateLabels: function(data) {
if (data.labels.length && data.datasets.length) {
return data.labels.map(function(label, i) {
var ds = data.datasets[0];
var arc = ds.metaData[i];
var fill = arc.custom && arc.custom.backgroundColor ? arc.custom.backgroundColor : helpers.getValueAtIndexOrDefault(ds.backgroundColor, i, this.chart.options.elements.arc.backgroundColor);
var stroke = arc.custom && arc.custom.borderColor ? arc.custom.borderColor : helpers.getValueAtIndexOrDefault(ds.borderColor, i, this.chart.options.elements.arc.borderColor);
var bw = arc.custom && arc.custom.borderWidth ? arc.custom.borderWidth : helpers.getValueAtIndexOrDefault(ds.borderWidth, i, this.chart.options.elements.arc.borderWidth);
return {
text: label,
fillStyle: data.datasets[0].backgroundColor[i],
fillStyle: fill,
strokeStyle: stroke,
lineWidth: bw,
hidden: isNaN(data.datasets[0].data[i]),
// Extra data used for toggling the correct item
index: i
};
});
}, this);
} else {
return [];
}

56
test/defaultConfig.tests.js
View File

@ -74,7 +74,8 @@ describe('Test the doughnut chart default config', function() {
labels: ['label1', 'label2', 'label3'],
datasets: [{
data: [10, 20, NaN],
backgroundColor: ['red', 'green', 'blue']
backgroundColor: ['red', 'green', 'blue'],
metaData: [{}, {}, {}]
}]
};
@ -82,20 +83,37 @@ describe('Test the doughnut chart default config', function() {
text: 'label1',
fillStyle: 'red',
hidden: false,
index: 0
index: 0,
strokeStyle: '#000',
lineWidth: 2
}, {
text: 'label2',
fillStyle: 'green',
hidden: false,
index: 1
index: 1,
strokeStyle: '#000',
lineWidth: 2
}, {
text: 'label3',
fillStyle: 'blue',
hidden: true,
index: 2
index: 2,
strokeStyle: '#000',
lineWidth: 2
}];
expect(config.legend.labels.generateLabels(data)).toEqual(expected);
var chart = {
data: data,
options: {
elements: {
arc: {
borderWidth: 2,
borderColor: '#000'
}
}
}
};
expect(config.legend.labels.generateLabels.call({ chart: chart }, data)).toEqual(expected);
});
it('should hide the correct arc when a legend item is clicked', function() {
@ -189,7 +207,8 @@ describe('Test the polar area chart default config', function() {
labels: ['label1', 'label2', 'label3'],
datasets: [{
data: [10, 20, NaN],
backgroundColor: ['red', 'green', 'blue']
backgroundColor: ['red', 'green', 'blue'],
metaData: [{}, {}, {}]
}]
};
@ -197,20 +216,37 @@ describe('Test the polar area chart default config', function() {
text: 'label1',
fillStyle: 'red',
hidden: false,
index: 0
index: 0,
strokeStyle: '#000',
lineWidth: 2
}, {
text: 'label2',
fillStyle: 'green',
hidden: false,
index: 1
index: 1,
strokeStyle: '#000',
lineWidth: 2
}, {
text: 'label3',
fillStyle: 'blue',
hidden: true,
index: 2
index: 2,
strokeStyle: '#000',
lineWidth: 2
}];
expect(config.legend.labels.generateLabels(data)).toEqual(expected);
var chart = {
data: data,
options: {
elements: {
arc: {
borderWidth: 2,
borderColor: '#000'
}
}
}
};
expect(config.legend.labels.generateLabels.call({ chart: chart }, data)).toEqual(expected);
});
it('should hide the correct arc when a legend item is clicked', function() {