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: { labels: {
generateLabels: function(data) { generateLabels: function(data) {
if (data.labels.length && data.datasets.length) { if (data.labels.length && data.datasets.length) {
return data.labels.map(function(label, i) { 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 { return {
text: label, text: label,
fillStyle: data.datasets[0].backgroundColor[i], fillStyle: fill,
strokeStyle: stroke,
lineWidth: bw,
hidden: isNaN(data.datasets[0].data[i]), hidden: isNaN(data.datasets[0].data[i]),
// Extra data used for toggling the correct item // Extra data used for toggling the correct item
index: i index: i
}; };
}); }, this);
} else { } else {
return []; return [];
} }

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

@ -38,15 +38,23 @@ module.exports = function(Chart) {
generateLabels: function(data) { generateLabels: function(data) {
if (data.labels.length && data.datasets.length) { if (data.labels.length && data.datasets.length) {
return data.labels.map(function(label, i) { 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 { return {
text: label, text: label,
fillStyle: data.datasets[0].backgroundColor[i], fillStyle: fill,
strokeStyle: stroke,
lineWidth: bw,
hidden: isNaN(data.datasets[0].data[i]), hidden: isNaN(data.datasets[0].data[i]),
// Extra data used for toggling the correct item // Extra data used for toggling the correct item
index: i index: i
}; };
}); }, this);
} else { } else {
return []; return [];
} }

56
test/defaultConfig.tests.js
View File

@ -74,7 +74,8 @@ describe('Test the doughnut chart default config', function() {
labels: ['label1', 'label2', 'label3'], labels: ['label1', 'label2', 'label3'],
datasets: [{ datasets: [{
data: [10, 20, NaN], 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', text: 'label1',
fillStyle: 'red', fillStyle: 'red',
hidden: false, hidden: false,
index: 0 index: 0,
strokeStyle: '#000',
lineWidth: 2
}, { }, {
text: 'label2', text: 'label2',
fillStyle: 'green', fillStyle: 'green',
hidden: false, hidden: false,
index: 1 index: 1,
strokeStyle: '#000',
lineWidth: 2
}, { }, {
text: 'label3', text: 'label3',
fillStyle: 'blue', fillStyle: 'blue',
hidden: true, 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() { 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'], labels: ['label1', 'label2', 'label3'],
datasets: [{ datasets: [{
data: [10, 20, NaN], 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', text: 'label1',
fillStyle: 'red', fillStyle: 'red',
hidden: false, hidden: false,
index: 0 index: 0,
strokeStyle: '#000',
lineWidth: 2
}, { }, {
text: 'label2', text: 'label2',
fillStyle: 'green', fillStyle: 'green',
hidden: false, hidden: false,
index: 1 index: 1,
strokeStyle: '#000',
lineWidth: 2
}, { }, {
text: 'label3', text: 'label3',
fillStyle: 'blue', fillStyle: 'blue',
hidden: true, 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() { it('should hide the correct arc when a legend item is clicked', function() {