Skip to content

Commit

Permalink
Improve polar to support startAngle and clockwise
Browse files Browse the repository at this point in the history
  • Loading branch information
@pissang
pissang committed Nov 11, 2015
1 parent 75b3383 commit 2fcdde6
Show file tree
Hide file tree
Showing 10 changed files with 69 additions and 42 deletions.
17 changes: 10 additions & 7 deletions src/chart/line/LineView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -173,7 +173,8 @@ define(function(require) {
group.add(polygon);
}

polyline.setStyle(zrUtil.extend(
polyline.setStyle(zrUtil.defaults(
// Use color in lineStyle first
lineStyleModel.getLineStyle(),
{
stroke: data.getVisual('color'),
Expand Down Expand Up @@ -408,29 +409,31 @@ define(function(require) {
},

_createPolarClipShape: function (polar, animation) {
// var angleAxis = polar.getAngleAxis();
var angleAxis = polar.getAngleAxis();
var radiusAxis = polar.getRadiusAxis();

var radiusExtent = radiusAxis.getExtent();
var angleExtent = angleAxis.getExtent();

var PI2 = Math.PI * 2;
var RADIAN = Math.PI / 180;

var clipPath = new graphic.Sector({
shape: {
cx: polar.cx,
cy: polar.cy,
r0: radiusExtent[0],
r: radiusExtent[1],
startAngle: 0,
endAngle: PI2
startAngle: -angleExtent[0] * RADIAN,
endAngle: -angleExtent[1] * RADIAN,
clockwise: angleAxis.inverse
}
});

if (animation) {
clipPath.shape.endAngle = 0;
clipPath.shape.endAngle = -angleExtent[0] * RADIAN;
clipPath.animateTo({
shape: {
endAngle: PI2
endAngle: -angleExtent[1] * RADIAN
}
}, 1500, animation);
}
Expand Down
4 changes: 2 additions & 2 deletions src/component/axis/AngleAxisView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -119,7 +119,7 @@ define(function (require) {
textFont: textStyleModel.getFont()
},
silent: true
}))
}));
}
},

Expand All @@ -141,7 +141,7 @@ define(function (require) {
splitLines[colorIndex] = splitLines[colorIndex] || [];
splitLines[colorIndex].push(new graphic.Line({
shape: getAxisLineShape(polar, radiusExtent[0], radiusExtent[1], ticksAngles[i])
}))
}));
}

// Simple optimization
Expand Down
22 changes: 16 additions & 6 deletions src/component/axis/RadiusAxisView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,10 +16,11 @@ define(function (require) {
this.group.removeAll();

var polarModel = ecModel.getComponent('polar', radiusAxisModel.get('polarIndex'));
var angleAxis = polarModel.coordinateSystem.getAngleAxis();
var radiusAxis = radiusAxisModel.axis;
var polar = polarModel.coordinateSystem;
var ticksCoords = radiusAxis.getTicksCoords();
var axisAngle = radiusAxisModel.get('axisAngle');
var axisAngle = angleAxis.getExtent()[0];
var radiusExtent = radiusAxis.getExtent();
zrUtil.each(elementList, function (name) {
if (radiusAxisModel.get(name +'.show')) {
Expand Down Expand Up @@ -95,41 +96,50 @@ define(function (require) {
var axis = radiusAxisModel.axis;
var labelModel = radiusAxisModel.getModel('axisLabel');
var textStyleModel = labelModel.getModel('textStyle');
var tickModel = radiusAxisModel.getModel('axisTick');

var labels = radiusAxisModel.formatLabels(axis.scale.getTicksLabels());

var start = polar.coordToPoint([radiusExtent[0], axisAngle]);
var end = polar.coordToPoint([radiusExtent[1], axisAngle]);

var len = vector.dist(end, start);
var direction = [
var dir = [
end[1] - start[1],
start[0] - end[0]
];
vector.normalize(direction, direction);
vector.normalize(dir, dir);

var p = [];
var tickLen = tickModel.get('length');
var labelMargin = labelModel.get('margin');
var labelsPositions = axis.getLabelsCoords();
var labelRotate = labelModel.get('rotate');

var labelTextAlign = 'center';
if (labelRotate) {
labelTextAlign = labelRotate > 0 ? 'left' : 'right'
labelTextAlign = labelRotate > 0 ? 'left' : 'right';
}
// Point to top
if (dir[0] > -0.3 && dir[0] <= 0) {
labelTextAlign = 'right';
}
else if (dir[0] < 0.3 && dir[0] >= 0) {
labelTextAlign = 'left';
}

// FIXME Text align and text baseline when axis angle is 90 degree
for (var i = 0; i < labelsPositions.length; i++) {
// Get point on axis
vector.lerp(p, start, end, labelsPositions[i] / len);
vector.scaleAndAdd(p, p, direction, labelMargin);
vector.scaleAndAdd(p, p, dir, labelMargin + tickLen);
this.group.add(new graphic.Text({
style: {
x: p[0],
y: p[1],
text: labels[i],
textAlign: labelTextAlign,
textBaseline: 'bottom',
textBaseline: dir[1] > 0.4 ? 'bottom' : (dir[1] < -0.4 ? 'top' : 'middle'),
textFont: textStyleModel.getFont()
},
rotation: labelRotate * Math.PI / 180,
Expand Down
5 changes: 3 additions & 2 deletions src/component/tooltip.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -491,8 +491,9 @@ define(function (require) {
targetShape = makeSectorShape(
polar.cx, polar.cy,
otherExtent[0], otherExtent[1],
(mouseCoord[1] - bandWidth / 2) * radian,
(mouseCoord[1] + bandWidth / 2) * radian
// In ECharts y is negative if angle is positive
(-mouseCoord[1] - bandWidth / 2) * radian,
(-mouseCoord[1] + bandWidth / 2) * radian
);
}
else {
Expand Down
19 changes: 10 additions & 9 deletions src/coord/Axis.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -104,13 +104,14 @@ define(function (require) {

/**
* Set coord extent
* @param {number} min
* @param {number} max
* @param {number} start
* @param {number} end
*/
setExtent: function (min, max) {
setExtent: function (start, end) {
var extent = this._extent;
extent[0] = min;
extent[1] = max;
var inverse = this.inverse;
extent[0] = inverse ? end : start;
extent[1] = inverse ? start : end;
},

/**
Expand Down Expand Up @@ -197,17 +198,17 @@ define(function (require) {
*/
// FIXME Situation when labels is on ticks
getBands: function () {
var extent = this._extent;
var extent = this.getExtent();
var bands = [];
var len = this.scale.count();
var start = extent[0];
var end = extent[1];
var size = end - start;
var span = end - start;

for (var i = 0; i < len; i++) {
bands.push([
size * i / len + start,
size * (i + 1) / len + start
span * i / len + start,
span * (i + 1) / len + start
]);
}
return bands;
Expand Down
1 change: 0 additions & 1 deletion src/coord/cartesian/AxisModel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,6 @@ define(function(require) {

zrUtil.merge(AxisModel.prototype, require('../axisModelCommonMixin'));


// x axis
AxisModel.extend({

Expand Down
2 changes: 1 addition & 1 deletion src/coord/polar/AngleAxis.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ define(function(require) {
* @type {string}
*/
this.type = 'category';
};
}

AngleAxis.prototype = {

Expand Down
6 changes: 3 additions & 3 deletions src/coord/polar/AxisModel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,8 +47,6 @@ define(function(require) {

polarIndex: 0,

axisAngle: 0,

splitNumber: 5
}
});
Expand All @@ -75,7 +73,9 @@ define(function(require) {

polarIndex: 0,

clockWise: true,
startAngle: 90,

clockwise: true,

splitNumber: 12,

Expand Down
23 changes: 14 additions & 9 deletions src/coord/polar/Polar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -159,7 +159,7 @@ define(function(require) {
return this.coordToPoint([
this._radiusAxis.dataToRadius(data[0], clamp),
this._angleAxis.dataToAngle(data[1], clamp)
])
]);
},

/**
Expand All @@ -184,20 +184,24 @@ define(function(require) {
pointToCoord: function (point) {
var dx = point[0] - this.cx;
var dy = point[1] - this.cy;
var angleAxis = this.getAngleAxis();
var extent = angleAxis.getExtent();
var minAngle = Math.min(extent[0], extent[1]);
var maxAngle = Math.max(extent[0], extent[1]);

var radius = Math.sqrt(dx * dx + dy * dy);
dx /= radius;
dy /= radius;

var radian = Math.atan2(dy, dx);
var radian = Math.atan2(-dy, dx) / Math.PI * 180;

// Threshold to 0 - 360
// FIXME Angle Extent ?
if (radian < 0) {
radian += Math.PI * 2;
// move to angleExtent
var dir = radian < minAngle ? 1 : -1;
while (radian < minAngle || radian > maxAngle) {
radian += dir * 360;
}

return [radius, radian / Math.PI * 180];
return [radius, radian];
},

/**
Expand All @@ -209,11 +213,12 @@ define(function(require) {
var radius = coord[0];
var radian = coord[1] / 180 * Math.PI;
var x = Math.cos(radian) * radius + this.cx;
var y = Math.sin(radian) * radius + this.cy;
// Inverse the y
var y = -Math.sin(radian) * radius + this.cy;

return [x, y];
}
}
};

return Polar;
});
12 changes: 10 additions & 2 deletions src/coord/polar/polarCreator.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,12 @@ define(function (require) {
axis.onBand = axisModel.get('boundaryGap') && axis.type === 'category';
axis.inverse = axisModel.get('inverse');

if (axisModel.type === 'angleAxis') {
var startAngle = axisModel.get('startAngle');
axis.setExtent(startAngle, startAngle + 360);
axis.inverse = axisModel.get('clockwise');
}

// Inject axis instance
axisModel.axis = axis;
axis.model = axisModel;
Expand Down Expand Up @@ -118,8 +124,10 @@ define(function (require) {
zrUtil.each(polarList, function (polar) {
var angleAxis = polar.getAngleAxis();
if (angleAxis.type === 'category' && !angleAxis.onBand) {
var angle = 360 - 360 / (angleAxis.scale.count() + 1);
angleAxis.setExtent(0, angle);
var extent = angleAxis.getExtent();
var diff = 360 / (angleAxis.scale.count() + 1);
angleAxis.inverse ? (extent[1] += diff) : (extent[1] -= diff);
angleAxis.setExtent(extent[0], extent[1]);
}
});

Expand Down

0 comments on commit 2fcdde6

Please sign in to comment.