112 lines
2.9 KiB
JavaScript
112 lines
2.9 KiB
JavaScript
'use strict';
|
|
|
|
var defaults = require('../core/core.defaults');
|
|
var Element = require('../core/core.element');
|
|
var helpers = require('../helpers/index');
|
|
|
|
var valueOrDefault = helpers.valueOrDefault;
|
|
|
|
var defaultColor = defaults.global.defaultColor;
|
|
|
|
defaults._set('global', {
|
|
elements: {
|
|
line: {
|
|
tension: 0.4,
|
|
backgroundColor: defaultColor,
|
|
borderWidth: 3,
|
|
borderColor: defaultColor,
|
|
borderCapStyle: 'butt',
|
|
borderDash: [],
|
|
borderDashOffset: 0.0,
|
|
borderJoinStyle: 'miter',
|
|
capBezierPoints: true,
|
|
fill: true, // do we fill in the area between the line and its base axis
|
|
}
|
|
}
|
|
});
|
|
|
|
module.exports = Element.extend({
|
|
_type: 'line',
|
|
|
|
draw: function() {
|
|
var me = this;
|
|
var vm = me._view;
|
|
var ctx = me._chart.ctx;
|
|
var spanGaps = vm.spanGaps;
|
|
var points = me._children.slice(); // clone array
|
|
var globalDefaults = defaults.global;
|
|
var globalOptionLineElements = globalDefaults.elements.line;
|
|
var lastDrawnIndex = -1;
|
|
var closePath = me._loop;
|
|
var index, previous, currentVM;
|
|
|
|
if (!points.length) {
|
|
return;
|
|
}
|
|
|
|
if (me._loop) {
|
|
for (index = 0; index < points.length; ++index) {
|
|
previous = helpers.previousItem(points, index);
|
|
// If the line has an open path, shift the point array
|
|
if (!points[index]._view.skip && previous._view.skip) {
|
|
points = points.slice(index).concat(points.slice(0, index));
|
|
closePath = spanGaps;
|
|
break;
|
|
}
|
|
}
|
|
// If the line has a close path, add the first point again
|
|
if (closePath) {
|
|
points.push(points[0]);
|
|
}
|
|
}
|
|
|
|
ctx.save();
|
|
|
|
// Stroke Line Options
|
|
ctx.lineCap = vm.borderCapStyle || globalOptionLineElements.borderCapStyle;
|
|
|
|
// IE 9 and 10 do not support line dash
|
|
if (ctx.setLineDash) {
|
|
ctx.setLineDash(vm.borderDash || globalOptionLineElements.borderDash);
|
|
}
|
|
|
|
ctx.lineDashOffset = valueOrDefault(vm.borderDashOffset, globalOptionLineElements.borderDashOffset);
|
|
ctx.lineJoin = vm.borderJoinStyle || globalOptionLineElements.borderJoinStyle;
|
|
ctx.lineWidth = valueOrDefault(vm.borderWidth, globalOptionLineElements.borderWidth);
|
|
ctx.strokeStyle = vm.borderColor || globalDefaults.defaultColor;
|
|
|
|
// Stroke Line
|
|
ctx.beginPath();
|
|
|
|
// First point moves to it's starting position no matter what
|
|
currentVM = points[0]._view;
|
|
if (!currentVM.skip) {
|
|
ctx.moveTo(currentVM.x, currentVM.y);
|
|
lastDrawnIndex = 0;
|
|
}
|
|
|
|
for (index = 1; index < points.length; ++index) {
|
|
currentVM = points[index]._view;
|
|
previous = lastDrawnIndex === -1 ? helpers.previousItem(points, index) : points[lastDrawnIndex];
|
|
|
|
if (!currentVM.skip) {
|
|
if ((lastDrawnIndex !== (index - 1) && !spanGaps) || lastDrawnIndex === -1) {
|
|
// There was a gap and this is the first point after the gap
|
|
ctx.moveTo(currentVM.x, currentVM.y);
|
|
} else {
|
|
// Line to next point
|
|
helpers.canvas.lineTo(ctx, previous._view, currentVM);
|
|
}
|
|
lastDrawnIndex = index;
|
|
}
|
|
}
|
|
|
|
if (closePath) {
|
|
ctx.closePath();
|
|
}
|
|
|
|
ctx.stroke();
|
|
ctx.restore();
|
|
}
|
|
});
|