jingrow/charts
1
0
Fork 0
Code Pull Requests Activity

Merge pull request #181 from thomas-oo/Fix_piechart_large_arc

Browse Source 
Fix piechart large arc
This commit is contained in:
Shivam Mishra 2019-05-22 11:39:56 +05:30 committed by GitHub
commit ef729251c9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 7 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/js/charts/PieChart.js
View File

@ -39,10 +39,13 @@ export default class PieChart extends AggregationChart {
s.sliceStrings = [];
s.slicesProperties = [];
let curAngle = 180 - this.config.startAngle;
s.sliceTotals.map((total, i) => {
const startAngle = curAngle;
const originDiffAngle = (total / s.grandTotal) * FULL_ANGLE;
let largeArc = 0;
if(originDiffAngle > 180){
largeArc = 1;
}
const diffAngle = clockWise ? -originDiffAngle : originDiffAngle;
const endAngle = curAngle = curAngle + diffAngle;
const startPosition = getPositionByAngle(startAngle, radius);
@ -58,8 +61,7 @@ export default class PieChart extends AggregationChart {
curStart = startPosition;
curEnd = endPosition;
}
const curPath = makeArcPathStr(curStart, curEnd, this.center, this.radius, this.clockWise);
const curPath = makeArcPathStr(curStart, curEnd, this.center, this.radius, clockWise, largeArc);
s.sliceStrings.push(curPath);
s.slicesProperties.push({
startPosition,

5
src/js/utils/draw.js
View File

@ -110,13 +110,12 @@ export function makePath(pathStr, className='', stroke='none', fill='none', stro
});
}
export function makeArcPathStr(startPosition, endPosition, center, radius, clockWise=1){
export function makeArcPathStr(startPosition, endPosition, center, radius, clockWise=1, largeArc=0){
let [arcStartX, arcStartY] = [center.x + startPosition.x, center.y + startPosition.y];
let [arcEndX, arcEndY] = [center.x + endPosition.x, center.y + endPosition.y];
return `M${center.x} ${center.y}
L${arcStartX} ${arcStartY}
A ${radius} ${radius} 0 0 ${clockWise ? 1 : 0}
A ${radius} ${radius} 0 ${largeArc} ${clockWise ? 1 : 0}
${arcEndX} ${arcEndY} z`;
}