mirror of
https://github.com/chartjs/Chart.js.git
synced 2025-12-08 20:36:08 +00:00
Radar Chart skipNull & bezier fixes
This commit is contained in:
Tanner Linsley
parent
06d55e3501
commit
7e791e02f2
@ -27,14 +27,14 @@
|
||||
label: "My First dataset",
|
||||
backgroundColor: "rgba(220,220,220,0.2)",
|
||||
pointBackgroundColor: "rgba(220,220,220,1)",
|
||||
data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
|
||||
data: [null, randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
|
||||
}, {
|
||||
label: "My Second dataset",
|
||||
backgroundColor: "rgba(151,187,205,0.2)",
|
||||
pointBackgroundColor: "rgba(151,187,205,1)",
|
||||
hoverPointBackgroundColor: "#fff",
|
||||
pointHighlightStroke: "rgba(151,187,205,1)",
|
||||
data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
|
||||
data: [null, randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
|
||||
@ -1274,32 +1274,32 @@
|
||||
|
||||
// Draw the background first (so the border is always on top)
|
||||
helpers.each(this._children, function(point, index) {
|
||||
var scaleZero = point._yScale.getPointPixelForValue(0);
|
||||
var previous = this.previousPoint(point, this._children, index);
|
||||
var next = this.nextPoint(point, this._children, index);
|
||||
|
||||
// First point only
|
||||
if (index === 0) {
|
||||
if (point._view.skip && vm.skipNull) {
|
||||
ctx.moveTo(point._view.x, scaleZero);
|
||||
} else {
|
||||
ctx.moveTo(point._view.x, point._view.y);
|
||||
}
|
||||
ctx.moveTo(point._view.x, point._view.y);
|
||||
return;
|
||||
}
|
||||
|
||||
// Start Skip and drag along scale baseline
|
||||
if (point._view.skip && vm.skipNull) {
|
||||
ctx.lineTo(this.previousPoint(point, this._children, index)._view.x, scaleZero);
|
||||
ctx.moveTo(this.nextPoint(point, this._children, index)._view.x, scaleZero);
|
||||
if (point._view.skip && vm.skipNull && !this._loop) {
|
||||
ctx.lineTo(previous._view.x, point._view.y);
|
||||
ctx.moveTo(next._view.x, point._view.y);
|
||||
}
|
||||
// End Skip Stright line from the base line
|
||||
else if (this.previousPoint(point, this._children, index)._view.skip && vm.skipNull) {
|
||||
ctx.moveTo(point._view.x, scaleZero);
|
||||
else if (previous._view.skip && vm.skipNull && !this._loop) {
|
||||
ctx.moveTo(point._view.x, previous._view.y);
|
||||
ctx.lineTo(point._view.x, point._view.y);
|
||||
}
|
||||
|
||||
if (previous._view.skip && vm.skipNull) {
|
||||
ctx.moveTo(point._view.x, point._view.y);
|
||||
}
|
||||
// Normal Bezier Curve
|
||||
else {
|
||||
if (vm._tension > 0 || 1) {
|
||||
var previous = this.previousPoint(point, this._children, index);
|
||||
if (vm.tension > 0) {
|
||||
ctx.bezierCurveTo(
|
||||
previous._view.controlPointNextX,
|
||||
previous._view.controlPointNextY,
|
||||
@ -1315,8 +1315,8 @@
|
||||
}, this);
|
||||
|
||||
// For radial scales, loop back around to the first point
|
||||
if (vm.loop) {
|
||||
if (vm._tension > 0 || 1) {
|
||||
if (this._loop) {
|
||||
if (vm.tension > 0 && !first._view.skip) {
|
||||
|
||||
ctx.bezierCurveTo(
|
||||
last._view.controlPointNextX,
|
||||
@ -1348,46 +1348,49 @@
|
||||
ctx.beginPath();
|
||||
|
||||
helpers.each(this._children, function(point, index) {
|
||||
var scaleZero = point._yScale.getPointPixelForValue(0);
|
||||
var previous = this.previousPoint(point, this._children, index);
|
||||
var next = this.nextPoint(point, this._children, index);
|
||||
|
||||
// First point only
|
||||
if (index === 0) {
|
||||
if (point._view.skip && vm.skipNull) {
|
||||
ctx.moveTo(point._view.x, scaleZero);
|
||||
} else {
|
||||
ctx.moveTo(point._view.x, point._view.y);
|
||||
}
|
||||
ctx.moveTo(point._view.x, point._view.y);
|
||||
return;
|
||||
}
|
||||
|
||||
// Start Skip and drag along scale baseline
|
||||
if (point._view.skip && vm.skipNull) {
|
||||
ctx.moveTo(this.previousPoint(point, this._children, index)._view.x, scaleZero);
|
||||
ctx.moveTo(this.nextPoint(point, this._children, index)._view.x, scaleZero);
|
||||
if (point._view.skip && vm.skipNull && !this._loop) {
|
||||
ctx.moveTo(previous._view.x, point._view.y);
|
||||
ctx.moveTo(next._view.x, point._view.y);
|
||||
return;
|
||||
}
|
||||
// End Skip Stright line from the base line
|
||||
else if (this.previousPoint(point, this._children, index)._view.skip && vm.skipNull) {
|
||||
ctx.moveTo(point._view.x, scaleZero);
|
||||
if (previous._view.skip && vm.skipNull && !this._loop) {
|
||||
ctx.moveTo(point._view.x, previous._view.y);
|
||||
ctx.moveTo(point._view.x, point._view.y);
|
||||
return;
|
||||
}
|
||||
|
||||
if (previous._view.skip && vm.skipNull) {
|
||||
ctx.moveTo(point._view.x, point._view.y);
|
||||
return;
|
||||
}
|
||||
// Normal Bezier Curve
|
||||
else {
|
||||
if (vm._tension > 0 || 1) {
|
||||
var previous = this.previousPoint(point, this._children, index);
|
||||
ctx.bezierCurveTo(
|
||||
previous._view.controlPointNextX,
|
||||
previous._view.controlPointNextY,
|
||||
point._view.controlPointPreviousX,
|
||||
point._view.controlPointPreviousY,
|
||||
point._view.x,
|
||||
point._view.y
|
||||
);
|
||||
} else {
|
||||
ctx.lineTo(point._view.x, point._view.y);
|
||||
}
|
||||
if (vm.tension > 0) {
|
||||
ctx.bezierCurveTo(
|
||||
previous._view.controlPointNextX,
|
||||
previous._view.controlPointNextY,
|
||||
point._view.controlPointPreviousX,
|
||||
point._view.controlPointPreviousY,
|
||||
point._view.x,
|
||||
point._view.y
|
||||
);
|
||||
} else {
|
||||
ctx.lineTo(point._view.x, point._view.y);
|
||||
}
|
||||
}, this);
|
||||
if (vm.loop) {
|
||||
if (vm._tension > 0 || 1) {
|
||||
|
||||
if (this._loop && !first._view.skip) {
|
||||
if (vm.tension > 0) {
|
||||
|
||||
ctx.bezierCurveTo(
|
||||
last._view.controlPointNextX,
|
||||
@ -1406,15 +1409,17 @@
|
||||
ctx.stroke();
|
||||
|
||||
},
|
||||
previousPoint: function(point, collection, index) {
|
||||
return helpers.findPreviousWhere(collection, function() {
|
||||
return true;
|
||||
}, index) || point;
|
||||
},
|
||||
nextPoint: function(point, collection, index) {
|
||||
return helpers.findNextWhere(collection, function() {
|
||||
return true;
|
||||
}, index) || point;
|
||||
if (this.loop) {
|
||||
return collection[index + 1] || collection[0];
|
||||
}
|
||||
return collection[index + 1] || collection[collection.length - 1];
|
||||
},
|
||||
previousPoint: function(point, collection, index) {
|
||||
if (this.loop) {
|
||||
return collection[index - 1] || collection[collection.length - 1];
|
||||
}
|
||||
return collection[index - 1] || collection[0];
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
@ -95,7 +95,7 @@
|
||||
_chart: this.chart,
|
||||
_datasetIndex: datasetIndex,
|
||||
_points: dataset.metaData,
|
||||
loop: true,
|
||||
_loop: true
|
||||
});
|
||||
|
||||
dataset.metaData = [];
|
||||
@ -134,12 +134,13 @@
|
||||
this.update();
|
||||
},
|
||||
nextPoint: function(collection, index) {
|
||||
return collection[index + 1] || collection[collection.length - 1];
|
||||
return collection[index + 1] || collection[0];
|
||||
},
|
||||
previousPoint: function(collection, index) {
|
||||
return collection[index - 1] || collection[0];
|
||||
return collection[index - 1] || collection[collection.length - 1];
|
||||
},
|
||||
resetElements: function() {
|
||||
|
||||
// Update the points
|
||||
this.eachElement(function(point, index, dataset, datasetIndex) {
|
||||
helpers.extend(point, {
|
||||
@ -147,6 +148,7 @@
|
||||
_chart: this.chart,
|
||||
_datasetIndex: datasetIndex,
|
||||
_index: index,
|
||||
_scale: this.scale,
|
||||
|
||||
// Desired view properties
|
||||
_model: {
|
||||
@ -176,28 +178,10 @@
|
||||
point._model.tension
|
||||
);
|
||||
|
||||
point._model.controlPointPreviousX = controlPoints.previous.x;
|
||||
point._model.controlPointNextX = controlPoints.next.x;
|
||||
|
||||
// Prevent the bezier going outside of the bounds of the graph
|
||||
|
||||
// Cap puter bezier handles to the upper/lower scale bounds
|
||||
if (controlPoints.next.y > this.chartArea.bottom) {
|
||||
point._model.controlPointNextY = this.chartArea.bottom;
|
||||
} else if (controlPoints.next.y < this.chartArea.top) {
|
||||
point._model.controlPointNextY = this.chartArea.top;
|
||||
} else {
|
||||
point._model.controlPointNextY = controlPoints.next.y;
|
||||
}
|
||||
|
||||
// Cap inner bezier handles to the upper/lower scale bounds
|
||||
if (controlPoints.previous.y > this.chartArea.bottom) {
|
||||
point._model.controlPointPreviousY = this.chartArea.bottom;
|
||||
} else if (controlPoints.previous.y < this.chartArea.top) {
|
||||
point._model.controlPointPreviousY = this.chartArea.top;
|
||||
} else {
|
||||
point._model.controlPointPreviousY = controlPoints.previous.y;
|
||||
}
|
||||
point._model.controlPointPreviousX = this.scale.xCenter;
|
||||
point._model.controlPointPreviousY = this.scale.yCenter;
|
||||
point._model.controlPointNextX = this.scale.xCenter;
|
||||
point._model.controlPointNextY = this.scale.yCenter;
|
||||
|
||||
// Now pivot the point for animation
|
||||
point.pivot();
|
||||
@ -211,10 +195,10 @@
|
||||
helpers.extend(dataset.metaDataset, {
|
||||
// Utility
|
||||
_datasetIndex: datasetIndex,
|
||||
|
||||
|
||||
// Data
|
||||
_children: dataset.metaData,
|
||||
|
||||
|
||||
// Model
|
||||
_model: {
|
||||
// Appearance
|
||||
@ -225,7 +209,7 @@
|
||||
fill: dataset.fill !== undefined ? dataset.fill : this.options.elements.line.fill, // use the value from the dataset if it was provided. else fall back to the default
|
||||
skipNull: dataset.skipNull !== undefined ? dataset.skipNull : this.options.elements.line.skipNull,
|
||||
drawNull: dataset.drawNull !== undefined ? dataset.drawNull : this.options.elements.line.drawNull,
|
||||
|
||||
|
||||
// Scale
|
||||
scaleTop: this.scale.top,
|
||||
scaleBottom: this.scale.bottom,
|
||||
@ -351,9 +335,7 @@
|
||||
this.clear();
|
||||
|
||||
// Draw all the scales
|
||||
helpers.each(this.scales, function(scale) {
|
||||
scale.draw(this.chartArea);
|
||||
}, this);
|
||||
this.scale.draw(this.chartArea);
|
||||
|
||||
// reverse for-loop for proper stacking
|
||||
for (var i = this.data.datasets.length - 1; i >= 0; i--) {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user