Mirrors/Chart.js
1
0
Fork 0
mirror of https://github.com/chartjs/Chart.js.git synced 2024-10-07 04:39:06 +02:00
Code Issues Packages Projects Releases Wiki Activity

More donut improvements

Browse Source
This commit is contained in:
Evert Timberg 2016-05-07 19:47:40 -04:00
parent cf5c75ea9e
commit 9d832cc39d
1 changed files with 43 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -20,11 +20,15 @@ module.exports = function(Chart) {
var text = []; var text = [];
text.push('<ul class="' + chart.id + '-legend">'); text.push('<ul class="' + chart.id + '-legend">');
if (chart.data.datasets.length) { var data = chart.data;
for (var i = 0; i < chart.data.datasets[0].data.length; ++i) { var datasets = data.datasets;
text.push('<li><span style="background-color:' + chart.data.datasets[0].backgroundColor[i] + '"></span>'); var labels = data.labels;
if (chart.data.labels[i]) {
text.push(chart.data.labels[i]); 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>');
if (labels[i]) {
text.push(labels[i]);
} }
text.push('</li>'); text.push('</li>');
} }
@ -42,9 +46,12 @@ module.exports = function(Chart) {
var meta = chart.getDatasetMeta(0); var meta = chart.getDatasetMeta(0);
var ds = data.datasets[0]; var ds = data.datasets[0];
var arc = meta.data[i]; var arc = meta.data[i];
var fill = arc.custom && arc.custom.backgroundColor ? arc.custom.backgroundColor : helpers.getValueAtIndexOrDefault(ds.backgroundColor, i, this.chart.options.elements.arc.backgroundColor); var custom = arc.custom;
var stroke = arc.custom && arc.custom.borderColor ? arc.custom.borderColor : helpers.getValueAtIndexOrDefault(ds.borderColor, i, this.chart.options.elements.arc.borderColor); var getValueAtIndexOrDefault = helpers.getValueAtIndexOrDefault;
var bw = arc.custom && arc.custom.borderWidth ? arc.custom.borderWidth : helpers.getValueAtIndexOrDefault(ds.borderWidth, i, this.chart.options.elements.arc.borderWidth); var arcOpts = chart.options.elements.arc;
var fill = custom && custom.backgroundColor ? custom.backgroundColor : getValueAtIndexOrDefault(ds.backgroundColor, i, arcOpts.backgroundColor);
var stroke = custom && custom.borderColor ? custom.borderColor : getValueAtIndexOrDefault(ds.borderColor, i, arcOpts.borderColor);
var bw = custom && custom.borderWidth ? custom.borderWidth : getValueAtIndexOrDefault(ds.borderWidth, i, arcOpts.borderWidth);
return { return {
text: label, text: label,
@ -56,7 +63,7 @@ module.exports = function(Chart) {
// 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 [];
} }
@ -110,32 +117,34 @@ module.exports = function(Chart) {
linkScales: helpers.noop, linkScales: helpers.noop,
addElements: function() { addElements: function() {
var _this = this;
var meta = this.getMeta(), var meta = this.getMeta(),
data = meta.data; data = meta.data;
helpers.each(this.getDataset().data, function(value, index) { helpers.each(_this.getDataset().data, function(value, index) {
data[index] = data[index] || new Chart.elements.Arc({ data[index] = data[index] || new Chart.elements.Arc({
_chart: this.chart.chart, _chart: _this.chart.chart,
_datasetIndex: this.index, _datasetIndex: _this.index,
_index: index _index: index
}); });
}, this); });
}, },
addElementAndReset: function(index, colorForNewElement) { addElementAndReset: function(index, colorForNewElement) {
var _this = this;
var arc = new Chart.elements.Arc({ var arc = new Chart.elements.Arc({
_chart: this.chart.chart, _chart: _this.chart.chart,
_datasetIndex: this.index, _datasetIndex: _this.index,
_index: index _index: index
}), }),
ds = this.getDataset(); ds = _this.getDataset();
if (colorForNewElement && helpers.isArray(ds.backgroundColor)) { if (colorForNewElement && helpers.isArray(ds.backgroundColor)) {
ds.backgroundColor.splice(index, 0, colorForNewElement); ds.backgroundColor.splice(index, 0, colorForNewElement);
} }
// Add to the points array and reset it // Add to the points array and reset it
this.getMeta().data.splice(index, 0, arc); _this.getMeta().data.splice(index, 0, arc);
this.updateElement(arc, index, true); _this.updateElement(arc, index, true);
}, },
// Get index of the dataset in relation to the visible datasets. This allows determining the inner and outer radius correctly // Get index of the dataset in relation to the visible datasets. This allows determining the inner and outer radius correctly
@ -152,7 +161,8 @@ module.exports = function(Chart) {
}, },
update: function update(reset) { update: function update(reset) {
var chart = this.chart, var _this = this;
var chart = _this.chart,
chartArea = chart.chartArea, chartArea = chart.chartArea,
opts = chart.options, opts = chart.options,
arcOpts = opts.elements.arc, arcOpts = opts.elements.arc,
@ -163,7 +173,7 @@ module.exports = function(Chart) {
x: 0, x: 0,
y: 0 y: 0
}, },
meta = this.getMeta(), meta = _this.getMeta(),
cutoutPercentage = opts.cutoutPercentage, cutoutPercentage = opts.cutoutPercentage,
circumference = opts.circumference; circumference = opts.circumference;
@ -192,18 +202,19 @@ module.exports = function(Chart) {
chart.offsetX = offset.x * chart.outerRadius; chart.offsetX = offset.x * chart.outerRadius;
chart.offsetY = offset.y * chart.outerRadius; chart.offsetY = offset.y * chart.outerRadius;
meta.total = this.calculateTotal(); meta.total = _this.calculateTotal();
this.outerRadius = chart.outerRadius - (chart.radiusLength * this.getRingIndex(this.index)); _this.outerRadius = chart.outerRadius - (chart.radiusLength * _this.getRingIndex(_this.index));
this.innerRadius = this.outerRadius - chart.radiusLength; _this.innerRadius = _this.outerRadius - chart.radiusLength;
helpers.each(meta.data, function(arc, index) { helpers.each(meta.data, function(arc, index) {
this.updateElement(arc, index, reset); _this.updateElement(arc, index, reset);
}, this); });
}, },
updateElement: function(arc, index, reset) { updateElement: function(arc, index, reset) {
var chart = this.chart, var _this = this;
var chart = _this.chart,
chartArea = chart.chartArea, chartArea = chart.chartArea,
opts = chart.options, opts = chart.options,
animationOpts = opts.animation, animationOpts = opts.animation,
@ -212,17 +223,17 @@ module.exports = function(Chart) {
centerY = (chartArea.top + chartArea.bottom) / 2, centerY = (chartArea.top + chartArea.bottom) / 2,
startAngle = opts.rotation, // non reset case handled later startAngle = opts.rotation, // non reset case handled later
endAngle = opts.rotation, // non reset case handled later endAngle = opts.rotation, // non reset case handled later
dataset = this.getDataset(), dataset = _this.getDataset(),
circumference = reset && animationOpts.animateRotate ? 0 : arc.hidden ? 0 : this.calculateCircumference(dataset.data[index]) * (opts.circumference / (2.0 * Math.PI)), circumference = reset && animationOpts.animateRotate ? 0 : arc.hidden ? 0 : _this.calculateCircumference(dataset.data[index]) * (opts.circumference / (2.0 * Math.PI)),
innerRadius = reset && animationOpts.animateScale ? 0 : this.innerRadius, innerRadius = reset && animationOpts.animateScale ? 0 : _this.innerRadius,
outerRadius = reset && animationOpts.animateScale ? 0 : this.outerRadius, outerRadius = reset && animationOpts.animateScale ? 0 : _this.outerRadius,
custom = arc.custom, custom = arc.custom,
valueAtIndexOrDefault = helpers.getValueAtIndexOrDefault; valueAtIndexOrDefault = helpers.getValueAtIndexOrDefault;
helpers.extend(arc, { helpers.extend(arc, {
// Utility // Utility
_chart: chart.chart, _chart: chart.chart,
_datasetIndex: this.index, _datasetIndex: _this.index,
_index: index, _index: index,
// Desired view properties // Desired view properties
@ -249,7 +260,7 @@ module.exports = function(Chart) {
if (index === 0) { if (index === 0) {
model.startAngle = opts.rotation; model.startAngle = opts.rotation;
} else { } else {
model.startAngle = this.getMeta().data[index - 1]._model.endAngle; model.startAngle = _this.getMeta().data[index - 1]._model.endAngle;
} }
model.endAngle = model.startAngle + model.circumference; model.endAngle = model.startAngle + model.circumference;