diff --git a/src/js/charts/DonutChart.js b/src/js/charts/DonutChart.js index e251126..b0ae67b 100644 --- a/src/js/charts/DonutChart.js +++ b/src/js/charts/DonutChart.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 { makeArcStrokePathStr } from '../utils/draw'; +import { makeArcStrokePathStr, makeStrokeCircleStr } from '../utils/draw'; import { lightenDarkenColor } from '../utils/colors'; import { transform } from '../utils/animation'; import { FULL_ANGLE } from '../utils/constants'; @@ -63,7 +63,10 @@ export default class DonutChart extends AggregationChart { curStart = startPosition; curEnd = endPosition; } - const curPath = makeArcStrokePathStr(curStart, curEnd, this.center, this.radius, this.clockWise, largeArc); + const curPath = + originDiffAngle === 360 + ? makeStrokeCircleStr(curStart, curEnd, this.center, this.radius, this.clockWise, largeArc) + : makeArcStrokePathStr(curStart, curEnd, this.center, this.radius, this.clockWise, largeArc); s.sliceStrings.push(curPath); s.slicesProperties.push({ diff --git a/src/js/charts/PieChart.js b/src/js/charts/PieChart.js index b4d473b..656f108 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..3db8f51 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]; @@ -129,6 +141,18 @@ export function makeArcStrokePathStr(startPosition, endPosition, center, radius, ${arcEndX} ${arcEndY}`; } +export function makeStrokeCircleStr(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, radius * 2 + arcStartY, center.y + startPosition.y]; + + return `M${arcStartX} ${arcStartY} + A ${radius} ${radius} 0 ${largeArc} ${clockWise ? 1 : 0} + ${arcEndX} ${midArc} + M${arcStartX} ${midArc} + A ${radius} ${radius} 0 ${largeArc} ${clockWise ? 1 : 0} + ${arcEndX} ${arcEndY}`; +} + export function makeGradient(svgDefElem, color, lighter = false) { let gradientId ='path-fill-gradient' + '-' + color + '-' +(lighter ? 'lighter' : 'default'); let gradientDef = renderVerticalGradient(svgDefElem, gradientId);