mirror of
https://github.com/chartjs/Chart.js.git
synced 2024-10-06 20:29:12 +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="removeDataset">Remove Dataset</button>
|
||||||
<button id="addData">Add Data</button>
|
<button id="addData">Add Data</button>
|
||||||
<button id="removeData">Remove Data</button>
|
<button id="removeData">Remove Data</button>
|
||||||
|
<div>
|
||||||
|
<h3>Legend</h3>
|
||||||
|
<div id="legendContainer">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<script>
|
<script>
|
||||||
var randomScalingFactor = function() {
|
var randomScalingFactor = function() {
|
||||||
return Math.round(Math.random() * 100);
|
return Math.round(Math.random() * 100);
|
||||||
@ -38,7 +44,6 @@
|
|||||||
};
|
};
|
||||||
|
|
||||||
var config = {
|
var config = {
|
||||||
type: 'doughnut',
|
|
||||||
data: {
|
data: {
|
||||||
datasets: [{
|
datasets: [{
|
||||||
data: [
|
data: [
|
||||||
@ -99,10 +104,18 @@
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
function updateLegend() {
|
||||||
|
$legendContainer = $('#legendContainer');
|
||||||
|
$legendContainer.empty();
|
||||||
|
$legendContainer.append(window.myDoughnut.generateLegend());
|
||||||
|
}
|
||||||
|
|
||||||
window.onload = function() {
|
window.onload = function() {
|
||||||
var ctx = document.getElementById("chart-area").getContext("2d");
|
var ctx = document.getElementById("chart-area").getContext("2d");
|
||||||
window.myDoughnut = new Chart(ctx, config);
|
window.myDoughnut = Chart.Doughnut(ctx, config);
|
||||||
console.log(window.myDoughnut);
|
console.log(window.myDoughnut);
|
||||||
|
|
||||||
|
updateLegend();
|
||||||
};
|
};
|
||||||
|
|
||||||
$('#randomizeData').click(function() {
|
$('#randomizeData').click(function() {
|
||||||
@ -117,6 +130,7 @@
|
|||||||
});
|
});
|
||||||
|
|
||||||
window.myDoughnut.update();
|
window.myDoughnut.update();
|
||||||
|
updateLegend();
|
||||||
});
|
});
|
||||||
|
|
||||||
$('#addDataset').click(function() {
|
$('#addDataset').click(function() {
|
||||||
@ -131,6 +145,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
window.myDoughnut.addDataset(newDataset);
|
window.myDoughnut.addDataset(newDataset);
|
||||||
|
updateLegend();
|
||||||
});
|
});
|
||||||
|
|
||||||
$('#addData').click(function() {
|
$('#addData').click(function() {
|
||||||
@ -140,11 +155,14 @@
|
|||||||
$.each(config.data.datasets, function(index, dataset) {
|
$.each(config.data.datasets, function(index, dataset) {
|
||||||
window.myDoughnut.addData(randomScalingFactor(), index, dataset.data.length, randomColor(0.7));
|
window.myDoughnut.addData(randomScalingFactor(), index, dataset.data.length, randomColor(0.7));
|
||||||
});
|
});
|
||||||
|
|
||||||
|
updateLegend();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
$('#removeDataset').click(function() {
|
$('#removeDataset').click(function() {
|
||||||
window.myDoughnut.removeDataset(0);
|
window.myDoughnut.removeDataset(0);
|
||||||
|
updateLegend();
|
||||||
});
|
});
|
||||||
|
|
||||||
$('#removeData').click(function() {
|
$('#removeData').click(function() {
|
||||||
@ -153,6 +171,8 @@
|
|||||||
config.data.datasets.forEach(function(dataset, datasetIndex) {
|
config.data.datasets.forEach(function(dataset, datasetIndex) {
|
||||||
window.myDoughnut.removeData(datasetIndex, -1);
|
window.myDoughnut.removeData(datasetIndex, -1);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
updateLegend();
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
@ -5,7 +5,12 @@
|
|||||||
var Chart = root.Chart;
|
var Chart = root.Chart;
|
||||||
var helpers = Chart.helpers;
|
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) {
|
Chart.Doughnut = function(context, config) {
|
||||||
|
config.options = helpers.configMerge(defaultConfig, config.options);
|
||||||
config.type = 'doughnut';
|
config.type = 'doughnut';
|
||||||
|
|
||||||
return new Chart(context, config);
|
return new Chart(context, config);
|
||||||
|
Loading…
Reference in New Issue
Block a user