Durchsuchbare Dokumentation aufrufen | Zurück zur Dokumentationsübersicht
Navigation: Dokumentationen agorum core > agorum core für Entwickler > agorum core cards > agorum core cards - Elemente
Charts erstellen mit agorum.chartjs
agorum.chartjs ermöglicht die Veranschaulichung von Daten, die Sie in agorum core verwalten, über die integrierte Open-Source-Bibliothek Chart.js. Sie können
- Daten in unterschiedlichen Arten von Charts anschaulich darstellen
- verschiedene Eigenschaften der Charts festlegen
- Metadaten für die Erstellung der Charts auswerten
- Beispiele für Chart.js als Inspiration und Grundlage für die Erstellung ihrer eigenen Charts verwenden
- Elemente in Charts (etwa Balken in Balkendiagrammen) anklickbar machen und etwa die ausgewerteten Dokumente öffnen
| Eigenschaft | Beschreibung | Mögliche Werte |
|---|---|---|
| Allgemeine Eigenschaften | siehe Allgemeine Eigenschaften für alle Elemente | – |
| chart | Enthält die Angaben für das Diagramm. Diese bestehen im Wesentlichen aus:
|
Siehe Beispiel für die Grundstruktur eines chart-Abschnitts. Sie finden weitere Informationen zu den möglichen Werten in den Beispielen. |
Beispiel für die Grundstruktur eines chart-Abschnitts:
{
type: 'bar', // chart type
data: {
labels: ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni'], // X-axis labels
datasets: [{
label: 'Beispielbeschriftung',
data: [10, 8, 12, 15, 10, 8], // Y-Achsen Werte
backgroundColor: 'rgba(75, 192, 192, 0.2)', // background color of the bars
borderColor: 'rgba(75, 192, 192, 1)', // border color of the bars
borderWidth: 1 // border width
}]
},
options: {
scales: {
y: {
beginAtZero: true // Y-axis starts at zero
}
}
}
}
Erstellen eines Charts
Die folgenden Abschnitte zeigen beginnend mit einem sehr einfachen Beispiel, wie Sie mit Charts in agorum core arbeiten können.
Erstellen eines einfachen Charts mit statischen Daten
Sie erstellen ein Chart in einem cardlet nach folgendem Muster.
Einfaches Balkendiagramm zum Musterbeispiel
let aguila = require('common/aguila');
// provide the data
let chartData = [];
let buildChartData = () => {
chartData = [65, 59, 80, 81, 56, 55, 40];
};
buildChartData();
// aguila widget where the chart cardlet will be displayed
let widget = aguila.create({
type: 'agorum.vbox',
background: 'dark',
width: 600,
height: 400,
items: [
{
name: 'cardView',
type: 'agorum.cards.view',
},
],
});
let sample = () => ({
type: 'agorum.card',
items: [
{
type: 'agorum.vertical',
spacing: 'm',
flex: 1,
minWidth: 100,
items: [
{
type: 'agorum.horizontal',
items: [
{
// type agorum.chartjs to indicate this is a chart cardlet
type: 'agorum.chartjs',
height: 200,
flex: 1,
name: 'chart',
// the chart information
chart: {
type: 'bar',
options: {
plugins: {
title: {
text: 'Auftragseingang pro Monat',
display: true,
},
legend: {
display: false,
},
},
options: {
scales: {
y: {
beginAtZero: true,
},
},
},
},
data: {
labels: ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni'],
datasets: [
{
label: '# Auftragseingänge',
data: chartData, // use the chart data from above
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(255, 159, 64, 0.2)',
'rgba(255, 205, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(153, 102, 255, 0.2)',
],
borderColor: [
'rgb(255, 99, 132)',
'rgb(255, 159, 64)',
'rgb(255, 205, 86)',
'rgb(75, 192, 192)',
'rgb(54, 162, 235)',
'rgb(153, 102, 255)',
],
borderWidth: 1,
},
],
},
},
},
],
},
],
},
],
});
// populate the chart
widget.down('cardView').replace(sample());
widget;
Neuladen des Charts durch Klicken einer Schaltfläche
In diesem Beispiel werden generierte Daten verwendet und eine Schaltfläche eingeführt, über die Anwender die Daten neu laden können. Die Zufallszahlen dienen als Beispiel für wechselnde Werte.
Neu laden des Diagramms durch Klicken der Schaltfläche
let aguila = require('common/aguila');
// provide the data, dynamic data - illustrated by random numbers in this example
let chartData = [];
let generateRandomNumber = (min, max) => {
return Math.floor(Math.random() * (max - min + 1)) + min;
};
let buildChartData = () => {
let data1 = generateRandomNumber(0, 100);
let data2 = generateRandomNumber(0, 100);
let data3 = generateRandomNumber(0, 100);
let data4 = generateRandomNumber(0, 100);
let data5 = generateRandomNumber(0, 100);
let data6 = generateRandomNumber(0, 100);
chartData = [data1, data2, data3, data4, data5, data6];
};
buildChartData();
// aguila widget where the chart cardlet will be displayed
let widget = aguila.create({
type: 'agorum.vbox',
background: 'dark',
width: 600,
height: 400,
items: [
{
// button for reloading the chart
type: 'agorum.button',
text: 'Neu laden',
name: 'redraw',
},
{
name: 'cardView',
type: 'agorum.cards.view',
},
],
});
let sample = () => ({
type: 'agorum.card',
items: [
{
type: 'agorum.vertical',
spacing: 'm',
flex: 1,
minWidth: 100,
items: [
{
type: 'agorum.horizontal',
items: [
{
// type agorum.chartjs to indicate this is a chart cardlet
type: 'agorum.chartjs',
height: 200,
flex: 1,
name: 'chart',
chart: {
type: 'bar',
options: {
plugins: {
title: {
text: 'Regenmenge in verschiedenen Jahren',
display: true,
},
legend: {
display: false,
},
},
options: {
scales: {
y: {
beginAtZero: true,
},
},
},
},
data: {
labels: ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni'],
datasets: [
{
label: 'Niederschlagsmenge in Liter',
data: chartData,
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(255, 159, 64, 0.2)',
'rgba(255, 205, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(153, 102, 255, 0.2)',
],
borderColor: [
'rgb(255, 99, 132)',
'rgb(255, 159, 64)',
'rgb(255, 205, 86)',
'rgb(75, 192, 192)',
'rgb(54, 162, 235)',
'rgb(153, 102, 255)',
],
borderWidth: 1,
},
],
},
},
},
],
},
],
},
],
});
widget.down('cardView').replace(sample());
// reload the chart when the user clicks the button
widget.down('redraw').on('clicked', () => {
buildChartData();
widget.down('cardView').replace(sample());
});
// alternatively, you can auto-rebuild the chart
/*
widget.setInterval(() => {
buildChartData();
widget.down('cardView').replace(sample());
}, 1000);
*/
widget;
Mehrere Charts anzeigen
Sie können mehrere Charts nebeneinander anordnen und verschiedene Arten von Charts verwenden.
Anzeige mehrerer Charts
let aguila = require('common/aguila');
let chartData = [];
let buildChartData = () => {
chartData = [];
for (let i = 0; i < 6; i++) {
chartData.push(parseInt(Math.random() * 100));
}
};
buildChartData();
let widget = aguila.create({
type: 'agorum.vbox',
background: 'dark',
width: 1200,
height: 800,
items: [
{
name: 'cardView',
type: 'agorum.cards.view',
},
],
});
let sample = () => ({
type: 'agorum.vertical',
items: [
{
type: 'agorum.horizontal',
wrap: true,
items: [
{
type: 'agorum.card',
minWidth: 300,
flex: 1,
items: [
{
type: 'agorum.chartjs',
height: 200,
name: 'chartBar',
chart: {
type: 'bar',
options: {
plugins: {
title: {
text: 'Bar chart',
display: true,
},
legend: {
display: true,
position: 'top',
},
},
},
data: {
labels: ['Online', 'Telefon', 'Post', 'Laden 1', 'Laden 2', 'Partner'],
datasets: [
{
label: 'Anzahl Aufträge',
data: chartData,
borderWidth: 1,
backgroundColor: [
'rgba(255, 99, 132, 0.7)',
'rgba(255, 159, 64, 0.7)',
'rgba(255, 205, 86, 0.7)',
'rgba(75, 192, 192, 0.7)',
'rgba(54, 162, 235, 0.7)',
'rgba(153, 102, 255, 0.7)',
'rgba(201, 203, 207, 0.7)',
],
borderColor: [
'rgb(255, 99, 132)',
'rgb(255, 159, 64)',
'rgb(255, 205, 86)',
'rgb(75, 192, 192)',
'rgb(54, 162, 235)',
'rgb(153, 102, 255)',
'rgb(201, 203, 207)',
],
},
],
},
},
},
],
},
{
type: 'agorum.card',
minWidth: 300,
flex: 1,
items: [
{
type: 'agorum.chartjs',
height: 200,
name: 'chartPie',
chart: {
type: 'pie',
options: {
plugins: {
title: {
text: 'Pie chart',
display: true,
},
legend: {
display: true,
position: 'top',
},
},
},
data: {
labels: ['Online', 'Telefon', 'Post', 'Laden 1', 'Laden 2', 'Partner'],
datasets: [
{
label: 'Anzahl Aufträge',
data: chartData,
borderWidth: 1,
backgroundColor: [
'rgba(255, 99, 132, 0.7)',
'rgba(255, 159, 64, 0.7)',
'rgba(255, 205, 86, 0.7)',
'rgba(75, 192, 192, 0.7)',
'rgba(54, 162, 235, 0.7)',
'rgba(153, 102, 255, 0.7)',
'rgba(201, 203, 207, 0.7)',
],
borderColor: [
'rgb(255, 99, 132)',
'rgb(255, 159, 64)',
'rgb(255, 205, 86)',
'rgb(75, 192, 192)',
'rgb(54, 162, 235)',
'rgb(153, 102, 255)',
'rgb(201, 203, 207)',
],
},
],
},
},
},
],
},
{
type: 'agorum.card',
minWidth: 300,
flex: 1,
items: [
{
type: 'agorum.chartjs',
height: 200,
flex: 1,
minWidth: 300,
name: 'chartDoughnut',
chart: {
type: 'doughnut',
options: {
plugins: {
legend: {
display: true,
position: 'bottom',
},
title: {
display: true,
text: 'Doughnut chart',
},
},
},
data: {
labels: ['Online', 'Telefon', 'Post', 'Laden 1', 'Laden 2', 'Partner'],
datasets: [
{
label: 'Anzahl Aufträge',
data: chartData,
borderWidth: 1,
backgroundColor: [
'rgba(255, 99, 132, 0.7)',
'rgba(255, 159, 64, 0.7)',
'rgba(255, 205, 86, 0.7)',
'rgba(75, 192, 192, 0.7)',
'rgba(54, 162, 235, 0.7)',
'rgba(153, 102, 255, 0.7)',
'rgba(201, 203, 207, 0.7)',
],
borderColor: [
'rgb(255, 99, 132)',
'rgb(255, 159, 64)',
'rgb(255, 205, 86)',
'rgb(75, 192, 192)',
'rgb(54, 162, 235)',
'rgb(153, 102, 255)',
'rgb(201, 203, 207)',
],
},
],
},
},
},
],
},
{
type: 'agorum.card',
minWidth: 300,
flex: 1,
items: [
{
type: 'agorum.chartjs',
height: 200,
name: 'chart',
chart: {
type: 'bar',
options: {
indexAxis: 'y',
plugins: {
title: {
text: 'Bar chart',
display: true,
},
legend: {
display: true,
},
},
},
data: {
labels: ['Online', 'Telefon', 'Post', 'Laden 1', 'Laden 2', 'Partner'],
datasets: [
{
label: 'Anzahl Aufträge',
data: chartData,
borderWidth: 1,
backgroundColor: [
'rgba(255, 99, 132, 0.7)',
'rgba(255, 159, 64, 0.7)',
'rgba(255, 205, 86, 0.7)',
'rgba(75, 192, 192, 0.7)',
'rgba(54, 162, 235, 0.7)',
'rgba(153, 102, 255, 0.7)',
'rgba(201, 203, 207, 0.7)',
],
borderColor: [
'rgb(255, 99, 132)',
'rgb(255, 159, 64)',
'rgb(255, 205, 86)',
'rgb(75, 192, 192)',
'rgb(54, 162, 235)',
'rgb(153, 102, 255)',
'rgb(201, 203, 207)',
],
},
],
},
},
},
],
},
],
},
],
});
widget.down('cardView').replace(sample());
widget.down('cardView').on('elementClicked', name => console.log('somewhere clicked:', name));
widget;
Ausgewertete Daten per Klick auf das Chart in der Suche öffnen
Sie können eine Interaktion bei Klick auf einen Teil des Diagramms, etwa einen Balken, erlauben. Wenn Sie das Diagramm auf Basis von Daten in agorum core erstellt haben, können Sie beim Klick entsprechend gefilterte Suchergebnisse aufrufen.
Das folgende Beispiel zeigt folgendes:
- Das Widget wird erstellt und eine leere Chart-Struktur eingesetzt.
- setImmediate() triggert das Laden der Daten direkt nach dem Rendern.
- Die Facettenabfrage liefert die gruppierten Daten.
- Die Daten werden formatiert und das Chart-Cardlet wird mit den Daten aktualisiert.
- Über Klicks auf Balken können Benutzer gefilterte Suchergebnisse aufrufen.
Das Beispiel setzt voraus, dass die entsprechenden Rechnungsdokumente mit den angegebenen Metadaten existieren.
let aguila = require('common/aguila');
let objects = require('common/objects');
let time = require('common/time');
// aguila widget where the chart cardlet will be displayed
let widget = aguila.create({
type: 'agorum.vbox',
background: 'dark',
width: 600,
height: 400,
items: [
{
name: 'cardView',
type: 'agorum.cards.view',
},
],
});
// draw the chart
let drawChart = () => ({
type: 'agorum.horizontal',
wrap: true,
items: [
{
type: 'agorum.vertical',
flex: 1,
minWidth: 300,
items: [invoiceChartMonthly([])],
},
],
});
// draw monthly chart for invoices
let invoiceChartMonthly = data => {
return {
type: 'agorum.chartjs.demo.invoiceCardlet',
name: 'invoiceChartMonthly',
values: data.map(d => d.value),
labels: data.map(d => d.label),
queries: data.map(d => d.query),
barTitle: 'Einnahmen in €',
title: 'Eingangsrechnungen pro Monat in Euro',
};
};
let cardView = widget.down('cardView');
cardView.replace(drawChart([]));
// load data from existing invoices
let invoiceChartMonthlySync = widget.synchronizer();
let loadInvoicesMonthly = () => {
invoiceChartMonthlySync
.fork(() => {
let facets = objects
.query('inpath:9999 allfields:agorum_accounting_document_number')
.limit(0)
.facets({
facetData: {
type: 'range',
field: 'agorum_accounting_document_date',
start: 'NOW/MONTH-120MONTH',
end: 'NOW/MONTH+1MONTH',
gap: '+1MONTH',
other: 'all',
facet: {
value: 'sum(agorum_accounting_document_total_gross_amount)',
},
},
})
.search().facets;
let data = facets.facetData.buckets.map(bucket => ({
label: time.now().parse(bucket.val).setPattern('MM/yyyy').toString(),
value: bucket.value,
query:
'inpath:9999 allfields:agorum_accounting_document_number agorum_accounting_document_date_date_range:"' +
time.now().parse(bucket.val).setPattern('yyyy-MM').toString() +
'"',
}));
return data;
})
.then(data => {
cardView.replace('invoiceChartMonthly', invoiceChartMonthly(data));
});
};
setImmediate(() => {
loadInvoicesMonthly();
});
widget;
Chart Demo als Grundlage verwenden
Sie können das zip-Paket undefined>agorum.chartjs.demo-1.0.0 verwenden, um die Chart-Funktionalität kennenzulernen. Außerdem können Sie es als Grundlage für eigene Entwicklungen einsetzen.
Gehen Sie wie folgt vor, um das zip-Paket zu installieren und die Chart-Beispiele auszuführen:
- Kopieren Sie das zip-Paket in die agorum core-Umgebung, in der Sie die Chart-Demo verwenden möchten.
- Markieren Sie das zip-Paket und wählen Sie im Kontextmenü agorum core template manager > Projekt installieren (mit gewählter zip-Datei)
- Bestätigen Sie die Installation mit OK.
Ergebnis: Sie finden das Demo-Projekt unter Administration/customers/agorum.chartjs.demo.
- Für die Verwendung der Demo ist ein Vorbereitungsschritt erforderlich. Wechseln Sie dazu in das Unterverzeichnis js des Demo-Projekts, öffnen Sie die Datei prepare-demo.js und klicken Sie Run.
Ergebnis: Das Vorbereitungsskript hat die PDF-Beispieldateien, die für die Demo verwendet werden, im Verzeichnis Dateien/agorum.chartjs.demo erstellt. - Sie sind jetzt bereit, die Demo-Beispiele zu benutzen. Sie finden die Beispiele im Ordner Administration/customers/agorum.chartjs.demo/js/aguila. Öffnen Sie das jeweilige Beispiel und klicken Sie Run, um das Beispiel auszuführen:
Beispiel Beschreibung test-chart-js.js Dieses Beispiel zeigt, wie Sie verschiedene Arten von Charts erstellen können. Außerdem enthält es einen Redraw-Button, mit dem Sie die Daten in den Charts aktualisieren können. tst-chart-2.js Dieses Beispiel enthält, verglichen mit test-chart-js.js, weitere Chart-Beispiele und zeigt außerdem, wie Sie ein selbst entwickeltes Chart-cardlet verwenden können. Das verwendete chart-Cardlet chart-demo-cardlet.js finden Sie im Verzeichnis js/cardlets. invoice-chart.js Das Rechnungsbeispiel enthält ein vollständiges Anwendungsbeispiel auf Basis der Rechnungs-PDF-Dateien, die Sie mit dem Vorbereitungsskript erstellt haben. Die Charts werden durch Verwendung eines eigenen Invoice-cardlets erstellt (invoice-cardlet.js).
Die ausgewerteten Daten stammen aus den Metadaten der PDF-Dateien, die mithilfe der Faceting-Funktion der agorum core-Suche ausgewertet werden. Die entsprechenden Beispiele finden Sie unter den Kommentaren load data from existing invoices und load yearly data for invoices in der Datei aguila/invoice-chart.js.
Das Invoice-cardlet zeigt außerdem, wie Sie Anwendern ermöglichen können, die jeweils in der Chart-Darstellung berücksichtigten Dateien durch Anklicken des Charts in der Suche zu öffnen. Den entsprechenden Aufruf von
acicWidget.popup({})für das Event onClicked finden Sie im invoice-cardlet.js.Rechungsbeispiel mit Möglichkeit zur Anzeige der ausgewerteten Dokumente
Charts als Widget darstellen
Sie können Charts als Widget registrieren und etwa als Suchergebnis darstellen. Gehen Sie dazu wie folgt vor:
- Registrieren Sie das gewünschte Chart-Skript als Widget, indem Sie das JS markieren und im Kontextmenü agorum core template manager > Registrieren > aguila widget auswählen.
- Kopieren Sie sich den Namen des registrierten Widgets.
- Passen Sie das Suchergebnis über den results-Parameter an und verwenden Sie das neu registrierte Widget als Ergebnistyp wie in folgendem Testbeispiel:
let aguila = require('common/aguila'); let filterSearchWidget = aguila.create({ type: 'agorum.composite.search.filterResultDetails', width: 1400, height: 800, // filter: [ ... ], // filterSelection: { ... }, // settings: [ ... ], baseQuery: '*', query: 'test', detailsWidget: { type: 'agorum.composite.details', width: 600, }, results: { type: 'agorum.chartjs.demo.invoiceChart', }, }); filterSearchWidget;Chart in der Suchergebnisliste