Widget "Pareto-Diagramm" (Mit Thema versehbar)
Einführung
Das Pareto-Diagramm ist ein Diagrammtyp, der aus einer Kombination von Balkendiagrammen und einem Liniendiagramm besteht. Die einzelnen Werte werden in absteigender Reihenfolge durch Balkendiagramme dargestellt, und ein kumulativer Wert wird durch das Liniendiagramm dargestellt. Die kumulative Linie im Pareto-Diagramm wird automatisch basierend auf den Daten in den Balken berechnet.
Sehen Sie sich das folgende Video zum Erstellen eines Pareto-Diagramms in Mashup Builder an. Klicken Sie auf den Videotitel, um das Video in einem größeren Fenster anzuzeigen.
 | Dieses Widget ist als Standard-Bestandteil der Plattform und als Webkomponente verfügbar, wenn Sie aus dem SDK importieren. |
Datenformat
Sie müssen eine Infotable mit Felddefinitionen erstellen, die die Datenstruktur für das Diagramm darstellen. Die Infotable muss eine Felddefinition für die Werte der X- und Y-Achse enthalten. Sie können mehrere Datenreihen hinzufügen, indem Sie zusätzliche Spalten mit Felddefinitionen für die Werte der Datenreihe hinzufügen. Jede Infotable-Zeile stellt eine Kategorie auf der X-Achse und die entsprechenden Werte der Y-Achse dar. Die folgende Tabelle enthält das Datenformat für die Infotable:
X-Achse | Wert der Y-Achse | Wert der Y-Achse N | |
|---|---|---|---|
Felddefinition | x:{name:'x',baseType:'STRING'} | value1:{name:'value1',baseType:'NUMBER'} | value2:{name:'value2',baseType:'NUMBER'} |
Verwenden | Definiert die Werte der X-Achse für den Diagrammbalken oder die Spalte. Die Daten müssen einen STRING-Basistyp aufweisen. Jede Zeile wird als Kategorie auf der X-Achse angezeigt. Der definierte Name für diese Spalte ist die Option, die Sie für die XAaxisField-Widget-Eigenschaft auswählen sollten. | Definiert den Wert der Y-Achse und die Legendenbeschriftung für die Kategorie. | Definiert den Wert der Y-Achse und die Legendenbeschriftung für jede zusätzliche Datenreihe. |
Basistyp | STRING | NUMBER | NUMBER |
Zeilenbeispiel | x:'Apple' – Wobei Apple der Kategoriename ist, der auf der X-Achse angezeigt wird | value1:10 – Wert der Y-Achse für die Kategorie | value2:30 – Wert der Y-Achse für die zweite Datenreihe |
Die folgende Abbildung zeigt ein Beispiel für zurückgegebene Daten aus einer Infotable mit vier Felddefinitionen für die Y-Achse:
Eigenschaftstabelle
Die Eigenschaften des Widgets "Pareto-Diagramm" folgen:
Eigenschaftenname | Beschreibung | Basistyp | Standardwert | Bindung möglich? (J/N) | Lokalisierbar? (J/N) |
|---|---|---|---|---|---|
SampleSize | Gibt die Anzahl der Datenpunkte an, die im Diagramm angezeigt werden sollen. | NUMBER | N/A | N | N |
ShowZoomButtons | Zeigt Schaltflächen zum Vergrößern und Verkleinern in der Diagrammsymbolleiste an, wenn die horizontale oder vertikale Zoomfunktion aktiviert ist. | BOOLEAN | False | N | N |
EmptyChartIcon | Gibt das Symbol an, das angezeigt werden soll, wenn das Diagramm leer ist. | Media Entity | not visible | N | N |
EmptyChartLabel | Gibt den Text an, der angezeigt werden soll, wenn das Diagramm leer ist. | STRING | [[ChartStateLabelEmpty]] | N | J |
ErrorStateIcon | Gibt das Symbol an, das angezeigt werden soll, wenn das Diagramm leer ist. | Media Entity | error | N | N |
ErrorStateLabel | Gibt den Text an, der angezeigt werden soll, wenn das Diagramm leer ist. | STRING | N | J | |
LoadingIcon | Gibt das Symbol an, das angezeigt werden soll, wenn die Diagrammdaten geladen werden. | Media Entity | chart loading icon | N | N |
NoDataSourceIcon | Gibt das Symbol an, das angezeigt werden soll, wenn das Diagramm nicht an eine Datenquelle gebunden ist. | Media Entity | bind | N | N |
NoDataSourceLabel | Gibt den Text an, der angezeigt werden soll, wenn das Diagramm nicht an eine Datenquelle gebunden ist. | STRING | [[ChartStateLabelNoData]] | N | J |
CumulativeLineLabel | Gibt den Text an, der für die kumulative Linienbeschriftung im Legendenbereich angezeigt wird. | STRING | Prozentsatz | J | J |
CumulativeLineMarkerShape | Legt die Markierungsform für Datenpunkte auf der kumulativen Linie fest. Die verfügbaren Optionen sind Kreis, Viereck, Diamant oder Keine. | STRING | Kreis | J | N |
CumulativeLineMarkerSize | Legt die Markierungsgröße für Datenpunkte auf der kumulativen Linie fest. | NUMBER | 8 | J | N |
CustomClass | Benutzerdefinierte CSS-Klasse, die auf das oberste div-Element des Widgets angewendet wird. Mehrere Klassen können eingegeben werden, getrennt durch ein Leerzeichen. | STRING | N/A | J | N |
Data | Die Infotable-Datenquelle für das Diagramm. | INFOTABLE | N/A | J | N |
DataLabel1 — DataLabel24 | Diese Eigenschaften werden aufgelistet, wenn Sie NumberOfSereis auf eine spezifische Zahl festlegen. Sie können die Eigenschaften verwenden, um eine benutzerdefinierte Beschriftung für jede Datenreihe in der Legende anzugeben. Weitere Informationen finden Sie unter Diagrammlegende anpassen. | STRING | N/A | N | J |
DataSeriesStyle | Konfiguriert die Statusformatierung für alle Datenreihen im Diagramm. Sie können die Datenreihe basierend auf Datenwerten formatieren, um Trends und Muster leichter zu erkennen. Um Formatierungsregeln für jede Datenreihe zu konfigurieren, geben Sie einen bestimmten Wert für die Eigenschaft NumberOfSeries ein. | STATEDEFINITION | N/A | N | N |
EmphasizeThresholdFactors | Ermöglicht es Ihnen, Daten hervorzuheben, die unter dem angegebenen Schwellenwert liegen. | BOOLEAN | False | J | N |
ExternalPadding | Legt die Auffüllung von Achsen fest. Die Auffüllung ist ein Prozentsatz der Balkenbreite. | NUMBER | 25 | J | N |
HideCumulativeLine | Blendet die Linie aus, die den kumulativen Prozentsatz anzeigt. | BOOLEAN | False | J | N |
HideDataTooltips | Blendet Tooltips aus, die angezeigt werden, wenn der Benutzer mit der Maus auf einen Datenpunkt im Diagramm zeigt oder ihn auswählt. | BOOLEAN | False | N | N |
HideLegend | Blendet den Legendenbereich aus. | BOOLEAN | False | J | N |
HideNotes | Blendet den Notizbereich aus. | BOOLEAN | False | J | N |
HideSecondYAxis | Blendet die zweite Y-Achse aus. | BOOLEAN | False | J | N |
HideXAxis | Blendet die X-Achse aus. | BOOLEAN | False | J | N |
HideYAxis | Blendet die Y-Achse aus. | BOOLEAN | False | J | N |
HorizontalAxisMaxHeight | Legt eine maximale Höhe für die horizontale Achse fest. | NUMBER | 85 | J | N |
HorizontalAxisLabelsRotation | Legt den Rotationswinkel von Beschriftungen auf der horizontalen Achse fest. Sie können einen Wert von -180 bis 180 eingeben. | NUMBER | Automatisch anpassen | N | N |
HorizontalZoom | Ermöglicht es Ihnen, die horizontale Achse zu vergrößern. Wenn Sie diese Eigenschaft auswählen, werden die zusätzlichen Eigenschaften HorizontalRangeZoom, HorizontalSliderZoom, DirectSelectionZoom und DragSelectionZoom in der Eigenschaftsliste angezeigt. | BOOLEAN | False | J | N |
DirectSelectionZoom | Ermöglicht es Ihnen, direkt zu vergrößern, indem Sie zwei Datenelemente im Diagramm auswählen. Als Optionen sind Horizontale Achse und Keine verfügbar. | STRING | - | J | N |
DragSelectionZoom | Ermöglicht es Ihnen, einen bestimmten Teil des Diagramms zu vergrößern, indem Sie ein Auswahlrechteck um den Datenbereich zeichnen, den Sie anzeigen möchten. Als Optionen sind Horizontale Achse und Keine verfügbar. | STRING | - | J | N |
HorizontalRangeZoom | Fügt Steuerelemente hinzu, mit denen Sie einen Wertebereich angeben können, um die horizontale Achse zu vergrößern. Wenn Sie diese Eigenschaft auswählen, werden die Eigenschaften HorizontalStartZoomLabel und HorizontalEndZoomLabel in der Liste der Eigenschaften angezeigt. | BOOLEAN | False | J | N |
HorizontalStartZoomLabel | Gibt die Textbeschriftung für den Anfang der Bereichsauswahl an. | STRING | N/A | J | J |
HorizontalRangeZoomDateFormat | Legt das Datumsformat im Datumsauswahl-Feld fest, wenn ein Bereichsauswahlzoom verwendet wird. Die unterstützten Formate basieren auf der Moment.js JavaScript-Bibliothek und berücksichtigen die Groß-/Kleinschreibung. | STRING | N/A | N | N |
HorizontalRangeZoomDateWidth | Legt die Breite für das Datumsauswahl-Feld auf der horizontalen Achse fest, wenn Zoomen aktiviert ist. | NUMBER | 332px | N | N |
HorizontalEndZoomLabel | Gibt die Textbeschriftung für das Ende der Bereichsauswahl an. | STRING | N/A | J | J |
HorizontalSliderZoom | Fügt ein Schieberegler-Steuerelement hinzu, das es Ihnen ermöglicht, Daten zwischen einem Mindest- und einem Höchstwert auf der horizontalen Achse anzuzeigen. Wenn Sie diese Eigenschaft auswählen, werden die Eigenschaften HorizontalSliderZoomMinLabel und HorizontalSliderZoomMaxLabel in der Liste der Eigenschaften angezeigt. | BOOLEAN | False | J | N |
HorizontalSliderZoomMinLabel | Gibt die Textbeschriftung für den Mindestwert des Schieberegler-Steuerelements an. | STRING | N/A | J | J |
HorizontalSliderZoomMaxLabel | Gibt die Textbeschriftung für den Höchstwert der Schieberegler-Zoomsteuerung an. | STRING | N/A | J | J |
InternalPadding | Legt die Auffüllung zwischen den Serien fest. Die Auffüllung ist ein Prozentsatz der Balkenbreite. | NUMBER | 25 | J | N |
Label | Gibt die Textbeschriftung an, die für das Pareto-Diagramm angezeigt wird. | STRING | Pareto-Diagramm | J | J |
LabelAlignment | Richtet den Text für die Widget-Beschriftung aus: Links, Mitte oder Rechts. | STRING | Links | N | N |
LabelPosition | Legt die Position der Textbeschriftung fest: Oben oder Unten. | STRING | Oben | N | N |
LabelReset | Gibt die Beschriftung für die Schaltfläche an, mit der das Zoomen von Diagrammen zurückgesetzt werden kann. | STRING | Zurücksetzen | J | J |
LabelType | Legt den Beschriftungstyp für das Pareto-Diagramm fest: Kopfzeile, Unterüberschrift, Beschriftung oder Text. | STRING | Unterüberschrift | J | N |
LegendAlignment | Richtet den Legendentext aus: Oben, Mitte oder Unten. Die für diese Eigenschaft verfügbaren Optionen hängen von der Einstellung der LegendPosition-Eigenschaft ab. | STRING | Oben | N | N |
LegendFilter | Fügt einen Legendenfilter hinzu, der es Ihnen erlaubt, das Diagramm zur Laufzeit zu filtern. | BOOLEAN | False | N | N |
LegendMarkerShapes | Legt die Markierungsform für die Datenreihen-Legende fest: Viereck, Kreis oder Keine. | STRING | Viereck | N | N |
LegendMaxWidth | Legt eine maximale Breite für den Legendenbereich fest | NUMBER | 736 | J | N |
LegendPosition | Legt die Position der Diagrammlegende fest: Oben, Rechts, Unten oder Links. | STRING | Rechts | N | N |
LineValuesPosition | Legt die Position der Wertbeschriftungen relativ zu den Datenpunkten auf der Linie fest. Die verfügbaren Optionen sind Oberhalb Überlappung und Unterhalb. | STRING | Oberhalb | N | N |
MultipleDataSources | Ermöglicht es Ihnen, Daten aus mehreren Datenquellen im Diagramm zu visualisieren. Wenn Sie diese Eigenschaft auswählen, werden die zusätzlichen Eigenschaften DataSource und XAxisField in der Liste der Eigenschaften angezeigt. | BOOLEAN | False | N | N |
Notes | Gibt den Text an, der im Notizbereich im Diagramm angezeigt wird. Sie können eine Zeichenfolge eingeben oder ein Lokalisierungs-Token auswählen. | STRING | N/A | J | J |
NotesAlignment | Richtet den Text im Notizbereich aus: Links, Mitte oder Rechts. | STRING | Links | N | N |
NotesPosition | Legt die Position des Notizbereichs auf Oben oder Unten fest. | STRING | Unten | N | N |
NumberOfSeries | Legt die Anzahl der Datenreihen fest, die im Diagramm angezeigt werden. Standardmäßig zeigt die Einstellung "Automatisch" alle Datenreihen in den Infotable-Daten an. Basierend auf Ihrer Einstellung werden zusätzliche DataField-Eigenschaften für Infotables in der Liste der Eigenschaften angezeigt, die Sie zum Anzeigen der entsprechenden Zahlendatenreihe verwenden können. Außerdem werden zusätzliche DataSeriesStyle-Eigenschaften zur Statusformatierung in der Liste der Eigenschaften angezeigt. | NUMBER | Automatisch | N | N |
NumberOfYLabels | Legt die Anzahl der Beschriftungen fest, die auf der Y-Achse angezeigt werden sollen. | NUMBER | Automatisch | N | N |
ResetToDefaultValue | Setzt die Eingaben für dieses Widget auf ihre Standardwerte zurück. | N/A | N/A | J | N |
RulersInFront | Zeigt die Lineale vor den Datenwerten an. Standardmäßig werden Lineale hinter den Daten angezeigt. | BOOLEAN | False | J | N |
SecondYAxisLabel | Gibt die Textbeschriftung für die zweite Y-Achse an. | STRING | Prozentsatz | J | J |
SecondYAxisLabelAlignment | Richtet die Beschriftung der zweiten Y-Achse aus: Oben, Mitte oder Unten. | STRING | Mitte | N | N |
SecondYAxisMaximumValues | Legt den Maximalbereich für die Werte der zweiten Y-Achse fest. Standardmäßig beträgt das Maximum 100 %. | NUMBER | Automatisch | J | N |
SecondYAxisMinimumValues | Legt den Minimalbereich für die Werte der zweiten Y-Achse fest. Standardmäßig beträgt das Minimum 0 %. | NUMBER | Automatisch | J | N |
SeriesClicked | Löst ein Ereignis aus, wenn auf einen Datenpunkt im Diagramm geklickt wird. | N/A | N/A | J | N |
ShowLineValues | Zeigt die auf der Linie im Diagramm angezeigten Wertbeschriftungen an. | BOOLEAN | False | J | N |
ShowHideLegend | Fügt eine Anzeigen/Ausblenden-Schaltfläche hinzu, mit der Sie die Diagrammlegende zur Laufzeit anzeigen oder ausblenden können. | BOOLEAN | False | N | N |
ShowValues | Zeigt die Wertbeschriftungen im Diagramm an. | BOOLEAN | False | J | N |
ShowXAxisRuler | Zeigt das X-Achsen-Lineal an. | BOOLEAN | False | J | N |
ShowYAxisRuler | Zeigt das Y-Achsen-Lineal an. | BOOLEAN | False | J | N |
SparkView | Zeigt eine vereinfachte Ansicht der Diagrammvisualisierung an. Wählen Sie diese Eigenschaft aus, um die Beschriftungen, Legenden und Lineale auszublenden. | BOOLEAN | False | J | N |
ShowZoomButtons | Zeigt Schaltflächen zum Vergrößern und Verkleinern in der Diagrammsymbolleiste an, wenn die horizontale oder vertikale Zoomfunktion aktiviert ist. | BOOLEAN | False | N | N |
TabSequence | Sequenznummer des Widgets, wenn die Tabulatortaste gedrückt wird. | NUMBER | 0 | N | N |
ThresholdLine | Ermöglicht die Anzeige einer vertikalen oder horizontalen Linie, die den Schwellenwert für den kumulativen Prozentsatz markiert. Für diese Eigenschaft sind folgende Optionen verfügbar: Horizontal, Vertikal, Beide oder Keine. | STRING | Horizontal | J | N |
ThresholdValue | Legt den Prozentsatzwert für die Schwellenlinie fest. | NUMBER | 80 | J | N |
VerticalAxisMaxWidth | Legt eine maximale Breite für die vertikale Achse fest. | NUMBER | 85 | J | N |
XAxisField | Gibt die Infotable-Spalte mit den Daten für die Kategorien an, die im Diagramm angezeigt werden sollen. | INFOTABLE | N/A | N | N |
XAxisLabel | Gibt die Textbeschriftung für die X-Achse an. | STRING | X-Achse | J | J |
XAxisLabelAlignment | Richtet die Beschriftung der X-Achse aus: Links, Mitte oder Rechts. | STRING | Mitte | N | N |
YAxisFormat | Legt das Format für die Y-Achsen-Werte fest. | STRING | 0000.0 | J | N |
YAxisLabel | Gibt die Textbeschriftung für die Y-Achse an. | STRING | Y-Achse | J | J |
YAxisLabelAlignment | Richtet die Textbeschriftung der Y-Achse aus: Oben, Mitte oder Unten. | STRING | Mitte | N | N |
YAxisMaximumValues | Legt den Maximalbereich für die Y-Achsen-Werte fest. Standardmäßig wird der Bereich automatisch basierend auf den Widget-Daten berechnet. Der Wert für diese Eigenschaft wird ignoriert, wenn die Diagrammdaten einen größeren Wert enthalten. | NUMBER | Automatisch | J | N |
YAxisMinimumValues | Legt den Minimalbereich für die Y-Achsen-Werte fest. Standardmäßig wird der Bereich automatisch basierend auf den Widget-Daten berechnet. Der Wert für diese Eigenschaft wird ignoriert, wenn die Diagrammdaten einen kleineren Wert enthalten. | NUMBER | Automatisch | J | N |