mirror of
https://github.com/chartjs/Chart.js.git
synced 2025-12-08 20:36:08 +00:00
- Added dataset option |cubicInterpolationMode| to allow for curves with different interpolation modes on the same graph (updated doc accordingly)
- Added new sample file to demonstrate the monotone cubic interpolation mode - Fixed a typo in a comment in updateBezierControlPoints
This commit is contained in:
MatthieuRivaud
parent
2409908027
commit
d06fbc772f
@ -39,7 +39,7 @@ label | `String` | The label for the dataset which appears in the legend and too
|
||||
xAxisID | `String` | The ID of the x axis to plot this dataset on
|
||||
yAxisID | `String` | The ID of the y axis to plot this dataset on
|
||||
fill | `Boolean` | If true, fill the area under the line
|
||||
cubicInterpolationMode | `String` | Algorithm used to interpolate a smooth curve from the discrete data points. Options are 'default' and 'monotone'. The 'default' algorithm uses a custom weighted cubic interpolation, which produces pleasant curves for all types of datasets. The 'monotone' algorithm is more suited to `y = f(x)` datasets : it preserves monotonicity (or piecewise monotonicity) of the dataset being interpolated, and ensures local extremums (if any) stay at input data points. If unknown or `undefined`, this options is treated as 'default'.
|
||||
cubicInterpolationMode | `String` | Algorithm used to interpolate a smooth curve from the discrete data points. Options are 'default' and 'monotone'. The 'default' algorithm uses a custom weighted cubic interpolation, which produces pleasant curves for all types of datasets. The 'monotone' algorithm is more suited to `y = f(x)` datasets : it preserves monotonicity (or piecewise monotonicity) of the dataset being interpolated, and ensures local extremums (if any) stay at input data points. If left untouched (`undefined`), the global `options.elements.line.cubicInterpolationMode` property is used.
|
||||
lineTension | `Number` | Bezier curve tension of the line. Set to 0 to draw straightlines. This option is ignored if monotone cubic interpolation is used. *Note* This was renamed from 'tension' but the old name still works.
|
||||
backgroundColor | `Color` | The fill color under the line. See [Colors](#chart-configuration-colors)
|
||||
borderWidth | `Number` | The width of the line in pixels
|
||||
|
||||
113
samples/line-cubicInterpolationMode.html
Normal file
113
samples/line-cubicInterpolationMode.html
Normal file
@ -0,0 +1,113 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Line Chart - Cubic interpolation mode</title>
|
||||
<script src="../dist/Chart.bundle.js"></script>
|
||||
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
|
||||
<style>
|
||||
canvas{
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div style="width:75%;">
|
||||
<canvas id="canvas"></canvas>
|
||||
</div>
|
||||
<br>
|
||||
<br>
|
||||
<button id="randomizeData">Randomize Data</button>
|
||||
<script>
|
||||
|
||||
var randomScalingFactor = function() {
|
||||
return Math.round(Math.random() * 100);
|
||||
//return 0;
|
||||
};
|
||||
var randomColorFactor = function() {
|
||||
return Math.round(Math.random() * 255);
|
||||
};
|
||||
var randomColor = function(opacity) {
|
||||
return 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',' + (opacity || '.3') + ')';
|
||||
};
|
||||
|
||||
var datapoints = [0, 20, 20, 60, 60, 120, NaN, 180, 120, 125, 105, 110, 170];
|
||||
var config = {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"],
|
||||
datasets: [{
|
||||
label: "Cubic interpolation (monotone)",
|
||||
data: datapoints,
|
||||
borderColor: 'rgba(255, 0, 0, 0.7)',
|
||||
backgroundColor: 'rgba(0, 0, 0, 0)',
|
||||
fill: false,
|
||||
cubicInterpolationMode: 'monotone'
|
||||
}, {
|
||||
label: "Cubic interpolation (default)",
|
||||
data: datapoints,
|
||||
borderColor: 'rgba(0, 0, 255, 0.3)',
|
||||
backgroundColor: 'rgba(0, 0, 0, 0)',
|
||||
fill: false,
|
||||
}, {
|
||||
label: "Linear interpolation",
|
||||
data: datapoints,
|
||||
borderColor: 'rgba(0, 0, 0, 0.10)',
|
||||
backgroundColor: 'rgba(0, 0, 0, 0)',
|
||||
fill: false,
|
||||
lineTension: 0
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
title:{
|
||||
display:true,
|
||||
text:'Chart.js Line Chart - Cubic interpolation mode'
|
||||
},
|
||||
tooltips: {
|
||||
mode: 'label'
|
||||
},
|
||||
hover: {
|
||||
mode: 'dataset'
|
||||
},
|
||||
scales: {
|
||||
xAxes: [{
|
||||
display: true,
|
||||
scaleLabel: {
|
||||
display: true
|
||||
}
|
||||
}],
|
||||
yAxes: [{
|
||||
display: true,
|
||||
scaleLabel: {
|
||||
display: true,
|
||||
labelString: 'Value'
|
||||
},
|
||||
ticks: {
|
||||
suggestedMin: -10,
|
||||
suggestedMax: 200,
|
||||
}
|
||||
}]
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
window.onload = function() {
|
||||
var ctx = document.getElementById("canvas").getContext("2d");
|
||||
window.myLine = new Chart(ctx, config);
|
||||
};
|
||||
|
||||
$('#randomizeData').click(function() {
|
||||
for (var i = 0, len = datapoints.length; i < len; ++i) {
|
||||
datapoints[i] = Math.random() < 0.05 ? NaN : randomScalingFactor();
|
||||
}
|
||||
window.myLine.update();
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -90,6 +90,7 @@ module.exports = function(Chart) {
|
||||
borderJoinStyle: custom.borderJoinStyle ? custom.borderJoinStyle : (dataset.borderJoinStyle || lineElementOptions.borderJoinStyle),
|
||||
fill: custom.fill ? custom.fill : (dataset.fill !== undefined ? dataset.fill : lineElementOptions.fill),
|
||||
steppedLine: custom.steppedLine ? custom.steppedLine : helpers.getValueOrDefault(dataset.steppedLine, lineElementOptions.stepped),
|
||||
cubicInterpolationMode: custom.cubicInterpolationMode ? custom.cubicInterpolationMode : helpers.getValueOrDefault(dataset.cubicInterpolationMode, lineElementOptions.cubicInterpolationMode),
|
||||
// Scale
|
||||
scaleTop: scale.top,
|
||||
scaleBottom: scale.bottom,
|
||||
@ -248,7 +249,7 @@ module.exports = function(Chart) {
|
||||
var meta = me.getMeta();
|
||||
var area = me.chart.chartArea;
|
||||
|
||||
// only consider points that are drawn in case the spanGaps option is ued
|
||||
// Only consider points that are drawn in case the spanGaps option is used
|
||||
var points = (meta.data || []).filter(function(pt) { return !pt._model.skip; });
|
||||
var i, ilen, point, model, controlPoints;
|
||||
|
||||
@ -256,7 +257,7 @@ module.exports = function(Chart) {
|
||||
return Math.max(Math.min(pt, max), min);
|
||||
}
|
||||
|
||||
if (me.chart.options.elements.line.cubicInterpolationMode == 'monotone') {
|
||||
if (meta.dataset._model.cubicInterpolationMode == 'monotone') {
|
||||
helpers.splineCurveMonotone(points);
|
||||
}
|
||||
else {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user