mirror of
https://github.com/chartjs/Chart.js.git
synced 2024-10-07 04:39:06 +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.
158 lines
3.5 KiB
HTML
158 lines
3.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en-US">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>area > datasets | Chart.js sample</title>
|
|
<link rel="stylesheet" type="text/css" href="../style.css">
|
|
<script src="../../dist/Chart.bundle.js"></script>
|
|
<script src="../utils.js"></script>
|
|
<script src="analyser.js"></script>
|
|
</head>
|
|
<body>
|
|
<div class="content">
|
|
<div class="wrapper">
|
|
<canvas id="chart-0"></canvas>
|
|
</div>
|
|
<div class="toolbar">
|
|
<button onclick="togglePropagate(this)">Propagate</button>
|
|
<button onclick="toggleSmooth(this)">Smooth</button>
|
|
<button onclick="randomize(this)">Randomize</button>
|
|
</div>
|
|
<div id="chart-analyser" class="analyser"></div>
|
|
</div>
|
|
|
|
<script>
|
|
var presets = window.chartColors;
|
|
var utils = Samples.utils;
|
|
var inputs = {
|
|
min: 20,
|
|
max: 80,
|
|
count: 8,
|
|
decimals: 2,
|
|
continuity: 1
|
|
};
|
|
|
|
function generateData() {
|
|
return utils.numbers(inputs);
|
|
}
|
|
|
|
function generateLabels(config) {
|
|
return utils.months({count: inputs.count});
|
|
}
|
|
|
|
utils.srand(42);
|
|
|
|
var data = {
|
|
labels: generateLabels(),
|
|
datasets: [{
|
|
backgroundColor: utils.transparentize(presets.red),
|
|
borderColor: presets.red,
|
|
data: generateData(),
|
|
hidden: true,
|
|
label: 'D0'
|
|
}, {
|
|
backgroundColor: utils.transparentize(presets.orange),
|
|
borderColor: presets.orange,
|
|
data: generateData(),
|
|
label: 'D1',
|
|
fill: '-1'
|
|
}, {
|
|
backgroundColor: utils.transparentize(presets.yellow),
|
|
borderColor: presets.yellow,
|
|
data: generateData(),
|
|
hidden: true,
|
|
label: 'D2',
|
|
fill: 1
|
|
}, {
|
|
backgroundColor: utils.transparentize(presets.green),
|
|
borderColor: presets.green,
|
|
data: generateData(),
|
|
label: 'D3',
|
|
fill: '-1'
|
|
}, {
|
|
backgroundColor: utils.transparentize(presets.blue),
|
|
borderColor: presets.blue,
|
|
data: generateData(),
|
|
label: 'D4',
|
|
fill: '-1'
|
|
}, {
|
|
backgroundColor: utils.transparentize(presets.grey),
|
|
borderColor: presets.grey,
|
|
data: generateData(),
|
|
label: 'D5',
|
|
fill: '+2'
|
|
}, {
|
|
backgroundColor: utils.transparentize(presets.purple),
|
|
borderColor: presets.purple,
|
|
data: generateData(),
|
|
label: 'D6',
|
|
fill: false
|
|
}, {
|
|
backgroundColor: utils.transparentize(presets.red),
|
|
borderColor: presets.red,
|
|
data: generateData(),
|
|
label: 'D7',
|
|
fill: 8
|
|
}, {
|
|
backgroundColor: utils.transparentize(presets.orange),
|
|
borderColor: presets.orange,
|
|
data: generateData(),
|
|
hidden: true,
|
|
label: 'D8',
|
|
fill: 'end'
|
|
}]
|
|
};
|
|
|
|
var options = {
|
|
maintainAspectRatio: false,
|
|
spanGaps: false,
|
|
elements: {
|
|
line: {
|
|
tension: 0.000001
|
|
}
|
|
},
|
|
scales: {
|
|
yAxes: [{
|
|
stacked: true
|
|
}]
|
|
},
|
|
plugins: {
|
|
filler: {
|
|
propagate: false
|
|
},
|
|
samples_filler_analyser: {
|
|
target: 'chart-analyser'
|
|
}
|
|
}
|
|
};
|
|
|
|
var chart = new Chart('chart-0', {
|
|
type: 'line',
|
|
data: data,
|
|
options: options
|
|
});
|
|
|
|
function togglePropagate(btn) {
|
|
var value = btn.classList.toggle('btn-on');
|
|
chart.options.plugins.filler.propagate = value;
|
|
chart.update();
|
|
}
|
|
|
|
function toggleSmooth(btn) {
|
|
var value = btn.classList.toggle('btn-on');
|
|
chart.options.elements.line.tension = value? 0.4 : 0.000001;
|
|
chart.update();
|
|
}
|
|
|
|
function randomize() {
|
|
chart.data.datasets.forEach(function(dataset) {
|
|
dataset.data = generateData();
|
|
});
|
|
chart.update();
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|