diff --git a/src/js/charts/PieChart.js b/src/js/charts/PieChart.js index b4d473b..160cc3c 100644 --- a/src/js/charts/PieChart.js +++ b/src/js/charts/PieChart.js @@ -2,7 +2,7 @@ import AggregationChart from './AggregationChart'; import { getComponent } from '../objects/ChartComponents'; import { getOffset } from '../utils/dom'; import { getPositionByAngle } from '../utils/helpers'; -import { makeArcPathStr } from '../utils/draw'; +import { makeArcPathStr, makeCircleStr } from '../utils/draw'; import { lightenDarkenColor } from '../utils/colors'; import { transform } from '../utils/animation'; import { FULL_ANGLE } from '../utils/constants'; @@ -58,7 +58,11 @@ export default class PieChart extends AggregationChart { curStart = startPosition; curEnd = endPosition; } - const curPath = makeArcPathStr(curStart, curEnd, this.center, this.radius, clockWise, largeArc); + const curPath = + originDiffAngle === 360 + ? makeCircleStr(curStart, curEnd, this.center, this.radius, clockWise, largeArc) + : 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 136ce8a..8ed8f1e 100644 --- a/src/js/utils/draw.js +++ b/src/js/utils/draw.js @@ -120,6 +120,18 @@ export function makeArcPathStr(startPosition, endPosition, center, radius, clock ${arcEndX} ${arcEndY} z`; } +export function makeCircleStr(startPosition, endPosition, center, radius, clockWise=1, largeArc=0){ + let [arcStartX, arcStartY] = [center.x + startPosition.x, center.y + startPosition.y]; + let [arcEndX, midArc, arcEndY] = [center.x + endPosition.x, center.y * 2, center.y + endPosition.y]; + return `M${center.x} ${center.y} + L${arcStartX} ${arcStartY} + A ${radius} ${radius} 0 ${largeArc} ${clockWise ? 1 : 0} + ${arcEndX} ${midArc} z + L${arcStartX} ${midArc} + A ${radius} ${radius} 0 ${largeArc} ${clockWise ? 1 : 0} + ${arcEndX} ${arcEndY} z`; +} + export function makeArcStrokePathStr(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];