mirror of
https://github.com/chartjs/Chart.js.git
synced 2024-10-06 20:29:12 +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.
63 lines
1.8 KiB
JSON
63 lines
1.8 KiB
JSON
{
|
|
"config": {
|
|
"type": "line",
|
|
"data": {
|
|
"labels": ["0", "1", "2", "3", "4", "5", "6", "7", "8"],
|
|
"datasets": [{
|
|
"backgroundColor": "rgba(255, 0, 0, 0.25)",
|
|
"data": [null, null, 0, -1, 0, 1, 0, -1, 0],
|
|
"fill": 1
|
|
}, {
|
|
"backgroundColor": "rgba(0, 255, 0, 0.25)",
|
|
"data": [1, 0, null, 1, 0, null, -1, 0, 1],
|
|
"fill": "+1"
|
|
}, {
|
|
"backgroundColor": "rgba(0, 0, 255, 0.25)",
|
|
"data": [0, 2, 0, -2, 0, 2, 0, null, null],
|
|
"fill": 3
|
|
}, {
|
|
"backgroundColor": "rgba(255, 0, 255, 0.25)",
|
|
"data": [2, 0, -2, 0, 2, 0, -2, 0, 2],
|
|
"fill": "-2"
|
|
}, {
|
|
"backgroundColor": "rgba(255, 255, 0, 0.25)",
|
|
"data": [3, 1, -1, -3, -1, 1, 3, 1, -1],
|
|
"fill": "-1"
|
|
}]
|
|
},
|
|
"options": {
|
|
"responsive": false,
|
|
"spanGaps": true,
|
|
"legend": false,
|
|
"title": false,
|
|
"scales": {
|
|
"xAxes": [{
|
|
"ticks": {
|
|
"display": false
|
|
}
|
|
}],
|
|
"yAxes": [{
|
|
"ticks": {
|
|
"display": false
|
|
}
|
|
}]
|
|
},
|
|
"elements": {
|
|
"point": {
|
|
"radius": 0
|
|
},
|
|
"line": {
|
|
"borderColor": "transparent",
|
|
"tension": 0
|
|
}
|
|
}
|
|
}
|
|
},
|
|
"options": {
|
|
"canvas": {
|
|
"height": 256,
|
|
"width": 512
|
|
}
|
|
}
|
|
}
|