Chart.js - Snippets: Unterschied zwischen den Versionen
Aus Wikizone
(Die Seite wurde neu angelegt: „== Daten manipulieren == <syntaxhighlight lang="javascript"> </syntaxhighlight>“) |
|||
| (2 dazwischenliegende Versionen von einem anderen Benutzer werden nicht angezeigt) | |||
| Zeile 1: | Zeile 1: | ||
| + | == Links == | ||
| + | [[Chart.js]] | ||
== Daten manipulieren == | == Daten manipulieren == | ||
<syntaxhighlight lang="javascript"> | <syntaxhighlight lang="javascript"> | ||
| + | // Datensatz entfernen | ||
| + | chart.data.datasets.pop(); | ||
| + | chart.update(); | ||
| + | |||
| + | // Daten von allen Datensätzen hinten entfernen | ||
| + | chart.data.datasets.forEach(dataset => { | ||
| + | dataset.data.pop(); | ||
| + | }); | ||
| + | |||
| + | // Datensatz hinzufügen | ||
| + | const data = chart.data; | ||
| + | const dsColor = Utils.namedColor(chart.data.datasets.length); | ||
| + | const newDataset = { | ||
| + | label: 'Dataset ' + (data.datasets.length + 1), | ||
| + | backgroundColor: Utils.transparentize(dsColor, 0.5), | ||
| + | borderColor: dsColor, | ||
| + | data: Utils.numbers({count: data.labels.length, min: -100, max: 100}), | ||
| + | }; | ||
| + | chart.data.datasets.push(newDataset); | ||
| + | chart.update(); | ||
| + | |||
| + | |||
| + | // Setze hidden attribut (jquery) | ||
| + | $("#toggle").click(function() { | ||
| + | chartInstance.data.datasets.forEach(function(ds) { | ||
| + | ds.hidden = !ds.hidden; | ||
| + | }); | ||
| + | chartInstance.update(); | ||
| + | |||
</syntaxhighlight> | </syntaxhighlight> | ||
Aktuelle Version vom 26. Juni 2023, 16:52 Uhr
Links[Bearbeiten]
Daten manipulieren[Bearbeiten]
// Datensatz entfernen
chart.data.datasets.pop();
chart.update();
// Daten von allen Datensätzen hinten entfernen
chart.data.datasets.forEach(dataset => {
dataset.data.pop();
});
// Datensatz hinzufügen
const data = chart.data;
const dsColor = Utils.namedColor(chart.data.datasets.length);
const newDataset = {
label: 'Dataset ' + (data.datasets.length + 1),
backgroundColor: Utils.transparentize(dsColor, 0.5),
borderColor: dsColor,
data: Utils.numbers({count: data.labels.length, min: -100, max: 100}),
};
chart.data.datasets.push(newDataset);
chart.update();
// Setze hidden attribut (jquery)
$("#toggle").click(function() {
chartInstance.data.datasets.forEach(function(ds) {
ds.hidden = !ds.hidden;
});
chartInstance.update();
