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

Html dom building (#6490)

Browse Source 
Replaces #6179 and builds HTML legend strings using dom nodes rather than building up an HTML string directly.
This commit is contained in:
Ben McCann
2019-09-07 04:19:17 -07:00
committed by Evert Timberg
parent f68b8adaac
commit df9e2d00bd
4 changed files with 34 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -22,25 +22,25 @@ defaults._set('doughnut', {
mode: 'single'
},
legendCallback: function(chart) {
var text = [];
text.push('<ul class="' + chart.id + '-legend">');
var list = document.createElement('ul');
var data = chart.data;
var datasets = data.datasets;
var labels = data.labels;
var i, ilen, listItem, listItemSpan;
list.setAttribute('class', chart.id + '-legend');
if (datasets.length) {
for (var i = 0; i < datasets[0].data.length; ++i) {
text.push('<li><span style="background-color:' + datasets[0].backgroundColor[i] + '"></span>');
for (i = 0, ilen = datasets[0].data.length; i < ilen; ++i) {
listItem = list.appendChild(document.createElement('li'));
listItemSpan = listItem.appendChild(document.createElement('span'));
listItemSpan.style.backgroundColor = datasets[0].backgroundColor[i];
if (labels[i]) {
text.push(labels[i]);
listItem.appendChild(document.createTextNode(labels[i]));
}
text.push('</li>');
}
}
text.push('</ul>');
return text.join('');
return list.outerHTML;
},
legend: {
labels: {

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

@@ -32,25 +32,25 @@ defaults._set('polarArea', {
startAngle: -0.5 * Math.PI,
legendCallback: function(chart) {
var text = [];
text.push('<ul class="' + chart.id + '-legend">');
var list = document.createElement('ul');
var data = chart.data;
var datasets = data.datasets;
var labels = data.labels;
var i, ilen, listItem, listItemSpan;
list.setAttribute('class', chart.id + '-legend');
if (datasets.length) {
for (var i = 0; i < datasets[0].data.length; ++i) {
text.push('<li><span style="background-color:' + datasets[0].backgroundColor[i] + '"></span>');
for (i = 0, ilen = datasets[0].data.length; i < ilen; ++i) {
listItem = list.appendChild(document.createElement('li'));
listItemSpan = listItem.appendChild(document.createElement('span'));
listItemSpan.style.backgroundColor = datasets[0].backgroundColor[i];
if (labels[i]) {
text.push(labels[i]);
listItem.appendChild(document.createTextNode(labels[i]));
}
text.push('</li>');
}
}
text.push('</ul>');
return text.join('');
return list.outerHTML;
},
legend: {
labels: {

23
src/plugins/plugin.legend.js
View File

@@ -78,17 +78,22 @@ defaults._set('global', {
},
legendCallback: function(chart) {
var text = [];
text.push('<ul class="' + chart.id + '-legend">');
for (var i = 0; i < chart.data.datasets.length; i++) {
text.push('<li><span style="background-color:' + chart.data.datasets[i].backgroundColor + '"></span>');
if (chart.data.datasets[i].label) {
text.push(chart.data.datasets[i].label);
var list = document.createElement('ul');
var datasets = chart.data.datasets;
var i, ilen, listItem, listItemSpan;
list.setAttribute('class', chart.id + '-legend');
for (i = 0, ilen = datasets.length; i < ilen; i++) {
listItem = list.appendChild(document.createElement('li'));
listItemSpan = listItem.appendChild(document.createElement('span'));
listItemSpan.style.backgroundColor = datasets[i].backgroundColor;
if (datasets[i].label) {
listItem.appendChild(document.createTextNode(datasets[i].label));
}
text.push('</li>');
}
text.push('</ul>');
return text.join('');
return list.outerHTML;
}
});

4
test/specs/global.defaults.tests.js
View File

@@ -102,7 +102,7 @@ describe('Default Configs', function() {
options: config
});
var expectedLegend = '<ul class="' + chart.id + '-legend"><li><span style="background-color:red"></span>label1</li><li><span style="background-color:green"></span>label2</li></ul>';
var expectedLegend = '<ul class="' + chart.id + '-legend"><li><span style="background-color: red;"></span>label1</li><li><span style="background-color: green;"></span>label2</li></ul>';
expect(chart.generateLegend()).toBe(expectedLegend);
});
@@ -218,7 +218,7 @@ describe('Default Configs', function() {
options: config
});
var expectedLegend = '<ul class="' + chart.id + '-legend"><li><span style="background-color:red"></span>label1</li><li><span style="background-color:green"></span>label2</li></ul>';
var expectedLegend = '<ul class="' + chart.id + '-legend"><li><span style="background-color: red;"></span>label1</li><li><span style="background-color: green;"></span>label2</li></ul>';
expect(chart.generateLegend()).toBe(expectedLegend);
});