Durchsuchbare Dokumentation aufrufen
Zurück zur Dokumentationsübersicht
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 verschiedenen 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;
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