archive-gh-me/Chart.js
1
0
Fork 0
mirror of https://github.com/chartjs/Chart.js.git synced 2025-12-08 20:36:08 +00:00
Code Issues Projects Releases Wiki Activity

Refactor the line drawing code. Tests are broken.

Browse Source
This commit is contained in:
Evert Timberg 2015-11-13 22:04:38 -05:00
parent be07f052d9
commit 05523b01b0
1 changed files with 78 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

186
src/elements/element.line.js
View File

@ -31,6 +31,37 @@
Chart.elements.Line = Chart.Element.extend({
lineToNextPoint: function(previousPoint, point, nextPoint) {
var ctx = this._chart.ctx;
if (point._view.skip) {
if (this.loop) {
// Go to center
ctx.lineTo(this._view.scaleZero.x, this._view.scaleZero.y);
} else {
ctx.lineTo(previousPoint._view.x, this._view.scaleZero);
ctx.moveTo(next._view.x, this._view.scaleZero);
}
} else if (previousPoint._view.skip) {
ctx.lineTo(point._view.x, point._view.y);
} else {
// Line between points
//if (point !== nextPoint) {
ctx.bezierCurveTo(
previousPoint._view.controlPointNextX,
previousPoint._view.controlPointNextY,
point._view.controlPointPreviousX,
point._view.controlPointPreviousY,
point._view.x,
point._view.y
);
//} else {
// Drawing to the last point in the line
//}
}
},
draw: function() {
var vm = this._view;
@ -40,78 +71,51 @@
ctx.save();
// Draw the background first (so the border is always on top)
helpers.each(this._children, function(point, index) {
var previous = helpers.previousItem(this._children, index);
var next = helpers.nextItem(this._children, index);
// First point moves to it's starting position no matter what
if (!index) {
ctx.moveTo(point._view.x, vm.scaleZero);
}
// Skip this point, draw to scaleZero, move to next point, and draw to next point
if (point._view.skip && !this.loop) {
ctx.lineTo(previous._view.x, vm.scaleZero);
ctx.moveTo(next._view.x, vm.scaleZero);
return;
}
// The previous line was skipped, so just draw a normal straight line to the point
if (previous._view.skip) {
ctx.lineTo(point._view.x, point._view.y);
return;
}
// Draw a bezier to point
if (vm.tension > 0 && index) {
//ctx.lineTo(point._view.x, point._view.y);
ctx.bezierCurveTo(
previous._view.controlPointNextX,
previous._view.controlPointNextY,
point._view.controlPointPreviousX,
point._view.controlPointPreviousY,
point._view.x,
point._view.y
);
return;
}
// Draw a straight line to the point
ctx.lineTo(point._view.x, point._view.y);
}, this);
// For radial scales, loop back around to the first point
if (this._loop) {
// Draw a bezier line
if (vm.tension > 0 && !first._view.skip) {
ctx.bezierCurveTo(
last._view.controlPointNextX,
last._view.controlPointNextY,
first._view.controlPointPreviousX,
first._view.controlPointPreviousY,
first._view.x,
first._view.y
);
return;
}
// Draw a straight line
ctx.lineTo(first._view.x, first._view.y);
}
// If we had points and want to fill this line, do so.
if (this._children.length > 0 && vm.fill) {
//Round off the line by going to the base of the chart, back to the start, then fill.
ctx.lineTo(this._children[this._children.length - 1]._view.x, vm.scaleZero);
ctx.lineTo(this._children[0]._view.x, vm.scaleZero);
// Draw the background first (so the border is always on top)
ctx.beginPath();
helpers.each(this._children, function(point, index) {
var previous = helpers.previousItem(this._children, index/*, this._loop*/);
var next = helpers.nextItem(this._children, index/*, this._loop*/);
// First point moves to it's starting position no matter what
if (index === 0) {
ctx.moveTo(point._view.x, vm.scaleZero);
ctx.lineTo(point._view.x, point._view.y);
} else {
this.lineToNextPoint(previous, point, next);
}
}, this);
// For radial scales, loop back around to the first point
if (this._loop) {
if (!first._view.skip) {
// Draw a bezier line
ctx.bezierCurveTo(
last._view.controlPointNextX,
last._view.controlPointNextY,
first._view.controlPointPreviousX,
first._view.controlPointPreviousY,
first._view.x,
first._view.y
);
} else {
// Go to center
ctx.lineTo(this._view.scaleZero.x, this._view.scaleZero.y);
}
} else {
//Round off the line by going to the base of the chart, back to the start, then fill.
ctx.lineTo(this._children[this._children.length - 1]._view.x, vm.scaleZero);
ctx.lineTo(this._children[0]._view.x, vm.scaleZero);
}
ctx.fillStyle = vm.backgroundColor || Chart.defaults.global.defaultColor;
ctx.closePath();
ctx.fill();
}
// Now draw the line between all the points with any borders
ctx.lineCap = vm.borderCapStyle || Chart.defaults.global.elements.line.borderCapStyle;
@ -130,49 +134,16 @@
var previous = helpers.previousItem(this._children, index);
var next = helpers.nextItem(this._children, index);
if (!index) {
ctx.moveTo(point._view.x, vm.scaleZero);
}
// Skip this point and move to the next points zeroPoint
if (point._view.skip && !this.loop) {
ctx.moveTo(next._view.x, vm.scaleZero);
return;
}
// Previous point was skipped, just move to the point
if (previous._view.skip) {
if (index === 0) {
ctx.moveTo(point._view.x, point._view.y);
return;
} else {
this.lineToNextPoint(previous, point, next);
}
// If First point, move to the point ahead of time (so a line doesn't get drawn up the left axis)
if (!index) {
ctx.moveTo(point._view.x, point._view.y);
}
// Draw a bezier line to the point
if (vm.tension > 0 && index) {
ctx.bezierCurveTo(
previous._view.controlPointNextX,
previous._view.controlPointNextY,
point._view.controlPointPreviousX,
point._view.controlPointPreviousY,
point._view.x,
point._view.y
);
return;
}
// Draw a straight line to the point
ctx.lineTo(point._view.x, point._view.y);
}, this);
if (this._loop && !first._view.skip) {
// Draw a bezier line to the first point
if (vm.tension > 0) {
if (this._loop) {
if (!first._view.skip) {
// Draw a bezier line
ctx.bezierCurveTo(
last._view.controlPointNextX,
last._view.controlPointNextY,
@ -181,11 +152,10 @@
first._view.x,
first._view.y
);
return;
} else {
// Go to center
ctx.lineTo(this._view.scaleZero.x, this._view.scaleZero.y);
}
// Draw a straight line to the first point
ctx.lineTo(first._view.x, first._view.y);
}
ctx.stroke();