-
Notifications
You must be signed in to change notification settings - Fork 11.9k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Added 'angle' option to Polar Charts #5279
Changes from 4 commits
94bf815
8c8b864
ff432f6
debbf75
3f1eb49
86419e2
66e8e53
45d3bc0
4a42e41
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -123,7 +123,12 @@ module.exports = function(Chart) { | |
var meta = me.getMeta(); | ||
var opts = chart.options; | ||
var arcOpts = opts.elements.arc; | ||
var dataset = me.getDataset(); | ||
var minSize = Math.min(chartArea.right - chartArea.left, chartArea.bottom - chartArea.top); | ||
var start = opts.startAngle || 0; | ||
var starts = me._starts = []; | ||
var angles = me._angles = []; | ||
var i, ilen, angle; | ||
chart.outerRadius = Math.max((minSize - arcOpts.borderWidth / 2) / 2, 0); | ||
chart.innerRadius = Math.max(opts.cutoutPercentage ? (chart.outerRadius / 100) * (opts.cutoutPercentage) : 1, 0); | ||
chart.radiusLength = (chart.outerRadius - chart.innerRadius) / chart.getVisibleDatasetCount(); | ||
|
@@ -133,6 +138,13 @@ module.exports = function(Chart) { | |
|
||
meta.count = me.countVisibleElements(); | ||
|
||
for (i = 0, ilen = dataset.data.length; i < ilen; i++) { | ||
starts[i] = start; | ||
angle = me._computeAngle(i); | ||
angles[i] = angle; | ||
start += angle; | ||
} | ||
|
||
helpers.each(meta.data, function(arc, index) { | ||
me.updateElement(arc, index, reset); | ||
}); | ||
|
@@ -147,7 +159,6 @@ module.exports = function(Chart) { | |
var scale = chart.scale; | ||
var labels = chart.data.labels; | ||
|
||
var circumference = me.calculateCircumference(dataset.data[index]); | ||
var centerX = scale.xCenter; | ||
var centerY = scale.yCenter; | ||
|
||
|
@@ -164,8 +175,8 @@ module.exports = function(Chart) { | |
// var negHalfPI = -0.5 * Math.PI; | ||
var datasetStartAngle = opts.startAngle; | ||
var distance = arc.hidden ? 0 : scale.getDistanceFromCenterForValue(dataset.data[index]); | ||
var startAngle = datasetStartAngle + (circumference * visibleCount); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Travis complains that There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Oh right, thanks "Travis" 😅 |
||
var endAngle = startAngle + (arc.hidden ? 0 : circumference); | ||
var startAngle = me._starts[index]; | ||
var endAngle = startAngle + (arc.hidden ? 0 : me._angles[index]); | ||
|
||
var resetRadius = animationOpts.animateScale ? 0 : scale.getDistanceFromCenterForValue(dataset.data[index]); | ||
|
||
|
@@ -211,12 +222,31 @@ module.exports = function(Chart) { | |
return count; | ||
}, | ||
|
||
calculateCircumference: function(value) { | ||
/** | ||
* @private | ||
*/ | ||
_computeAngle: function(index) { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. We started to be even more explicit about private stuff by adding the following comment above: /**
* @private
*/
_computeAngle: function(index) { |
||
var me = this; | ||
var count = this.getMeta().count; | ||
if (count > 0 && !isNaN(value)) { | ||
return (2 * Math.PI) / count; | ||
var dataset = me.getDataset(); | ||
var meta = me.getMeta(); | ||
|
||
if (isNaN(dataset.data[index]) || meta.data[index].hidden) { | ||
return 0; | ||
} | ||
return 0; | ||
|
||
// Scriptable options | ||
var context = { | ||
chart: me.chart, | ||
dataIndex: index, | ||
dataset: dataset, | ||
datasetIndex: me.index | ||
}; | ||
|
||
return helpers.options.resolve([ | ||
me.chart.options.angle, | ||
(2 * Math.PI) / count | ||
], context, index); | ||
} | ||
}); | ||
}; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,30 @@ | ||
{ | ||
"config": { | ||
"type": "polarArea", | ||
"data": { | ||
"labels": ["A", "B", "C", "D", "E"], | ||
"datasets": [{ | ||
"data": [11, 16, 21, 7, 10], | ||
"backgroundColor": [ | ||
"rgba(255, 99, 132, 0.8)", | ||
"rgba(54, 162, 235, 0.8)", | ||
"rgba(255, 206, 86, 0.8)", | ||
"rgba(75, 192, 192, 0.8)", | ||
"rgba(153, 102, 255, 0.8)", | ||
"rgba(255, 159, 64, 0.8)" | ||
] | ||
}] | ||
}, | ||
"options": { | ||
"angle": [ | ||
1.0566, 1.7566, 1.0566, 2.1566, 0.2566 | ||
], | ||
"responsive": false, | ||
"legend": false, | ||
"title": false, | ||
"scale": { | ||
"display": false | ||
} | ||
} | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. We should remove all UI that are not part of the tests, which include the labels and the "grid lines". Maybe adding There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I would also pick a more accentuated and different background color for each slices to make sure it fails if there is overlapping elements. |
||
} | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,27 @@ | ||
{ | ||
"config": { | ||
"type": "polarArea", | ||
"data": { | ||
"labels": ["A", "B", "C", "D", "E"], | ||
"datasets": [{ | ||
"data": [11, 16, 21, 7, 10], | ||
"backgroundColor": [ | ||
"rgba(255, 99, 132, 0.8)", | ||
"rgba(54, 162, 235, 0.8)", | ||
"rgba(255, 206, 86, 0.8)", | ||
"rgba(75, 192, 192, 0.8)", | ||
"rgba(153, 102, 255, 0.8)", | ||
"rgba(255, 159, 64, 0.8)" | ||
] | ||
}] | ||
}, | ||
"options": { | ||
"responsive": false, | ||
"legend": false, | ||
"title": false, | ||
"scale": { | ||
"display": false | ||
} | ||
} | ||
} | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
To avoid accessing object properties at every iteration, I would use local variables:
Edit:
var starts = me._starts = []
instead ofvar starts = []; .... me._starts = starts
(same forangles
)