mirror of
https://github.com/chartjs/Chart.js.git
synced 2024-10-06 20:29:12 +02:00
Merge pull request #2280 from nnnick/fix/2143
Update doughnut and polar area legend callbacks to handle when the background color is not set.
This commit is contained in:
commit
aae49cd334
@ -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 [];
|
||||||
}
|
}
|
||||||
|
@ -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 [];
|
||||||
}
|
}
|
||||||
|
@ -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() {
|
||||||
|
Loading…
Reference in New Issue
Block a user