> For the complete documentation index, see [llms.txt](https://docs.devolutions.net/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.devolutions.net/powershell-universal/de/powershell-befehle/new-udchartjs.md). # New-UDChartJS New-UDChartJS rendert ein interaktives ChartJS-Diagramm in PowerShell Universal und unterstützt Datasets, Klick-Ereignisse und dynamisch geladene Daten. ### Übersicht Erstellt ein neues ChartJS-Diagramm. ### Syntax ```powershell New-UDChartJS [-Id ] [-Type ] [-Options ] [-OnClick ] [-LoadData ] [-LabelProperty ] [] New-UDChartJS [-Id ] [-DatasetLabel ] [-Type ] [-Options ] [-OnClick ] -Data [-DataProperty ] [-LabelProperty ] [-BackgroundColor ] [-BorderColor ] [-HoverBackgroundColor ] [-HoverBorderColor ] [-BorderWidth ] [] New-UDChartJS [-Id ] [-Type ] [-Options ] [-OnClick ] -Data -Dataset [-LabelProperty ] [] ``` ### Beschreibung Erstellt ein neues ChartJS-Diagramm. ### Parameter #### -Id Die ID der Komponente. Standardmäßig ist dies eine zufällige GUID. ``` Required? false Position? named Default value [Guid]::NewGuid() Accept pipeline input? false Aliases Accept wildcard characters? false ``` #### -DatasetLabel Die Bezeichnung für das Dataset. Diese wird nur verwendet, wenn das Diagramm ein einzelnes Dataset hat. ``` Required? false Position? named Default value Accept pipeline input? false Aliases Accept wildcard characters? false ``` #### -Type Der Typ des zu erstellenden Diagramms. Gültige Werte sind bar, line, area, doughnut, radar, pie und bubble. ``` Required? false Position? named Default value bar Accept pipeline input? false Aliases Accept wildcard characters? false ``` #### -Options Eine Hashtable mit Optionen, die an das Diagramm übergeben werden. ``` Required? false Position? named Default value Accept pipeline input? false Aliases Accept wildcard characters? false ``` #### -OnClick Ein Skriptblock, der ausgeführt wird, wenn auf das Diagramm geklickt wird. `$EventData` enthält das Element, auf das geklickt wurde. ``` Required? false Position? named Default value Accept pipeline input? false Aliases Accept wildcard characters? false ``` #### -Data Die für das Diagramm zu verwendenden Daten. Dies ist ein Array von Objekten oder Hashtables. ``` Required? true Position? named Default value Accept pipeline input? false Aliases Accept wildcard characters? false ``` #### -LoadData ``` Required? false Position? named Default value { $Data = @( @{ Server = "Server1"; AvailableRam = 128; UsedRAM = 10 } @{ Server = "Server2"; AvailableRam = 64; UsedRAM = 63 } @{ Server = "Server3"; AvailableRam = 48; UsedRAM = 40 } @{ Server = "Server4"; AvailableRam = 64; ; UsedRAM = 26 } @{ Server = "Server5"; AvailableRam = 128; UsedRAM = 120 } ) New-UDChartJSDataset -Data ($Data | Select-Object -Expand AvailableRam) -DataProperty AvailableRam -Label 'Available RAM' -BackgroundColor '#126f8c' -BorderWidth 1 } Accept pipeline input? false Aliases Accept wildcard characters? false ``` #### -Dataset \ Wird beim Definieren mehrerer Datasets verwendet. Dies ist ein Array von Hashtables. Verwenden Sie das Cmdlet `New-UDChartJSDataset`, um das Dataset zu erstellen. ``` Required? true Position? named Default value Accept pipeline input? false Aliases Accept wildcard characters? false ``` #### -DataProperty Die für die Daten zu verwendende Eigenschaft. Diese wird nur verwendet, wenn das Diagramm ein einzelnes Dataset hat. ``` Required? false Position? named Default value Accept pipeline input? false Aliases Accept wildcard characters? false ``` #### -LabelProperty Die für die Bezeichnung zu verwendende Eigenschaft. Diese wird nur verwendet, wenn das Diagramm ein einzelnes Dataset hat. ``` Required? false Position? named Default value Accept pipeline input? false Aliases Accept wildcard characters? false ``` #### -BackgroundColor \ Die Hintergrundfarbe des Diagramms. Diese wird nur verwendet, wenn das Diagramm ein einzelnes Dataset hat. ``` Required? false Position? named Default value @("#808978FF") Accept pipeline input? false Aliases Accept wildcard characters? false ``` #### -BorderColor \ Die Rahmenfarbe des Diagramms. Diese wird nur verwendet, wenn das Diagramm ein einzelnes Dataset hat. ``` Required? false Position? named Default value @("#FF8978FF") Accept pipeline input? false Aliases Accept wildcard characters? false ``` #### -HoverBackgroundColor \ Die Hintergrundfarbe des Diagramms beim Hover. Diese wird nur verwendet, wenn das Diagramm ein einzelnes Dataset hat. ``` Required? false Position? named Default value @("#807B210C") Accept pipeline input? false Aliases Accept wildcard characters? false ``` #### -HoverBorderColor \ Die Rahmenfarbe des Diagramms beim Hover. Diese wird nur verwendet, wenn das Diagramm ein einzelnes Dataset hat. ``` Required? false Position? named Default value @("#FF7B210C") Accept pipeline input? false Aliases Accept wildcard characters? false ``` #### -BorderWidth Die Rahmenbreite des Diagramms. Diese wird nur verwendet, wenn das Diagramm ein einzelnes Dataset hat. ``` Required? false Position? named Default value 1 Accept pipeline input? false Aliases Accept wildcard characters? false ``` #### Allgemeine Parameter Dieses Cmdlet unterstützt die allgemeinen Parameter: Verbose, Debug, ErrorAction, ErrorVariable, WarningAction, WarningVariable, OutBuffer, PipelineVariable und OutVariable. Weitere Informationen finden Sie unter [about\_CommonParameters](https://go.microsoft.com/fwlink/?LinkID=113216). ### Ausgaben ### Beispiele #### Beispiel 1: Balkendiagramm ```powershell $Data = @( @{ Server = "Server1"; AvailableRam = 128; UsedRAM = 10 } @{ Server = "Server2"; AvailableRam = 64; UsedRAM = 63 } @{ Server = "Server3"; AvailableRam = 48; UsedRAM = 40 } @{ Server = "Server4"; AvailableRam = 64; UsedRAM = 26 } @{ Server = "Server5"; AvailableRam = 128; UsedRAM = 120 } ) New-UDElement -Tag 'div' -Attributes @{ style = @{ height = '20vh'; width = "20vw" } } -Content { New-UDChartJS -Data $Data -DataProperty UsedRAM -LabelProperty Server -Type 'bar' -Id 'chart1' } ``` Ein Balkendiagramm mit einer Daten- und einer Bezeichnungseigenschaft. #### Beispiel 2: Blasendiagramm ```powershell $Data = @( @{ x = 1; y = 10; r = 15 } @{ x = 12; y = 25; r = 35 } @{ x = 8; y = 10; r = 95 } @{ x = 6; y = 95; r = 25 } ) New-UDElement -Tag 'div' -Attributes @{ style = @{ height = '20vh'; width = "20vw" } } -Content { New-UDChartJS -Type 'bubble' -Data $Data -Id 'chart2' } ``` Ein Blasendiagramm mit einer Dateneigenschaft. #### Beispiel 3: Liniendiagramm ```powershell $Data = @( @{ Server = "Server1"; AvailableRam = 128; UsedRAM = 10 } @{ Server = "Server2"; AvailableRam = 64; UsedRAM = 63 } @{ Server = "Server3"; AvailableRam = 48; UsedRAM = 40 } @{ Server = "Server4"; AvailableRam = 64; UsedRAM = 26 } @{ Server = "Server5"; AvailableRam = 128; UsedRAM = 120 } ) New-UDElement -Tag 'div' -Attributes @{ style = @{ height = '20vh'; width = "20vw" } } -Content { New-UDChartJS -Data $Data -DataProperty UsedRAM -LabelProperty Server -Type 'line' -BorderWidth 1 -Id 'chart3' } ``` Ein Liniendiagramm mit einer Daten- und einer Bezeichnungseigenschaft. #### Beispiel 4: Ringdiagramm ```powershell $Data = @( @{ Server = "Server1"; AvailableRam = 128; UsedRAM = 10 } @{ Server = "Server2"; AvailableRam = 64; UsedRAM = 63 } @{ Server = "Server3"; AvailableRam = 48; UsedRAM = 40 } @{ Server = "Server4"; AvailableRam = 64; UsedRAM = 26 } @{ Server = "Server5"; AvailableRam = 128; UsedRAM = 120 } ) New-UDElement -Tag 'div' -Attributes @{ style = @{ height = '20vh'; width = "10vw" } } -Content { New-UDChartJS -Data $Data -DataProperty UsedRAM -LabelProperty Server -Type 'doughnut' -Id 'chart4' } ``` Ein Ringdiagramm mit einer Daten- und einer Bezeichnungseigenschaft. #### Beispiel 5: Kreisdiagramm ```powershell $Data = @( @{ Server = "Server1"; AvailableRam = 128; UsedRAM = 10 } @{ Server = "Server2"; AvailableRam = 64; UsedRAM = 63 } @{ Server = "Server3"; AvailableRam = 48; UsedRAM = 40 } @{ Server = "Server4"; AvailableRam = 64; UsedRAM = 26 } @{ Server = "Server5"; AvailableRam = 128; UsedRAM = 120 } ) New-UDElement -Tag 'div' -Attributes @{ style = @{ height = '20vh'; width = "10vw" } } -Content { New-UDChartJS -Data $Data -DataProperty UsedRAM -LabelProperty Server -Type 'pie' -Id 'chart5' } ``` Ein Kreisdiagramm mit einer Daten- und einer Bezeichnungseigenschaft. #### Beispiel 6: Netzdiagramm ```powershell $Data = @( @{ Server = "Server1"; AvailableRam = 128; UsedRAM = 10 } @{ Server = "Server2"; AvailableRam = 64; UsedRAM = 63 } @{ Server = "Server3"; AvailableRam = 48; UsedRAM = 40 } @{ Server = "Server4"; AvailableRam = 64; UsedRAM = 26 } @{ Server = "Server5"; AvailableRam = 128; UsedRAM = 120 } ) New-UDElement -Tag 'div' -Attributes @{ style = @{ height = '20vh'; width = "10vw" } } -Content { New-UDChartJS -Data $Data -DataProperty UsedRAM -LabelProperty Server -Type 'radar' -Id 'chart6' } ``` Ein Netzdiagramm mit einer Daten- und einer Bezeichnungseigenschaft. #### Beispiel 7: Benutzerdefinierte Farben ```powershell $Data = @( @{ Server = "Server1"; AvailableRam = 128; UsedRAM = 10 } @{ Server = "Server2"; AvailableRam = 64; UsedRAM = 63 } @{ Server = "Server3"; AvailableRam = 48; UsedRAM = 40 } @{ Server = "Server4"; AvailableRam = 64; UsedRAM = 26 } @{ Server = "Server5"; AvailableRam = 128; UsedRAM = 120 } ) New-UDElement -Tag 'div' -Attributes @{ style = @{ height = '10vh'; width = "10vw" } } -Content { New-UDChartJS -Data $Data -DataProperty UsedRAM -LabelProperty Server -Type 'bar' -BackgroundColor '#808978FF' -HoverBackgroundColor '#808978FF' -HoverBorderColor '#808978FF' -BorderColor '#808978FF' -Id 'chart7' } ``` Ein Balkendiagramm mit einer Daten- und einer Bezeichnungseigenschaft sowie einigen konfigurierten Farben. #### Beispiel 8: Klick-Ereignis ```powershell $Data = @( @{ Server = "Server1"; AvailableRam = 128; UsedRAM = 10 } @{ Server = "Server2"; AvailableRam = 64; UsedRAM = 63 } @{ Server = "Server3"; AvailableRam = 48; UsedRAM = 40 } @{ Server = "Server4"; AvailableRam = 64; UsedRAM = 26 } @{ Server = "Server5"; AvailableRam = 128; UsedRAM = 120 } ) New-UDElement -Tag 'div' -Attributes @{ style = @{ height = '20vh'; width = "20vw" } } -Content { New-UDChartJS -Data $Data -DataProperty UsedRAM -LabelProperty Server -Type 'bar' -OnClick { Show-UDToast -Message "Clicked: $Body" } -Id 'chart8' } ``` Ein Balkendiagramm mit einer Daten- und einer Bezeichnungseigenschaft sowie einem Klick-Ereignis. #### Beispiel 9: Mehrere Datasets ```powershell $Data = @( @{ Server = "Server1"; AvailableRam = 128; UsedRAM = 10 } @{ Server = "Server2"; AvailableRam = 64; UsedRAM = 63 } @{ Server = "Server3"; AvailableRam = 48; UsedRAM = 40 } @{ Server = "Server4"; AvailableRam = 64; UsedRAM = 26 } @{ Server = "Server5"; AvailableRam = 128; UsedRAM = 120 } ) $Dataset1 = New-UDChartJSDataset -DataProperty AvailableRam -Label 'Available RAM' -BackgroundColor '#126f8c' -BorderWidth 1 $Dataset2 = New-UDChartJSDataset -DataProperty UsedRAM -Label 'Used RAM' -BackgroundColor '#8da322' -BorderWidth 1 New-UDElement -Tag 'div' -Attributes @{ style = @{ height = '10vh'; width = "10vw" } } -Content { New-UDChartJS -Data $Data -Dataset @($Dataset1, $Dataset2) -LabelProperty Server -Type 'line' -Id 'chart9' } ``` Ein Liniendiagramm mit mehreren Datasets. #### Beispiel 10: Automatische Aktualisierung ```powershell New-UDElement -Tag 'div' -Attributes @{ style = @{ height = '20vh'; width = "20vw" } } -Content { New-UDDynamic -Content { $Data = 1..10 | ForEach-Object { [PSCustomObject]@{ Name = $_; Value = Get-Random } } New-UDChartJS -Type 'bar' -Data $Data -DataProperty Value -Id 'chart10' -LabelProperty Name -BackgroundColor Blue } -AutoRefresh -AutoRefreshInterval 1 } ``` Ein Balkendiagramm, das sich jede Sekunde automatisch aktualisiert. #### Beispiel 11: ChartJS-Optionen ```powershell $Data = @( @{ Server = "Server1"; AvailableRam = 128; UsedRAM = 10 } @{ Server = "Server2"; AvailableRam = 64; UsedRAM = 63 } @{ Server = "Server3"; AvailableRam = 48; UsedRAM = 40 } @{ Server = "Server4"; AvailableRam = 64; UsedRAM = 26 } @{ Server = "Server5"; AvailableRam = 128; UsedRAM = 120 } ) New-UDElement -Tag 'div' -Attributes @{ style = @{ height = '20vh'; width = "20vw" } } -Content { New-UDChartJS -Data $Data -DataProperty UsedRAM -LabelProperty Server -Type 'bar' -OnClick { Show-UDToast -Message "Clicked: $Body" } -Options @{ plugins = @{ legend = @{ title = @{ display = $true text = 'Bar Chart' } } } } -Id 'chart11' } ``` Sie können ChartJS-Optionen, die als Hashtable definiert sind, verwenden, um das Diagramm weiter zu konfigurieren. Weitere Informationen finden Sie in der [ChartJS-Dokumentation](https://www.chartjs.org/docs/3.9.1/). --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://docs.devolutions.net/powershell-universal/de/powershell-befehle/new-udchartjs.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.