diff --git a/src/js/charts/PieChart.js b/src/js/charts/PieChart.js index c0f5db5..7209a36 100644 --- a/src/js/charts/PieChart.js +++ b/src/js/charts/PieChart.js @@ -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, diff --git a/src/js/utils/draw.js b/src/js/utils/draw.js index 0e6ec71..3c9b2e1 100644 --- a/src/js/utils/draw.js +++ b/src/js/utils/draw.js @@ -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`; }