Skip to content

Commit b798fbc

Browse files
nagixnagix
committed
Draw inner border for arc elements
1 parent ecf64d3 commit b798fbc

File tree

14 files changed

+147
-25
lines changed

14 files changed

+147
-25
lines changed

‎src/controllers/controller.doughnut.js‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -149,9 +149,8 @@ module.exports = function(Chart) {
149149
var chart = me.chart;
150150
var chartArea = chart.chartArea;
151151
var opts = chart.options;
152-
var arcOpts = opts.elements.arc;
153-
var availableWidth = chartArea.right - chartArea.left - arcOpts.borderWidth;
154-
var availableHeight = chartArea.bottom - chartArea.top - arcOpts.borderWidth;
152+
var availableWidth = chartArea.right - chartArea.left;
153+
var availableHeight = chartArea.bottom - chartArea.top;
155154
var minSize = Math.min(availableWidth, availableHeight);
156155
var offset = {x: 0, y: 0};
157156
var meta = me.getMeta();
@@ -177,8 +176,10 @@ module.exports = function(Chart) {
177176
offset = {x: (max.x + min.x) * -0.5, y: (max.y + min.y) * -0.5};
178177
}
179178

179+
// This is no longer used, but left for backward compatibility
180180
chart.borderWidth = me.getMaxBorderWidth(meta.data);
181-
chart.outerRadius = Math.max((minSize - chart.borderWidth) / 2, 0);
181+
182+
chart.outerRadius = Math.max(minSize / 2, 0);
182183
chart.innerRadius = Math.max(cutoutPercentage ? (chart.outerRadius / 100) * (cutoutPercentage) : 0, 0);
183184
chart.radiusLength = (chart.outerRadius - chart.innerRadius) / chart.getVisibleDatasetCount();
184185
chart.offsetX = offset.x * chart.outerRadius;

‎src/controllers/controller.polarArea.js‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -149,10 +149,9 @@ module.exports = function(Chart) {
149149
var chart = me.chart;
150150
var chartArea = chart.chartArea;
151151
var opts = chart.options;
152-
var arcOpts = opts.elements.arc;
153152
var minSize = Math.min(chartArea.right - chartArea.left, chartArea.bottom - chartArea.top);
154153

155-
chart.outerRadius = Math.max((minSize - arcOpts.borderWidth / 2) / 2, 0);
154+
chart.outerRadius = Math.max(minSize / 2, 0);
156155
chart.innerRadius = Math.max(opts.cutoutPercentage ? (chart.outerRadius / 100) * (opts.cutoutPercentage) : 1, 0);
157156
chart.radiusLength = (chart.outerRadius - chart.innerRadius) / chart.getVisibleDatasetCount();
158157

‎src/elements/element.arc.js‎

Lines changed: 23 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ defaults._set('global', {
99
arc: {
1010
backgroundColor: defaults.global.defaultColor,
1111
borderColor: '#fff',
12-
borderWidth: 2
12+
borderWidth: 1
1313
}
1414
}
1515
});
@@ -85,22 +85,39 @@ module.exports = Element.extend({
8585
var vm = this._view;
8686
var sA = vm.startAngle;
8787
var eA = vm.endAngle;
88+
var cA = eA - sA;
89+
var outerRadius = vm.outerRadius;
90+
var innerRadius = vm.innerRadius;
91+
var width = outerRadius - innerRadius;
92+
var minBorderWidth = outerRadius / (1 / Math.sin(Math.min(cA / 2, Math.PI / 2)) + 1);
93+
var borderWidth = Math.min(Math.min(vm.borderWidth, minBorderWidth), width / 2) || 0;
94+
var halfStroke = borderWidth / 2;
95+
var outerHalfStrokeAngle = Math.atan2(halfStroke, Math.sqrt(outerRadius * (outerRadius - halfStroke * 2)));
96+
var innerHalfStrokeAngle = Math.atan2(halfStroke, Math.sqrt(innerRadius * (innerRadius + halfStroke * 2)));
97+
var r;
8898

8999
ctx.beginPath();
90100

91-
ctx.arc(vm.x, vm.y, vm.outerRadius, sA, eA);
92-
ctx.arc(vm.x, vm.y, vm.innerRadius, eA, sA, true);
101+
ctx.arc(vm.x, vm.y, outerRadius - halfStroke, sA + outerHalfStrokeAngle, eA - outerHalfStrokeAngle);
102+
if (innerRadius > 0 || cA > Math.PI) {
103+
innerHalfStrokeAngle = Math.min(innerHalfStrokeAngle, cA / 2 - 0.0001);
104+
ctx.arc(vm.x, vm.y, innerRadius + halfStroke, eA - innerHalfStrokeAngle, sA + innerHalfStrokeAngle, true);
105+
} else {
106+
r = halfStroke / Math.sin(cA / 2);
107+
ctx.lineTo(vm.x + r * Math.cos((sA + eA) / 2), vm.y + r * Math.sin((sA + eA) / 2));
108+
}
93109

94110
ctx.closePath();
95111
ctx.strokeStyle = vm.borderColor;
96-
ctx.lineWidth = vm.borderWidth;
112+
ctx.lineWidth = borderWidth;
97113

98114
ctx.fillStyle = vm.backgroundColor;
99115

100116
ctx.fill();
101-
ctx.lineJoin = 'bevel';
117+
ctx.lineJoin = 'miter';
118+
ctx.miterLimit = 1E+38;
102119

103-
if (vm.borderWidth) {
120+
if (borderWidth) {
104121
ctx.stroke();
105122
}
106123
}

‎test/fixtures/controller.doughnut/doughnut-border-width.json‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
{
2+
"config": {
3+
"type": "doughnut",
4+
"data": {
5+
"labels": ["A", "B", "C", "D", "E"],
6+
"datasets": [{
7+
"data": [1, 5, 10, 50, 100],
8+
"backgroundColor": [
9+
"rgba(255, 99, 132, 0.8)",
10+
"rgba(54, 162, 235, 0.8)",
11+
"rgba(255, 206, 86, 0.8)",
12+
"rgba(75, 192, 192, 0.8)",
13+
"rgba(153, 102, 255, 0.8)"
14+
],
15+
"borderWidth": 20,
16+
"borderColor": [
17+
"rgb(255, 99, 132)",
18+
"rgb(54, 162, 235)",
19+
"rgb(255, 206, 86)",
20+
"rgb(75, 192, 192)",
21+
"rgb(153, 102, 255)"
22+
]
23+
}]
24+
},
25+
"options": {
26+
"responsive": false,
27+
"legend": false,
28+
"title": false
29+
}
30+
}
31+
}

‎test/fixtures/controller.doughnut/doughnut-border-width.png‎

27.7 KB
Loading

‎test/fixtures/controller.doughnut/pie-border-width.json‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
{
2+
"config": {
3+
"type": "pie",
4+
"data": {
5+
"labels": ["A", "B", "C", "D", "E"],
6+
"datasets": [{
7+
"data": [1, 5, 10, 50, 100],
8+
"backgroundColor": [
9+
"rgba(255, 99, 132, 0.8)",
10+
"rgba(54, 162, 235, 0.8)",
11+
"rgba(255, 206, 86, 0.8)",
12+
"rgba(75, 192, 192, 0.8)",
13+
"rgba(153, 102, 255, 0.8)"
14+
],
15+
"borderWidth": 20,
16+
"borderColor": [
17+
"rgb(255, 99, 132)",
18+
"rgb(54, 162, 235)",
19+
"rgb(255, 206, 86)",
20+
"rgb(75, 192, 192)",
21+
"rgb(153, 102, 255)"
22+
]
23+
}]
24+
},
25+
"options": {
26+
"responsive": false,
27+
"legend": false,
28+
"title": false
29+
}
30+
}
31+
}

‎test/fixtures/controller.doughnut/pie-border-width.png‎

23.5 KB
Loading

‎test/fixtures/controller.polarArea/angle-array.png‎

-12.8 KB
Loading

‎test/fixtures/controller.polarArea/angle-undefined.png‎

-11.1 KB
Loading

‎test/fixtures/controller.polarArea/border-width.json‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
{
2+
"config": {
3+
"type": "polarArea",
4+
"data": {
5+
"labels": ["A", "B", "C", "D", "E"],
6+
"datasets": [{
7+
"data": [11, 16, 21, 1, 10],
8+
"backgroundColor": [
9+
"rgba(255, 99, 132, 0.8)",
10+
"rgba(54, 162, 235, 0.8)",
11+
"rgba(255, 206, 86, 0.8)",
12+
"rgba(75, 192, 192, 0.8)",
13+
"rgba(153, 102, 255, 0.8)"
14+
],
15+
"borderWidth": 20,
16+
"borderColor": [
17+
"rgb(255, 99, 132)",
18+
"rgb(54, 162, 235)",
19+
"rgb(255, 206, 86)",
20+
"rgb(75, 192, 192)",
21+
"rgb(153, 102, 255)"
22+
]
23+
}]
24+
},
25+
"options": {
26+
"elements": {
27+
"arc": {
28+
"angle": [
29+
0.0378, 0.1892, 0.3786, 1.8925, 3.7849
30+
]
31+
}
32+
},
33+
"responsive": false,
34+
"legend": false,
35+
"title": false,
36+
"scale": {
37+
"display": false
38+
}
39+
}
40+
}
41+
}

0 commit comments

Comments
 (0)