archive-gh-me/Chart.js
1
0
Fork 0
mirror of https://github.com/chartjs/Chart.js.git synced 2025-12-08 20:36:08 +00:00
Code Issues Projects Releases Wiki Activity

Legends for Line, Bar & Radar charts.

Browse Source
This commit is contained in:
Evert Timberg 2015-07-05 14:47:56 -04:00
parent dfd48debe5
commit 0caa2a79ae
6 changed files with 66 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
samples/bar.html
View File

@ -16,6 +16,12 @@
<button id="removeDataset">Remove Dataset</button>
<button id="addData">Add Data</button>
<button id="removeData">Remove Data</button>
<div>
<h3>Legend</h3>
<div id="legendContainer">
</div>
</div>
<script>
var randomScalingFactor = function() {
return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
@ -44,6 +50,13 @@
}]
};
function updateLegend() {
$legendContainer = $('#legendContainer');
$legendContainer.empty();
$legendContainer.append(window.myBar.generateLegend());
}
window.onload = function() {
var ctx = document.getElementById("canvas").getContext("2d");
window.myBar = new Chart(ctx, {
@ -53,6 +66,8 @@
responsive: true,
}
});
updateLegend();
};
$('#randomizeData').click(function() {
@ -65,6 +80,7 @@
});
window.myBar.update();
updateLegend();
});
$('#addDataset').click(function() {
@ -79,6 +95,7 @@
}
window.myBar.addDataset(newDataset, 1);
updateLegend();
});
$('#addData').click(function() {
@ -88,11 +105,14 @@
for (var index = 0; index < barChartData.datasets.length; ++index) {
window.myBar.addData(randomScalingFactor(), index);
}
updateLegend();
}
});
$('#removeDataset').click(function() {
window.myBar.removeDataset(0);
updateLegend();
});
$('#removeData').click(function() {
@ -101,6 +121,7 @@
barChartData.datasets.forEach(function(dataset, datasetIndex) {
window.myBar.removeData(datasetIndex, -1);
});
updateLegend();
});
</script>
</body>

21
samples/line.html
View File

@ -23,6 +23,12 @@
<button id="removeDataset">Remove Dataset</button>
<button id="addData">Add Data</button>
<button id="removeData">Remove Data</button>
<div>
<h3>Legend</h3>
<div id="legendContainer">
</div>
</div>
<script>
var randomScalingFactor = function() {
return Math.round(Math.random() * 100 * (Math.random() > 0.5 ? -1 : 1));
@ -74,8 +80,16 @@
window.onload = function() {
var ctx = document.getElementById("canvas").getContext("2d");
window.myLine = new Chart(ctx, config);
updateLegend();
};
function updateLegend() {
$legendContainer = $('#legendContainer');
$legendContainer.empty();
$legendContainer.append(window.myLine.generateLegend());
}
$('#randomizeData').click(function() {
$.each(config.data.datasets, function(i, dataset) {
dataset.data = dataset.data.map(function() {
@ -85,6 +99,7 @@
});
window.myLine.update();
updateLegend();
});
$('#addDataset').click(function() {
@ -103,6 +118,7 @@
}
window.myLine.addDataset(newDataset);
updateLegend();
});
$('#addData').click(function() {
@ -112,11 +128,14 @@
for (var index = 0; index < config.data.datasets.length; ++index) {
window.myLine.addData(randomScalingFactor(), index);
}
updateLegend();
}
});
$('#removeDataset').click(function() {
window.myLine.removeDataset(0);
updateLegend();
});
$('#removeData').click(function() {
@ -125,6 +144,8 @@
config.data.datasets.forEach(function(dataset, datasetIndex) {
window.myLine.removeData(datasetIndex, -1);
});
updateLegend();
});
</script>
</body>

20
samples/radar.html
View File

@ -16,6 +16,12 @@
<button id="removeDataset">Remove Dataset</button>
<button id="addData">Add Data</button>
<button id="removeData">Remove Data</button>
]<div>
<h3>Legend</h3>
<div id="legendContainer">
</div>
</div>
<script>
var randomScalingFactor = function() {
return Math.round(Math.random() * 100);
@ -47,8 +53,15 @@
}
};
function updateLegend() {
$legendContainer = $('#legendContainer');
$legendContainer.empty();
$legendContainer.append(window.myRadar.generateLegend());
}
window.onload = function() {
window.myRadar = new Chart(document.getElementById("canvas"), config);
updateLegend();
};
$('#randomizeData').click(function() {
@ -60,6 +73,7 @@
});
window.myRadar.update();
updateLegend();
});
$('#addDataset').click(function() {
@ -78,6 +92,7 @@
}
window.myRadar.addDataset(newDataset);
updateLegend();
});
$('#addData').click(function() {
@ -87,11 +102,14 @@
for (var index = 0; index < config.data.datasets.length; ++index) {
window.myRadar.addData(randomScalingFactor(), index);
}
updateLegend();
}
});
$('#removeDataset').click(function() {
window.myRadar.removeDataset(0);
updateLegend();
});
$('#removeData').click(function() {
@ -100,6 +118,8 @@
config.data.datasets.forEach(function(dataset, datasetIndex) {
window.myRadar.removeData(datasetIndex, -1);
});
updateLegend();
});
</script>
</body>

3
src/charts/Chart.Scatter.js
View File

@ -23,9 +23,6 @@
}],
},
//String - A legend template
legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].borderColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>",
tooltips: {
template: "(<%= value.x %>, <%= value.y %>)",
multiTemplate: "<%if (datasetLabel){%><%=datasetLabel%>: <%}%>(<%= value.x %>, <%= value.y %>)",

2
src/core/core.controller.js
View File

@ -338,7 +338,7 @@
},
generateLegend: function generateLegend() {
return template(this.options.legendTemplate, this);
return helpers.template(this.options.legendTemplate, this);
},
destroy: function destroy() {

4
src/core/core.js
View File

@ -83,8 +83,10 @@
defaultColor: 'rgba(0,0,0,0.1)',
// Element defaults defined in element extensions
elements: {}
elements: {},
// Legend template string
legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i = 0; i < data.datasets.length; i++){%><li><span style=\"background-color:<%=data.datasets[i].backgroundColor%>\"><%if(data.datasets[i].label){%><%=data.datasets[i].label%><%}%></span></li><%}%></ul>",
},
};