jingrow/charts
1
0
Fork 0
Code Pull Requests Activity

Fix for issue #108

Browse Source 
Piechart could not render large arcs (>180) properly because the
information of large arc was not provided to the SVG drawing
function. This was fixed, and the piechart should render
correctly when one slice is larger than 180 degrees.
This commit is contained in:
Ricardo Marino 2018-04-17 17:45:06 +02:00
parent 092fc240dc
commit 228684865b
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

@ -55,10 +55,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);
@ -74,8 +77,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

@ -106,13 +106,12 @@ export function makePath(pathStr, className='', stroke='none', fill='none') {
});
}
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`;
}