mirror of
https://github.com/chartjs/Chart.js.git
synced 2024-10-08 05:09:08 +02:00
f6951816a0
Fixed JSHint warnings.
162 lines
5.7 KiB
JavaScript
162 lines
5.7 KiB
JavaScript
"use strict";
|
|
|
|
module.exports = function(Chart) {
|
|
|
|
var helpers = Chart.helpers;
|
|
|
|
Chart.defaults.global.elements.line = {
|
|
tension: 0.4,
|
|
backgroundColor: Chart.defaults.global.defaultColor,
|
|
borderWidth: 3,
|
|
borderColor: Chart.defaults.global.defaultColor,
|
|
borderCapStyle: 'butt',
|
|
borderDash: [],
|
|
borderDashOffset: 0.0,
|
|
borderJoinStyle: 'miter',
|
|
fill: true, // do we fill in the area between the line and its base axis
|
|
};
|
|
|
|
Chart.elements.Line = Chart.Element.extend({
|
|
lineToNextPoint: function(previousPoint, point, nextPoint, skipHandler, previousSkipHandler) {
|
|
var ctx = this._chart.ctx;
|
|
|
|
if (point._view.skip) {
|
|
skipHandler.call(this, previousPoint, point, nextPoint);
|
|
} else if (previousPoint._view.skip) {
|
|
previousSkipHandler.call(this, previousPoint, point, nextPoint);
|
|
} else if (point._view.tension === 0) {
|
|
ctx.lineTo(point._view.x, point._view.y);
|
|
} else {
|
|
// Line between points
|
|
ctx.bezierCurveTo(
|
|
previousPoint._view.controlPointNextX,
|
|
previousPoint._view.controlPointNextY,
|
|
point._view.controlPointPreviousX,
|
|
point._view.controlPointPreviousY,
|
|
point._view.x,
|
|
point._view.y
|
|
);
|
|
}
|
|
},
|
|
|
|
draw: function() {
|
|
var _this = this;
|
|
|
|
var vm = this._view;
|
|
var ctx = this._chart.ctx;
|
|
var first = this._children[0];
|
|
var last = this._children[this._children.length - 1];
|
|
|
|
function loopBackToStart(drawLineToCenter) {
|
|
if (!first._view.skip && !last._view.skip) {
|
|
// Draw a bezier line from last to first
|
|
ctx.bezierCurveTo(
|
|
last._view.controlPointNextX,
|
|
last._view.controlPointNextY,
|
|
first._view.controlPointPreviousX,
|
|
first._view.controlPointPreviousY,
|
|
first._view.x,
|
|
first._view.y
|
|
);
|
|
} else if (drawLineToCenter) {
|
|
// Go to center
|
|
ctx.lineTo(_this._view.scaleZero.x, _this._view.scaleZero.y);
|
|
}
|
|
}
|
|
|
|
ctx.save();
|
|
|
|
// If we had points and want to fill this line, do so.
|
|
if (this._children.length > 0 && vm.fill) {
|
|
// 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);
|
|
var next = helpers.nextItem(this._children, index);
|
|
|
|
// First point moves to it's starting position no matter what
|
|
if (index === 0) {
|
|
if (this._loop) {
|
|
ctx.moveTo(vm.scaleZero.x, vm.scaleZero.y);
|
|
} else {
|
|
ctx.moveTo(point._view.x, vm.scaleZero);
|
|
}
|
|
|
|
if (point._view.skip) {
|
|
if (!this._loop) {
|
|
ctx.moveTo(next._view.x, this._view.scaleZero);
|
|
}
|
|
} else {
|
|
ctx.lineTo(point._view.x, point._view.y);
|
|
}
|
|
} else {
|
|
this.lineToNextPoint(previous, point, next, function(previousPoint, point, nextPoint) {
|
|
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(nextPoint._view.x, this._view.scaleZero);
|
|
}
|
|
}, function(previousPoint, point) {
|
|
// If we skipped the last point, draw a line to ourselves so that the fill is nice
|
|
ctx.lineTo(point._view.x, point._view.y);
|
|
});
|
|
}
|
|
}, this);
|
|
|
|
// For radial scales, loop back around to the first point
|
|
if (this._loop) {
|
|
loopBackToStart(true);
|
|
} 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;
|
|
|
|
// IE 9 and 10 do not support line dash
|
|
if (ctx.setLineDash) {
|
|
ctx.setLineDash(vm.borderDash || Chart.defaults.global.elements.line.borderDash);
|
|
}
|
|
|
|
ctx.lineDashOffset = vm.borderDashOffset || Chart.defaults.global.elements.line.borderDashOffset;
|
|
ctx.lineJoin = vm.borderJoinStyle || Chart.defaults.global.elements.line.borderJoinStyle;
|
|
ctx.lineWidth = vm.borderWidth || Chart.defaults.global.elements.line.borderWidth;
|
|
ctx.strokeStyle = vm.borderColor || Chart.defaults.global.defaultColor;
|
|
ctx.beginPath();
|
|
|
|
helpers.each(this._children, function(point, index) {
|
|
var previous = helpers.previousItem(this._children, index);
|
|
var next = helpers.nextItem(this._children, index);
|
|
|
|
if (index === 0) {
|
|
ctx.moveTo(point._view.x, point._view.y);
|
|
} else {
|
|
this.lineToNextPoint(previous, point, next, function(previousPoint, point, nextPoint) {
|
|
ctx.moveTo(nextPoint._view.x, nextPoint._view.y);
|
|
}, function(previousPoint, point) {
|
|
// If we skipped the last point, move up to our point preventing a line from being drawn
|
|
ctx.moveTo(point._view.x, point._view.y);
|
|
});
|
|
}
|
|
}, this);
|
|
|
|
if (this._loop && this._children.length > 0) {
|
|
loopBackToStart();
|
|
}
|
|
|
|
ctx.stroke();
|
|
ctx.restore();
|
|
},
|
|
});
|
|
};
|