jingrow/charts
1
0
Fork 0
Code Pull Requests Activity

fix: longArc for donut chart

Browse Source
This commit is contained in:
Shivam Mishra 2019-07-21 13:40:17 +05:30
parent 3cedc2ac21
commit e4117952dd
3 changed files with 5 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/js/charts/DonutChart.js
View File

@ -47,6 +47,7 @@ export default class DonutChart extends AggregationChart {
s.sliceTotals.map((total, i) => {
const startAngle = curAngle;
const originDiffAngle = (total / s.grandTotal) * FULL_ANGLE;
const largeArc = originDiffAngle > 180 ? 1: 0;
const diffAngle = clockWise ? -originDiffAngle : originDiffAngle;
const endAngle = curAngle = curAngle + diffAngle;
const startPosition = getPositionByAngle(startAngle, radius);
@ -62,7 +63,7 @@ export default class DonutChart extends AggregationChart {
curStart = startPosition;
curEnd = endPosition;
}
const curPath = makeArcStrokePathStr(curStart, curEnd, this.center, this.radius, this.clockWise);
const curPath = makeArcStrokePathStr(curStart, curEnd, this.center, this.radius, this.clockWise, largeArc);
s.sliceStrings.push(curPath);
s.slicesProperties.push({

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

@ -42,10 +42,7 @@ export default class PieChart extends AggregationChart {
s.sliceTotals.map((total, i) => {
const startAngle = curAngle;
const originDiffAngle = (total / s.grandTotal) * FULL_ANGLE;
let largeArc = 0;
if(originDiffAngle > 180){
largeArc = 1;
}
const largeArc = originDiffAngle > 180 ? 1: 0;
const diffAngle = clockWise ? -originDiffAngle : originDiffAngle;
const endAngle = curAngle = curAngle + diffAngle;
const startPosition = getPositionByAngle(startAngle, radius);

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

@ -120,12 +120,12 @@ export function makeArcPathStr(startPosition, endPosition, center, radius, clock
${arcEndX} ${arcEndY} z`;
}
export function makeArcStrokePathStr(startPosition, endPosition, center, radius, clockWise=1){
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];
return `M${arcStartX} ${arcStartY}
A ${radius} ${radius} 0 0 ${clockWise ? 1 : 0}
A ${radius} ${radius} 0 ${largeArc} ${clockWise ? 1 : 0}
${arcEndX} ${arcEndY}`;
}