mirror of
https://github.com/chartjs/Chart.js.git
synced 2026-03-03 15:04:03 +01:00
4b421a50bf
The `fill` option now accepts the index of the target dataset (number) or a string starting by "+" or "-" followed by a number representing the dataset index relative to the current one (e.g. `fill: "-2"` on dataset at index 3 will fill to dataset at index 1). It's also possible to "propagate" the filling to the target of an hidden dataset (`options.plugins.filler.propagate`). Fill boundaries `zero`, `top` and `bottom` have been deprecated and replaced by `origin`, `start` and `end`. Implementation has been moved out of the line element into a new plugin (`src/plugins/plugin.filler.js`) and does not rely anymore on the deprecated model `scaleTop`, `scaleBottom` and `scaleZero` values. Drawing Bézier splines has been refactored in the canvas helpers (note that `Chart.helpers.canvas` is now an alias of `Chart.canvasHelpers`). Add 3 new examples and extend utils with a pseudo-random number generator that can be initialized with `srand`. That makes possible to design examples starting always with the same initial data.
88 lines
2.5 KiB
JavaScript
88 lines
2.5 KiB
JavaScript
'use strict';
|
|
|
|
module.exports = function(Chart) {
|
|
|
|
var helpers = Chart.helpers;
|
|
var globalDefaults = Chart.defaults.global;
|
|
|
|
Chart.defaults.global.elements.line = {
|
|
tension: 0.4,
|
|
backgroundColor: globalDefaults.defaultColor,
|
|
borderWidth: 3,
|
|
borderColor: globalDefaults.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
|
|
};
|
|
|
|
Chart.elements.Line = Chart.Element.extend({
|
|
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 globalOptionLineElements = globalDefaults.elements.line;
|
|
var lastDrawnIndex = -1;
|
|
var index, current, previous, currentVM;
|
|
|
|
// If we are looping, adding the first point again
|
|
if (me._loop && points.length) {
|
|
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 = vm.borderDashOffset || globalOptionLineElements.borderDashOffset;
|
|
ctx.lineJoin = vm.borderJoinStyle || globalOptionLineElements.borderJoinStyle;
|
|
ctx.lineWidth = vm.borderWidth || globalOptionLineElements.borderWidth;
|
|
ctx.strokeStyle = vm.borderColor || globalDefaults.defaultColor;
|
|
|
|
// Stroke Line
|
|
ctx.beginPath();
|
|
lastDrawnIndex = -1;
|
|
|
|
for (index = 0; index < points.length; ++index) {
|
|
current = points[index];
|
|
previous = helpers.previousItem(points, index);
|
|
currentVM = current._view;
|
|
|
|
// First point moves to it's starting position no matter what
|
|
if (index === 0) {
|
|
if (!currentVM.skip) {
|
|
ctx.moveTo(currentVM.x, currentVM.y);
|
|
lastDrawnIndex = index;
|
|
}
|
|
} else {
|
|
previous = lastDrawnIndex === -1 ? previous : 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, current._view);
|
|
}
|
|
lastDrawnIndex = index;
|
|
}
|
|
}
|
|
}
|
|
|
|
ctx.stroke();
|
|
ctx.restore();
|
|
}
|
|
});
|
|
};
|