Die vorliegende Übersetzung wurde maschinell erstellt. Im Falle eines Konflikts oder eines Widerspruchs zwischen dieser übersetzten Fassung und der englischen Fassung (einschließlich infolge von Verzögerungen bei der Übersetzung) ist die englische Fassung maßgeblich. # Verwendung von Highcharts Verwenden Sie Highcharts-Grafiken, um benutzerdefinierte Diagrammtypen und Grafiken zu erstellen, die die [Highcharts Core-Bibliothek](https://www.highcharts.com/blog/products/highcharts/) verwenden. [Highcharts-Grafiken bieten Quick-Autoren direkten Zugriff auf die Highcharts-API.](https://api.highcharts.com/highcharts/) Um ein Highcharts-Visual zu konfigurieren, müssen Quick-Autoren dem Visual in Quick ein Highcharts-JSON-Schema hinzufügen. Autoren können Quick-Ausdrücke verwenden, um auf Quick-Felder und Formatierungsoptionen im JSON-Schema zu verweisen, das sie zum Generieren der Highcharts-Grafik verwenden. Der JSON-**Chart-Code**-Editor bietet kontextuelle Unterstützung für die automatische Vervollständigung und Echtzeitvalidierung, um sicherzustellen, dass die JSON-Eingabeschemas ordnungsgemäß konfiguriert sind. Aus Sicherheitsgründen akzeptiert der visuelle Editor von Highcharts keine CSS- oder HTML-Codeeingaben. JavaScript Weitere Informationen zu Highcharts-Visuals in Amazon Quick finden Sie im [Highcharts Visual QuickStart ](https://democentral.learnquicksight.online/#Dashboard-FeatureDemo-Highcharts-Visual) Guide unter. [DemoCentral](https://democentral.learnquicksight.online/#) Die folgende Abbildung zeigt ein Lippenstift-Diagramm, das im **Chartcode-JSON-Editor eines Highcharts-Visuals** in Quick konfiguriert ist. ![\[alt text not found\]](http://docs.aws.amazon.com/de_de/quick/latest/userguide/images/highcharts-example1.png) [Weitere Beispiele für Grafiken, die Sie mit der Highcharts-Grafik in Quick erstellen können, finden Sie unter Highcharts-Demos.](https://www.highcharts.com/demo) ## Überlegungen Bevor Sie mit der Erstellung von Highcharts-Grafiken in Amazon Quick beginnen, sollten Sie sich mit den folgenden Einschränkungen vertraut machen, die für Highcharts-Grafiken gelten. + Die folgenden JSON-Werte werden im Highcharts-**Chart-Code**-JSON-Editor nicht unterstützt: + Funktionen + Datumsangaben + Nicht definierte Werte + Links zu GeoJSON-Dateien oder anderen Bildern werden für Highcharts-Visualisierungen nicht unterstützt. + Feldfarben sind für Highcharts-Visualisierungen nicht verfügbar. Standardthemenfarben werden auf alle Highcharts-Visualisierungen angewendet. ## Erstellen einer Highcharts-Visualisierung Gehen Sie wie folgt vor, um ein Highcharts-Bild in Amazon Quick zu erstellen. 1. Öffnen Sie die [Quick-Konsole](https://quicksight.aws.amazon.com/). 1. Öffnen Sie die Schnellanalyse, zu der Sie ein Highcharts-Bild hinzufügen möchten. 1. Klicken Sie in der Anwendungsleiste auf **Add** (Hinzufügen) und anschließend auf **Add visual** (Visualisierung hinzufügen). 1. Klicken Sie im Bereich **Visualisierungstypen** auf das Symbol für Highcharts-Visualisierungen. Auf dem Analyseblatt wird ein leeres Bild angezeigt, und der Bereich **Eigenschaften** wird auf der linken Seite geöffnet. 1. Erweitern Sie im Bereich **Eigenschaften** den Abschnitt **Anzeigeeinstellungen** und führen Sie die folgenden Aktionen aus: 1. Wählen Sie unter **Titel bearbeiten** das Pinselsymbol aus, geben Sie den Titel ein, den das Bild haben soll, und wählen Sie dann **SPEICHERN**. Wählen Sie alternativ das Augensymbol, um den Titel auszublenden. 1. (Optional) Wählen Sie unter **Untertitel bearbeiten** das Pinselsymbol aus, geben Sie den Untertitel ein, den das Bild haben soll, und wählen Sie dann **SPEICHERN**. Wählen Sie alternativ das Augapfelsymbol, um den Titel auszublenden. 1. (Optional) Fügen Sie für **Alt-Text** den Alt-Text hinzu, den die Visualisierung haben soll. 1. Erweitern Sie den Abschnitt **Datenpunktlimit**. Geben Sie für **Anzahl der anzuzeigenden Datenpunkte** die Anzahl der Datenpunkte ein, die die Visualisierung anzeigen soll. Highcharts-Visualisierungen können bis zu 10.000 Datenpunkte anzeigen. 1. Erweitern Sie den Abschnitt **Chart-Code**. 1. Geben Sie ein JSON-Schema in den **Chartcode**-JSON-Editor ein. Der Editor bietet kontextbezogene Unterstützung und Echtzeitvalidierung, um sicherzustellen, dass Ihre JSON-Eingabe korrekt konfiguriert ist. Alle Fehler, die Quick identifiziert, können in der Dropdownliste „**Fehler**“ angezeigt werden. Das folgende Beispiel zeigt ein JSON-Schema, das ein Lippenstiftdiagramm erstellt, in dem die Umsätze des aktuellen Jahres nach Branchen anzeigt werden. ``` { "xAxis": { "categories": ["getColumn", 0] }, "yAxis": { "min": 0, "title": { "text": "Amount ($)" } }, "tooltip": { "headerFormat": "{point.key}", "pointFormat": "", "footerFormat": "
{series.name}: ${point.y:,.0f}
", "shared": true, "useHTML": true }, "plotOptions": { "column": { "borderWidth": 0, "grouping": false, "shadow": false } }, "series": [ { "type": "column", "name": "Current Year Sales", "color": "rgba(124,181,236,1)", "data": ["getColumn", 1], "pointPadding": 0.3, "pointPlacement": 0.0 } ] } ``` 1. Wählen Sie **CODE ANWENDEN**. Quick konvertiert das JSON-Schema in eine visuelle Darstellung, die in der Analyse erscheint. Um Änderungen an der gerenderten Grafik vorzunehmen, aktualisieren Sie die entsprechenden Eigenschaften im JSON-Schema und wählen Sie **CODE ANWENDEN**. 1. (Optional) Öffnen Sie das Dropdown-Menü **Referenz**, um auf Links zu hilfreichem Highcharts-Referenzmaterial zuzugreifen. Wenn Sie mit der gerenderten Visualisierung zufrieden sind, schließen Sie den Bereich „Eigenschaften“. Weitere Informationen zu Quick Sight-spezifischen Ausdrücken, die zur Konfiguration eines Highcharts-Visuals verwendet werden können, finden Sie unter[Amazon Quick JSON-Ausdruckssprache für Highcharts-Grafiken](highchart-expressions.md). ## Interaktive Highchart-Features Highchart-Visualisierungen in Amazon Quick Sight unterstützen benutzerdefinierte Aktionen, Hervorhebungen und benutzerdefinierte Farbkonsistenzen für Felder, sodass Sie interaktive und visuell zusammenhängende Diagramme erstellen können, die sich nahtlos in andere Quick Sight-Grafiken integrieren lassen. ### Benutzerdefinierte Aktionen Mit benutzerdefinierten Aktionen können Sie spezifische Verhaltensweisen für jeden Datenpunkt in Ihren Highchart-Visualisierungen definieren. Diese Funktion lässt sich nahtlos in das bestehende Aktionsframework von Quick Sight integrieren, sodass Sie interaktive Diagramme erstellen können, die auf Benutzerklicks reagieren. Das System unterstützt derzeit die Auswahl einzelner Datenpunkte, sodass Sie die Benutzerinteraktionen präzise steuern können. Benutzerdefinierte Aktionen können für verschiedene Diagrammtypen implementiert werden, darunter Liniendiagramme, Balkendiagramme und gestapelte Balkendiagramme. Um benutzerdefinierte Aktionen zu implementieren, müssen Sie Ihre Highcharts-JSON-Konfiguration ändern. Fügen Sie Ihrer Serienkonfiguration einen Ereignisblock hinzu, indem Sie das Klickereignis und die entsprechende Aktion angeben. Beispiel: ``` { "series": [{ "type": "line", "data": ["getColumn", 1], "name": "value", "events": { "click": [ "triggerClick", { "rowIndex": "point.index" } ] } }] ``` Diese Konfiguration ermöglicht Klickereignisse auf die Datenpunkte Ihres Diagramms, sodass Quick Sight benutzerdefinierte Aktionen auf der Grundlage der ausgewählten Daten ausführen kann. ### Visualisierungsübergreifende Hervorhebung Visualisierungsübergreifende Hervorhebungen verbessern die Interaktivität Ihrer Dashboards, indem visuelle Verbindungen zwischen verschiedenen Diagrammen hergestellt werden. Wenn ein Benutzer Elemente in einem Diagramm auswählt, werden verwandte Elemente in anderen Visualisierungen automatisch hervorgehoben, während Elemente, die nichts miteinander zu tun haben, verdunkelt werden. Mit diesem Feature können Benutzer Beziehungen und Muster in mehreren Visualisierungen schnell erkennen und so das Datenverständnis und die Datenanalyse verbessern. Verwenden Sie die `quicksight`-Klausel in Ihrer Highcharts-JSON-Konfiguration, um die visuelle Hervorhebung zu ermöglichen und die Konsistenz der Feldfarben aufrechtzuerhalten. Diese Klausel dient als Brücke zwischen dem Rendern von Highcharts und dem visuellen Interaktionssystem von Quick. Hier sehen Sie ein Beispiel für die Einrichtung: ``` { "quicksight": { "pointRender": ["updatePointAttributes", { "opacity": ["case", ["dataMarkMatch", ["getColumnName", 0], "series.name"], 1, // Full opacity for matching elements 0.1 // Dim non-matching elements ], "color": ["getColumnColorOverrides", ["getColumnName", 0], "series.name"] }] } } ``` Diese Konfiguration verwendet die JSON-Ausdruckssprache von Quick Sight, um visuelle Eigenschaften wie Opazität und Farbe auf der Grundlage von Benutzerinteraktionen und vordefinierten Farbschemata dynamisch zu ändern. Für komplexere Szenarien können Sie die Hervorhebung auf der Grundlage mehrerer Bedingungen einrichten. Dies ermöglicht eine differenziertere Interaktivität in Ihren Visualisierungen. Im folgenden Beispiel werden Elemente hervorgehoben, die entweder auf dem Quartal oder dem Wochentag basieren: ``` { "quicksight": { "pointRender": ["updatePointAttributes", { "opacity": ["case", ["||", ["dataMarkMatch", "quarter", "series.name"], ["dataMarkMatch", "day_of_week", "point.name"] ], 1, // Full opacity for matching elements 0.1 // Dim non-matching elements ], }] } } ``` ### Farbkonsistenz auf Feldebene Die Aufrechterhaltung der visuellen Kohärenz in Ihrem gesamten Dashboard ist für eine effektive Dateninterpretation von entscheidender Bedeutung. Das Feature zur Farbkonsistenz auf Feldebene stellt sicher, dass Farben, die bestimmten Dimensionen zugewiesen sind, für alle visuellen Elemente in Ihrem Dashboard beibehalten werden. Diese Konsistenz hilft Benutzern dabei, bestimmte Datenkategorien in verschiedenen Diagrammtypen und Ansichten schnell zu erkennen und nachzuverfolgen, was die allgemeine Benutzererfahrung und das Datenverständnis verbessert. # Amazon Quick JSON-Ausdruckssprache für Highcharts-Grafiken Highcharts-Visualisierungen akzeptieren die meisten [gültigen JSON-Werte](https://www.w3schools.com/js/js_json_datatypes.asp), arithmetische Standardoperatoren, Zeichenkettenoperatoren und bedingte Operatoren. Die folgenden JSON-Werte werden für Highcharts-Visualisierungen nicht unterstützt: + Funktionen + Datumsangaben + Nicht definierte Werte Schnellautoren können die JSON-Ausdruckssprache verwenden, um JSON-Schemas für eine Highcharts-Grafik zu erstellen. Die JSON-Ausdruckssprache wird verwendet, um JSON an APIs oder Datensätze zu binden, um eine dynamische Population und Änderung von JSON-Strukturen zu ermöglichen. Entwickler können auch die JSON-Ausdruckssprache verwenden, um JSON-Daten mit präzisen und intuitiven Ausdrücken zu erweitern und zu transformieren. In der JSON-Ausdruckssprache werden Ausdrücke als Arrays dargestellt, wobei das erste Element die Operation spezifiziert und die nachfolgenden Elemente die Argumente sind. `unique` wendet beispielsweise die Operation `["unique", [1, 2, 2]]` auf das Array `[1, 2, 2]` an, was zu `[1, 2]` führt. Diese Array-basierte Syntax ermöglicht flexible Ausdrücke, die komplexe Transformationen von JSON-Daten ermöglichen. Die JSON-Ausdruckssprache unterstützt *verschachtelte Ausdrücke*. Verschachtelte Ausdrücke sind Ausdrücke, die andere Ausdrücke als Argumente enthalten. `["split", ["toUpper", "hello world"], " "]` konvertiert beispielsweise die Zeichenfolge `hello world` zuerst in Großbuchstaben und teilt sie dann in ein Array von Wörtern auf, was zu `["HELLO", "WORLD"]` führt. In den folgenden Abschnitten erfahren Sie mehr über die JSON-Ausdruckssprache für Highcharts-Grafiken in Amazon Quick. **Topics** + [Arithmetisch](jle-arithmetics.md) + [Array-Operationen](jle-arrays.md) + [Amazon Quick Expressions](jle-qs-expressions.md) # Arithmetisch Die folgende Tabelle zeigt arithmetische Ausdrücke, die mit der JSON-Ausdruckssprache verwendet werden können. | Operation | Expression | Input | Ausgabe | | --- | --- | --- | --- | | Addition | ["\$1", operand1, operand2] | \$1 sum: ["\$1", 2, 4] \$1 | \$1 sum: 6 \$1 | | Subtraktion | ["-", operand1, operand2] | \$1 difference: ["-", 10, 3] \$1 | \$1 difference: 7 \$1 | | Multiplikation | ["\$1", operand1, operand2] | \$1 product: ["\$1", 5, 6] \$1 | \$1 product: 30 \$1 | | Division | ["/", operand1, operand2] | \$1 quotient: ["/", 20, 4] \$1 | \$1 quotient: 5 \$1 | | Modulo | ["%", operand1, operand2] | \$1 remainder: ["%", 15, 4] \$1 | \$1 remainder: 3 \$1 | | Potenzierung | ["\$1\$1", base, exponent] | \$1 power: ["\$1\$1", 2, 3] \$1 | \$1 power: 8 \$1 | | Absoluter Wert | ["abs", operand] | \$1 absolute: ["abs", -5] \$1 | \$1 absolute: 5 \$1 | | Square Root (Quadratwurzel) | ["sqrt", operand] | \$1 sqroot: ["sqrt", 16] \$1 | \$1 sqroot: 4 \$1 | | Logarithmus (Basis 10) | ["log10", operand] | \$1 log: ["log10", 100] \$1 | \$1 log: 2 \$1 | | Natürlicher Logarithmus | ["ln", operand] | \$1 ln: ["ln", Math.E] \$1 | \$1 ln: 1 \$1 | | Runden | ["round", operand] | \$1 rounded: ["round", 3.7] \$1 | \$1 rounded: 4 \$1 | | Floor | ["floor", operand] | \$1 floor: ["floor", 3.7] \$1 | \$1 floor: 3 \$1 | | Ceiling | ["ceil", operand] | \$1 ceiling: ["ceil", 3.2] \$1 | \$1 ceiling: 4 \$1 | | Sinus | ["sin", operand] | \$1 sine: ["sin", 0] \$1 | \$1 sine: 0 \$1 | | Kosinus | ["cos", operand] | \$1 cosine: ["cos", 0] \$1 | \$1 cosine: 1 \$1 | | Tangente | ["tan", operand] | \$1 tangent: ["tan", Math.PI] \$1 | \$1 tangent: 0 \$1 | # Array-Operationen Die JSON-Ausdruckssprache ermöglicht die generische Array-Manipulation für die folgenden Funktionen: + `map` – Wendet eine Zuordnungsfunktion auf jedes Element eines Arrays an und gibt ein neues Array mit den transformierten Werten zurück. `["map", [1, 2, 3], ["*", ["item"], 2]]` ordnet beispielsweise jedes Element des Arrays `[1, 2, 3]` zu, indem es mit 2 multipliziert wird. + `filter` – Filtert ein Array auf der Grundlage einer bestimmten Bedingung und gibt ein neues Array zurück, das nur die Elemente enthält, die die Bedingung erfüllen. `["filter", [1, 2, 3, 4, 5], ["==", ["%", ["item"], 2], 0]]` filtert beispielsweise das Array `[1, 2, 3, 4, 5]` so, dass es nur gerade Zahlen enthält. + `reduce` – Reduziert ein Array auf einen einzelnen Wert, indem auf jedes Element eine Reduktionsfunktion angewendet und das Ergebnis akkumuliert wird. `["reduce", [1, 2, 3, 4, 5], ["+", ["acc"], ["item"]], 0]` reduziert beispielsweise das Array `[1, 2, 3, 4, 5]` auf die Summe seiner Elemente. + `get` – Ruft einen Wert aus einem Objekt oder einem Array ab, indem ein Schlüssel oder Index angegeben wird. `["get", ["item"], "name"]` ruft beispielsweise den Wert der Eigenschaft `"name"` aus dem aktuellen Element ab. + `unique` – Bei einem gegebenen Array werden nur eindeutige Elemente innerhalb dieses Arrays zurückgegeben. Beispielsweise gibt `["unique", [1, 2, 2]]` `[1, 2]` zurück. # Amazon Quick Expressions Amazon Quick bietet zusätzliche Ausdrücke, um die Funktionalität von Highcharts-Visuals zu erweitern. In den folgenden Abschnitten erfahren Sie mehr über häufig verwendete Quick-Ausdrücke für Highcharts-Grafiken. Weitere Informationen zur JSON-Ausdruckssprache in Amazon Quick finden Sie im [[DemoCentral](https://democentral.learnquicksight.online/#)Highcharts Visual QuickStart Guide](https://democentral.learnquicksight.online/#Dashboard-FeatureDemo-Highcharts-Visual) unter. **Topics** + [`getColumn`](#highcharts-expressions-getcolumn) + [`formatValue`](#highcharts-expressions-formatvalue) ## `getColumn` Verwenden Sie die `getColumn`-Ausdrücke, um Werte aus angegebenen Spaltenindizes zurückzugeben. Die folgende Tabelle zeigt beispielsweise eine Liste von Produkten zusammen mit ihrer Kategorie und ihrem Preis. | Product Name (Produktname) | Kategorie | Preis | | --- | --- | --- | | Produkt A | Technologie | 100 | | Produkt B | Einzelhandel | 50 | | Produkt C | Einzelhandel | 75 | Die folgende `getColumn`-Abfrage generiert ein Array, das alle Produktnamen zusammen mit ihrem Preis anzeigt. ``` { product name: ["getColumn", 0], price: ["getColumn", 2] } ``` Der folgende JSON-Code wird zurückgegeben: ``` { product name: ["Product A", "Product B", "Product C"], price: [100, 50, 75] } ``` Sie können auch mehrere Spalten gleichzeitig übergeben, um ein Array von Arrays zu erstellen, wie im folgenden Beispiel gezeigt. **Eingabe** ``` { values: ["getColumn", 0, 2] } ``` **Ausgabe** ``` { values: [["Product A", 100], ["Product B", 50], ["Product C", 75]] } ``` Ähnlich wie `getColumn` können die folgenden Ausdrücke verwendet werden, um Spaltenwerte aus Feldfeldern oder Themen zurückzugeben: + `getColumnFromGroupBy` gibt Spalten aus der Gruppe nach Feldern zurück. Das zweite Argument ist der Index der Spalte, die zurückgegeben werden soll. `["getColumnFromGroupBy", 0]` gibt beispielsweise Werte des ersten Felds als Array zurück. Sie können mehrere Indizes übergeben, um ein Array von Arrays zu erhalten, in dem jedes Element dem Feld in der Gruppe nach Feldern entspricht. + `getColumnFromValue` gibt Spalten aus dem Wertefeld zurück. Sie können mehrere Indizes übergeben, um ein Array von Arrays zu erhalten, in dem jedes Element dem Feld im Wertefeld entspricht. + `getColorTheme`gibt die aktuelle Farbpalette eines Quick-Themas zurück, wie im folgenden Beispiel gezeigt. ``` { "color": ["getColorTheme"] } ``` ``` { "color": ["getPaletteColor", "secondaryBackground"] } ``` **Beispiel** ![\[alt text not found\]](http://docs.aws.amazon.com/de_de/quick/latest/userguide/images/get-column-example.png) `getColumn` kann auf jede Spalte in der Tabelle zugreifen: + `["getColumn", 0]` – gibt ein Array `[1, 2, 3, 4, 5, ...]` zurück + `["getColumn", 1]` – gibt ein Array `[1, 1, 1, 1, 1, ...]` zurück + `["getColumn", 2]` – gibt ein Array `[1674, 7425, 4371, ...]` zurück `getColumnFromGroupBy` funktioniert ähnlich, aber sein Index ist auf die Spalten in der Gruppe nach Feldern beschränkt: + `["getColumnFromGroupBy", 0]` – gibt ein Array `[1, 2, 3, 4, 5, ...]` zurück + `["getColumnFromGroupBy", 1]` – gibt ein Array `[1, 1, 1, 1, 1, ...]` zurück + `["getColumnFromGroupBy", 2]` – funktioniert nicht, da es in der Gruppe nach Feldern nur zwei Spalten gibt `getColumnFromValue` funktioniert ähnlich, aber sein Index ist auf die Spalten im Wertefeld beschränkt: + `["getColumnFromValue", 0]` – gibt ein Array `[1, 2, 3, 4, 5, ...]` zurück + `["getColumnFromValue", 1]` – funktioniert nicht, da es im Wertefeld nur eine Spalte gibt + `["getColumnFromValue", 2]` – funktioniert nicht, da es im Wertefeld nur eine Spalte gibt ## `formatValue` Verwenden Sie den `formatValue` Ausdruck, um die Schnellformatierung auf Ihre Werte anzuwenden. Der folgende Ausdruck formatiert beispielsweise die X-Achsenbeschriftung mit dem Formatwert, der im ersten Feld von Quick Field Wells angegeben ist. ``` "xAxis": { "categories": ["getColumn", 0], "labels": { "formatter": ["formatValue", "value", 0] } } ```