mirror of
https://github.com/chartjs/Chart.js.git
synced 2024-10-06 12:19:08 +02:00
Doughnut legends (only makes sense for first dataset).
This commit is contained in:
parent
84aba3f6d3
commit
925e305184
@ -26,6 +26,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);
|
||||
@ -38,7 +44,6 @@
|
||||
};
|
||||
|
||||
var config = {
|
||||
type: 'doughnut',
|
||||
data: {
|
||||
datasets: [{
|
||||
data: [
|
||||
@ -99,10 +104,18 @@
|
||||
}
|
||||
};
|
||||
|
||||
function updateLegend() {
|
||||
$legendContainer = $('#legendContainer');
|
||||
$legendContainer.empty();
|
||||
$legendContainer.append(window.myDoughnut.generateLegend());
|
||||
}
|
||||
|
||||
window.onload = function() {
|
||||
var ctx = document.getElementById("chart-area").getContext("2d");
|
||||
window.myDoughnut = new Chart(ctx, config);
|
||||
window.myDoughnut = Chart.Doughnut(ctx, config);
|
||||
console.log(window.myDoughnut);
|
||||
|
||||
updateLegend();
|
||||
};
|
||||
|
||||
$('#randomizeData').click(function() {
|
||||
@ -117,6 +130,7 @@
|
||||
});
|
||||
|
||||
window.myDoughnut.update();
|
||||
updateLegend();
|
||||
});
|
||||
|
||||
$('#addDataset').click(function() {
|
||||
@ -131,6 +145,7 @@
|
||||
}
|
||||
|
||||
window.myDoughnut.addDataset(newDataset);
|
||||
updateLegend();
|
||||
});
|
||||
|
||||
$('#addData').click(function() {
|
||||
@ -140,11 +155,14 @@
|
||||
$.each(config.data.datasets, function(index, dataset) {
|
||||
window.myDoughnut.addData(randomScalingFactor(), index, dataset.data.length, randomColor(0.7));
|
||||
});
|
||||
|
||||
updateLegend();
|
||||
}
|
||||
});
|
||||
|
||||
$('#removeDataset').click(function() {
|
||||
window.myDoughnut.removeDataset(0);
|
||||
updateLegend();
|
||||
});
|
||||
|
||||
$('#removeData').click(function() {
|
||||
@ -153,6 +171,8 @@
|
||||
config.data.datasets.forEach(function(dataset, datasetIndex) {
|
||||
window.myDoughnut.removeData(datasetIndex, -1);
|
||||
});
|
||||
|
||||
updateLegend();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
@ -5,7 +5,12 @@
|
||||
var Chart = root.Chart;
|
||||
var helpers = Chart.helpers;
|
||||
|
||||
var defaultConfig = {
|
||||
legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i = 0; i < data.datasets[0].data.length; i++){%><li><span style=\"background-color:<%=data.datasets[0].backgroundColor[i]%>\"><%if(data.labels && i < data.labels.length){%><%=data.labels[i]%><%}%></span></li><%}%></ul>",
|
||||
};
|
||||
|
||||
Chart.Doughnut = function(context, config) {
|
||||
config.options = helpers.configMerge(defaultConfig, config.options);
|
||||
config.type = 'doughnut';
|
||||
|
||||
return new Chart(context, config);
|
||||
|
Loading…
Reference in New Issue
Block a user