mirror of
https://github.com/chartjs/Chart.js.git
synced 2024-10-06 12:19:08 +02: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.
57 lines
1.6 KiB
JSON
57 lines
1.6 KiB
JSON
{
|
|
"config": {
|
|
"type": "line",
|
|
"data": {
|
|
"labels": ["0", "1", "2", "3", "4", "5", "6", "7", "8"],
|
|
"datasets": [{
|
|
"backgroundColor": "rgba(0, 0, 192, 0.25)",
|
|
"data": [null, null, 2, 4, 2, 1, -1, 1, 2]
|
|
}, {
|
|
"backgroundColor": "rgba(0, 192, 0, 0.25)",
|
|
"data": [4, 2, null, 3, 2.5, null, -2, 1.5, 3]
|
|
}, {
|
|
"backgroundColor": "rgba(192, 0, 0, 0.25)",
|
|
"data": [3.5, 2, 1, 2.5, -2, 3, -1, null, null]
|
|
}, {
|
|
"backgroundColor": "rgba(128, 0, 128, 0.25)",
|
|
"data": [5, 6, 5, -2, -4, -3, 4, 2, 4.5]
|
|
}]
|
|
},
|
|
"options": {
|
|
"responsive": false,
|
|
"spanGaps": false,
|
|
"legend": false,
|
|
"title": false,
|
|
"scales": {
|
|
"xAxes": [{
|
|
"ticks": {
|
|
"display": false
|
|
}
|
|
}],
|
|
"yAxes": [{
|
|
"ticks": {
|
|
"display": false
|
|
}
|
|
}]
|
|
},
|
|
"elements": {
|
|
"point": {
|
|
"radius": 0
|
|
},
|
|
"line": {
|
|
"cubicInterpolationMode": "monotone",
|
|
"borderColor": "transparent",
|
|
"stepped": true,
|
|
"fill": "origin"
|
|
}
|
|
}
|
|
}
|
|
},
|
|
"options": {
|
|
"canvas": {
|
|
"height": 256,
|
|
"width": 512
|
|
}
|
|
}
|
|
}
|