children: [
'area/line-boundaries',
'area/line-datasets',
+ 'area/line-drawtime',
'area/line-stacked',
'area/radar'
]
## Configuration
+Namespace: `options.plugins.filler`
+
| Option | Type | Default | Description |
| :--- | :--- | :--- | :--- |
-| [`plugins.filler.propagate`](#propagate) | `boolean` | `true` | Fill propagation when target is hidden.
+| `drawTime` | `string` | `beforeDatasetDraw` | Filler draw time. Supported values: `'beforeDatasetDraw'`, `'beforeDatasetsDraw'`
+| [`propagate`](#propagate) | `boolean` | `true` | Fill propagation when target is hidden.
### propagate
--- /dev/null
+# Line Chart drawTime
+
+```js chart-editor
+// <block:setup:2>
+const inputs = {
+ min: -100,
+ max: 100,
+ count: 8,
+ decimals: 2,
+ continuity: 1
+};
+
+const generateLabels = () => {
+ return Utils.months({count: inputs.count});
+};
+
+Utils.srand(3);
+const generateData = () => (Utils.numbers(inputs));
+// </block:setup>
+
+// <block:data:0>
+const data = {
+ labels: generateLabels(),
+ datasets: [
+ {
+ label: 'Dataset 1',
+ data: generateData(),
+ borderColor: Utils.CHART_COLORS.red,
+ backgroundColor: Utils.transparentize(Utils.CHART_COLORS.red),
+ fill: true
+ },
+ {
+ label: 'Dataset 2',
+ data: generateData(),
+ borderColor: Utils.CHART_COLORS.blue,
+ backgroundColor: Utils.transparentize(Utils.CHART_COLORS.blue),
+ fill: true
+ }
+ ]
+};
+// </block:data>
+
+// <block:actions:3>
+let smooth = false;
+
+const actions = [
+ {
+ name: 'drawTime: beforeDatasetDraw (default)',
+ handler: (chart) => {
+ chart.options.plugins.filler.drawTime = 'beforeDatasetDraw';
+ chart.update();
+ }
+ },
+ {
+ name: 'drawTime: beforeDatasetsDraw',
+ handler: (chart) => {
+ chart.options.plugins.filler.drawTime = 'beforeDatasetsDraw';
+ chart.update();
+ }
+ },
+ {
+ name: 'Randomize',
+ handler(chart) {
+ chart.data.datasets.forEach(dataset => {
+ dataset.data = generateData();
+ });
+ chart.update();
+ }
+ },
+ {
+ name: 'Smooth',
+ handler(chart) {
+ smooth = !smooth;
+ chart.options.elements.line.tension = smooth ? 0.4 : 0;
+ chart.update();
+ }
+ }
+];
+// </block:actions>
+
+// <block:config:1>
+const config = {
+ type: 'line',
+ data: data,
+ options: {
+ plugins: {
+ filler: {
+ propagate: false,
+ },
+ title: {
+ display: true,
+ text: (ctx) => 'drawTime: ' + ctx.chart.options.plugins.filler.drawTime
+ }
+ },
+ pointBackgroundColor: '#fff',
+ radius: 10,
+ interaction: {
+ intersect: false,
+ }
+ },
+};
+// </block:config>
+
+module.exports = {
+ actions: actions,
+ config: config,
+};
+```
ctx.restore();
}
+function drawfill(ctx, source, area) {
+ const target = getTarget(source);
+ const {line, scale} = source;
+ const lineOpts = line.options;
+ const fillOption = lineOpts.fill;
+ const color = lineOpts.backgroundColor;
+ const {above = color, below = color} = fillOption || {};
+ if (target && line.points.length) {
+ clipArea(ctx, area);
+ doFill(ctx, {line, target, above, below, area, scale});
+ unclipArea(ctx);
+ }
+}
+
export default {
id: 'filler',
afterDatasetsUpdate(chart, _args, options) {
const count = (chart.data.datasets || []).length;
- const propagate = options.propagate;
const sources = [];
let meta, i, line, source;
fill: decodeFill(line, i, count),
chart,
scale: meta.vScale,
- line
+ line,
};
}
continue;
}
- source.fill = resolveTarget(sources, i, propagate);
+ source.fill = resolveTarget(sources, i, options.propagate);
}
},
- beforeDatasetsDraw(chart) {
+ beforeDatasetsDraw(chart, _args, options) {
const metasets = chart.getSortedVisibleDatasetMetas();
const area = chart.chartArea;
- let i, meta;
- for (i = metasets.length - 1; i >= 0; --i) {
- meta = metasets[i].$filler;
+ for (let i = metasets.length - 1; i >= 0; --i) {
+ const source = metasets[i].$filler;
- if (meta) {
- meta.line.updateControlPoints(area);
+ if (source) {
+ source.line.updateControlPoints(area);
+
+ if (options.drawTime === 'beforeDatasetsDraw') {
+ drawfill(chart.ctx, source, area);
+ }
}
}
},
- beforeDatasetDraw(chart, args) {
- const area = chart.chartArea;
- const ctx = chart.ctx;
+ beforeDatasetDraw(chart, args, options) {
const source = args.meta.$filler;
- if (!source || source.fill === false) {
+ if (!source || source.fill === false || options.drawTime !== 'beforeDatasetDraw') {
return;
}
- const target = getTarget(source);
- const {line, scale} = source;
- const lineOpts = line.options;
- const fillOption = lineOpts.fill;
- const color = lineOpts.backgroundColor;
- const {above = color, below = color} = fillOption || {};
- if (target && line.points.length) {
- clipArea(ctx, area);
- doFill(ctx, {line, target, above, below, area, scale});
- unclipArea(ctx);
- }
+ drawfill(chart.ctx, source, chart.chartArea);
},
defaults: {
- propagate: true
+ propagate: true,
+ drawTime: 'beforeDatasetDraw'
}
};
--- /dev/null
+module.exports = {
+ config: {
+ type: 'line',
+ data: {
+ labels: ['15:00', '16:00', '17:00', '18:00', '19:00', '20:00'],
+ datasets: [
+ {
+ borderColor: '#00ADEE80',
+ backgroundColor: '#00ADEE',
+ data: [0, 1, 1, 2, 2, 0],
+ },
+ {
+ borderColor: '#BD262880',
+ backgroundColor: '#BD2628',
+ data: [0, 2, 2, 1, 1, 1],
+ }
+ ]
+ },
+ options: {
+ borderWidth: 4,
+ fill: true,
+ radius: 20,
+ pointBackgroundColor: '#ffff',
+ cubicInterpolationMode: 'monotone',
+ plugins: {
+ legend: false,
+ filler: {
+ drawTime: 'beforeDatasetDraw'
+ }
+ },
+ scales: {
+ x: {
+ display: false,
+ },
+ y: {
+ display: false
+ }
+ }
+ }
+ }
+};
--- /dev/null
+module.exports = {
+ config: {
+ type: 'line',
+ data: {
+ labels: ['15:00', '16:00', '17:00', '18:00', '19:00', '20:00'],
+ datasets: [
+ {
+ borderColor: '#00ADEE80',
+ backgroundColor: '#00ADEE',
+ data: [0, 1, 1, 2, 2, 0],
+ },
+ {
+ borderColor: '#BD262880',
+ backgroundColor: '#BD2628',
+ data: [0, 2, 2, 1, 1, 1],
+ }
+ ]
+ },
+ options: {
+ borderWidth: 4,
+ fill: true,
+ radius: 20,
+ pointBackgroundColor: '#ffff',
+ cubicInterpolationMode: 'monotone',
+ plugins: {
+ legend: false,
+ filler: {
+ drawTime: 'beforeDatasetsDraw'
+ }
+ },
+ scales: {
+ x: {
+ display: false,
+ },
+ y: {
+ display: false
+ }
+ }
+ }
+ }
+};
export const Filler: Plugin;
export interface FillerOptions {
+ drawTime: 'beforeDatasetDraw' | 'beforeDatasetsDraw';
propagate: boolean;
}
projects / thirdparty / Chart.js.git / commitdiff
