> 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/apps/components/data-visualization/charts.md). # Charts Erstellen Sie Diagramme in PowerShell Universal-Apps mit ChartJS- und Nivo-Integrationen – für Balken-, Linien-, Kreis-, Heatmap- und Netzwerkdiagramme sowie Monitore mit automatischer Aktualisierung Universal Apps bietet mehrere integrierte Diagrammlösungen, um Ihre aus PowerShell abgerufenen Daten zu visualisieren. ## ChartJS Universal Apps ist in [ChartJS](https://www.chartjs.org/) integriert. ### Erstellen eines Diagramms Um ein Diagramm zu erstellen, verwenden Sie `New-UDChartJS` und `New-UDChartJSData`. Das folgende Diagramm zeigt die zehn Prozesse mit der höchsten CPU-Nutzung. ```powershell $Data = Get-Process | Sort-Object -Property CPU -Descending | Select-Object -First 10 New-UDChartJS -Type 'bar' -Data $Data -DataProperty CPU -LabelProperty ProcessName ``` ### Typen #### Balken ```powershell $Data = Get-Process | Sort-Object -Property CPU -Descending | Select-Object -First 10 New-UDChartJS -Type 'bar' -Data $Data -DataProperty CPU -LabelProperty ProcessName ``` #### Gestapelte Balken ```powershell $GraphPrep = @( @{ RAM = "Server1"; AvailableRam = 128; UsedRAM = 10 } @{ RAM = "Server2"; AvailableRam = 64; UsedRAM = 63 } @{ RAM = "Server3"; AvailableRam = 48; UsedRAM = 40 } @{ RAM = "Server4"; AvailableRam = 64;; UsedRAM = 26 } @{ RAM = "Server5"; AvailableRam = 128; UsedRAM = 120 } ) $AvailableRamDataSet = New-UDChartJSDataset -DataProperty AvailableRAM -Label 'Available' -BackgroundColor blue $UsedRamDataset = New-UDChartJSDataset -DataProperty UsedRAM -Label 'Used' -BackgroundColor red $Options = @{ Type = 'bar' Data = $GraphPrep Dataset = @($AvailableRamDataSet, $UsedRamDataset) LabelProperty = "RAM" Options = @{ scales = @{ xAxes = @{ stacked = $true } yAxes = @{ stacked = $true } } } } New-UDChartJS @Options ``` #### Horizontale Balken ```powershell $Data = Get-Process | Sort-Object -Property CPU -Descending | Select-Object -First 10 New-UDChartJS -Type 'bar' -Data $Data -DataProperty CPU -LabelProperty ProcessName -Options @{ indexAxis = "y" plugins = @{ legend = @{ position = "right" } } }p ``` #### Bubble Ein Bubble-Diagramm besteht aus x- und y-Koordinaten sowie einem r-Wert für den Radius der Kreise. ```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-UDChartJS -Type 'bubble' -Data $Data ``` #### Linie ```powershell $Data = Get-Process | Sort-Object -Property CPU -Descending | Select-Object -First 10 New-UDChartJS -Type 'line' -Data $Data -DataProperty CPU -LabelProperty ProcessName ``` #### Doughnut ```powershell $Data = Get-Process | Sort-Object -Property CPU -Descending | Select-Object -First 10 New-UDChartJS -Type 'doughnut' -Data $Data -DataProperty CPU -LabelProperty ProcessName ``` #### Kreis ```powershell $Data = Get-Process | Sort-Object -Property CPU -Descending | Select-Object -First 10 New-UDChartJS -Type 'pie' -Data $Data -DataProperty CPU -LabelProperty ProcessName ``` #### Radar ```powershell $Data = Get-Process | Sort-Object -Property CPU -Descending | Select-Object -First 10 New-UDChartJS -Type 'radar' -Data $Data -DataProperty CPU -LabelProperty ProcessName ``` ### Farben Farben können über die verschiedenen Farbparameter von `New-UDChartJS` definiert werden. ```powershell $Data = Get-Process | Sort-Object -Property CPU -Descending | Select-Object -First 10 $Options = @{ Type = 'bar' Data = $Data BackgroundColor = 'Red' BorderColor = '#c61d4a' HoverBackgroundColor = 'Blue' HoverBorderColor = '#451dc6' DataProperty = 'CPU' LabelProperty = 'ProcessName' } New-UDChartJS @Options ``` ### Datensätze Standardmäßig müssen Sie Datensätze nicht manuell definieren. Ein einzelner Datensatz wird automatisch erstellt, wenn Sie die Parameter `-DataProperty` und `-LabelProperty` verwenden. Wenn Sie mehrere Datensätze für ein einzelnes Diagramm definieren möchten, können Sie die Eigenschaft `-Dataset` in Verbindung mit `New-UDChartJSDataset` verwenden. ```powershell $Data = Get-Process | Sort-Object -Property CPU -Descending | Select-Object -First 10 $CPUDataset = New-UDChartJSDataset -DataProperty CPU -Label CPU -BackgroundColor '#126f8c' $MemoryDataset = New-UDChartJSDataset -DataProperty HandleCount -Label 'Handle Count' -BackgroundColor '#8da322' $Options = @{ Type = 'bar' Data = $Data Dataset = @($CPUDataset, $MemoryDataset) LabelProperty = "ProcessName" } New-UDChartJS @Options ``` ### Klick-Ereignisse Sie können eine Aktion ausführen, wenn ein Benutzer auf das Diagramm klickt. Dieses Beispiel zeigt einen Toast mit dem Inhalt der Variable `$Body`. Die Variable `$Body` enthält eine JSON-Zeichenfolge mit Informationen über die angeklickten Elemente. ```powershell $Data = Get-Process | Sort-Object -Property CPU -Descending | Select-Object -First 10 $Options = @{ Type = 'bar' Data = $Data DataProperty = 'CPU' LabelProperty = "ProcessName" OnClick = { Show-UDToast -Message $Body } } New-UDChartJS @Options ``` ### Automatisch aktualisierende Diagramme Sie können `New-UDDynamic` verwenden, um Diagramme zu erstellen, die in einem Intervall aktualisiert werden. ```powershell New-UDDynamic -Content { $Data = 1..10 | % { [PSCustomObject]@{ Name = $_; value = get-random } } New-UDChartJS -Type 'bar' -Data $Data -DataProperty Value -Id 'test' -LabelProperty Name -BackgroundColor Blue } -AutoRefresh -AutoRefreshInterval 1 ``` ### Monitore Monitore sind eine besondere Art von Diagramm, das Daten über die Zeit verfolgt. Monitore eignen sich gut zur Anzeige von Daten wie Serverleistungsstatistiken, die sich häufig ändern. Sie geben aus einem Monitor einen einzelnen Wert zurück, der automatisch über die Zeit dargestellt wird. ``` New-UDChartJSMonitor -LoadData { Get-Random -Max 100 | Out-UDChartJSMonitorData } -Labels "Random" -ChartBackgroundColor "#297741" -RefreshInterval 1 ``` ### Optionen Das Cmdlet `New-UDChartJS` unterstützt die Annahme erweiterter ChartJS-Optionen. Sie können den Parameter `-Options` verwenden, um eine Hashtable zu übergeben. In diesem Beispiel wird die Legende ausgeblendet. ```powershell $Data = Get-Process | Sort-Object -Property CPU -Descending | Select-Object -First 10 New-UDChartJS -Type 'bar' -Data $Data -DataProperty CPU -LabelProperty ProcessName -Options @{ legend = @{ display = $false } } ``` #### Titel Sie können mit der Titeloption einen Titel einfügen. ```powershell $Data = Get-Process | Sort-Object -Property CPU -Descending | Select-Object -First 10 New-UDChartJS -Type 'bar' -Data $Data -DataProperty CPU -LabelProperty ProcessName -Options @{ plugins = @{ legend = @{ title = @{ display = $true text = 'Bar Chart' } } } } ``` ## Nivo Charts Universal Dashboard ist in [Nivo Charts](https://nivo.rocks/components) integriert. Nachfolgend finden Sie Beispiele und Dokumentation zur Verwendung dieser Diagramme. ### Erstellen eines Diagramms Alle Nivo-Diagramme können mit `New-UDNivoChart` erstellt werden. Für die verschiedenen Diagrammtypen geben Sie einen Switch-Parameter an. Jeder Diagrammtyp erwartet über den Parameter `-Data` ein klar definiertes Datenformat. ```powershell $Data = 1..10 | ForEach-Object { $item = Get-Random -Max 1000 [PSCustomObject]@{ Name = "Test$item" Value = $item } } New-UDNivoChart -Id 'autoRefreshingNivoBar' -Bar -Keys "value" -IndexBy 'name' -Data $Data -Height 500 -Width 1000 ``` ### Muster Nivo bietet die Möglichkeit, Muster festzulegen, die über Datensätzen angezeigt werden. Sie können diese Muster mit `New-UDNivoPattern` und `New-UDNivoFill` konfigurieren. ```powershell $Data = @( @{ country = 'USA' burgers = (Get-Random -Minimum 10 -Maximum 100) fries = (Get-Random -Minimum 10 -Maximum 100) sandwich = (Get-Random -Minimum 10 -Maximum 100) } @{ country = 'Germany' burgers = (Get-Random -Minimum 10 -Maximum 100) fries = (Get-Random -Minimum 10 -Maximum 100) sandwich = (Get-Random -Minimum 10 -Maximum 100) } @{ country = 'Japan' burgers = (Get-Random -Minimum 10 -Maximum 100) fries = (Get-Random -Minimum 10 -Maximum 100) sandwich = (Get-Random -Minimum 10 -Maximum 100) } ) $Pattern = New-UDNivoPattern -Dots -Id 'dots' -Background "inherit" -Color "#38bcb2" -Size 4 -Padding 1 -Stagger $Fill = New-UDNivoFill -ElementId "fries" -PatternId 'dots' New-UDNivoChart -Definitions $Pattern -Fill $Fill -Bar -Data $Data -Height 400 -Width 900 -Keys @('burgers', 'fries', 'sandwich') -IndexBy 'country' ``` ### Responsive Breiten Nivo-Diagramme bieten responsive Breiten, sodass ihre Größe automatisch angepasst wird, wenn sie auf einer Seite platziert werden oder der Browser neu skaliert wird. Bei Verwendung responsiver Breiten ist eine Höhe erforderlich. ### Automatisch aktualisierende Diagramme Wie viele Komponenten in Universal Dashboard v3 definieren Nivo-Diagramme selbst keine Eigenschaften zur automatischen Aktualisierung. Stattdessen können Sie `New-UDDynamic` nutzen, um das Diagramm in einem Intervall zu aktualisieren. ```powershell New-UDDynamic -Content { $Data = 1..10 | ForEach-Object { $item = Get-Random -Max 1000 [PSCustomObject]@{ Name = "Test$item" Value = $item } } New-UDNivoChart -Id 'autoRefreshingNivoBar' -Bar -Keys "Value" -IndexBy 'name' -Data $Data -Height 500 -Width 1000 } -AutoRefresh ``` ### OnClick Nivo-Diagramme unterstützen OnClick-Ereignishandler. Sie erhalten Informationen über den angeklickten Datensatz als JSON. ```powershell $Data = @( @{ country = 'USA' burgers = (Get-Random -Minimum 10 -Maximum 100) fries = (Get-Random -Minimum 10 -Maximum 100) sandwich = (Get-Random -Minimum 10 -Maximum 100) } @{ country = 'Germany' burgers = (Get-Random -Minimum 10 -Maximum 100) fries = (Get-Random -Minimum 10 -Maximum 100) sandwich = (Get-Random -Minimum 10 -Maximum 100) } @{ country = 'Japan' burgers = (Get-Random -Minimum 10 -Maximum 100) fries = (Get-Random -Minimum 10 -Maximum 100) sandwich = (Get-Random -Minimum 10 -Maximum 100) } ) New-UDNivoChart -Bar -Data $Data -Height 400 -Width 900 -Keys @('burgers', 'fries', 'sandwich') -IndexBy 'country' -OnClick { Show-UDToast -Message $EventData -Position topLeft } ``` ### Diagrammtypen #### Balken ```powershell New-Example -Title 'Bar' -Description '' -Example { $Data = 1..10 | ForEach-Object { $item = Get-Random -Max 1000 [PSCustomObject]@{ Name = "Test$item" Value = $item } } New-UDNivoChart -Bar -Keys "Value" -IndexBy 'name' -Data $Data -Height 500 -Width 1000 } ``` #### Bubble ```powershell $TreeData = @{ Name = "root" children = @( @{ Name = "first" children = @( @{ Name = "first-first" Count = 7 } @{ Name = "first-second" Count = 8 } ) }, @{ Name = "second" Count = 21 } ) } New-UDNivoChart -Bubble -Data $TreeData -Value "count" -Identity "name" -Height 500 -Width 800 ``` #### Kalender ```powershell $Data = @() for($i = 365; $i -gt 0; $i--) { $Data += @{ day = (Get-Date).AddDays($i * -1).ToString("yyyy-MM-dd") value = Get-Random } } $From = (Get-Date).AddDays(-365) $To = Get-Date New-UDNivoChart -Calendar -Data $Data -From $From -To $To -Height 500 -Width 1000 -MarginTop 50 -MarginRight 130 -MarginBottom 50 -MarginLeft 60 ``` #### Heatmap ```powershell $Data = @( @{ state = "idaho" cats = 72307 dogs = 23429 moose = 23423 bears = 784 } @{ state = "wisconsin" cats = 2343342 dogs = 3453623 moose = 1 bears = 23423 } @{ state = "montana" cats = 9234 dogs = 3973457 moose = 23472 bears = 347303 } @{ state = "colorado" cats = 345973789 dogs = 0237234 moose = 2302 bears = 2349772 } ) New-UDNivoChart -Heatmap -Data $Data -IndexBy 'state' -keys @('cats', 'dogs', 'moose', 'bears') -Height 500 -Width 1000 -MarginTop 50 -MarginRight 130 -MarginBottom 50 -MarginLeft 60 ``` #### Linie ```powershell [array]$Data = [PSCustomObject]@{ id = "DataSet" data = (1..20 | ForEach-Object { $item = Get-Random -Max 500 [PSCustomObject]@{ x = "Test$item" y = $item } }) } New-UDNivoChart -Line -Data $Data -Height 500 -Width 1000 -LineWidth 1 ``` #### Netzwerk Ausgehend von den folgenden JSON-Daten können Sie den folgenden App-Code verwenden. ```json { "nodes": [ { "id": "Node 1", "height": 1, "size": 24, "color": "rgb(97, 205, 187)" }, { "id": "Node 2", "height": 1, "size": 24, "color": "rgb(97, 205, 187)" }, { "id": "Node 3", "height": 1, "size": 24, "color": "rgb(97, 205, 187)" }, { "id": "Node 4", "height": 1, "size": 24, "color": "rgb(97, 205, 187)" }, { "id": "Node 5", "height": 1, "size": 24, "color": "rgb(97, 205, 187)" }, { "id": "Node 6", "height": 1, "size": 24, "color": "rgb(97, 205, 187)" }, { "id": "Node 7", "height": 1, "size": 24, "color": "rgb(97, 205, 187)" }, { "id": "Node 8", "height": 1, "size": 24, "color": "rgb(97, 205, 187)" }, { "id": "Node 0", "height": 2, "size": 32, "color": "rgb(244, 117, 96)" }, { "id": "Node 1.0", "height": 0, "size": 12, "color": "rgb(232, 193, 160)" }, { "id": "Node 1.1", "height": 0, "size": 12, "color": "rgb(232, 193, 160)" }, { "id": "Node 1.2", "height": 0, "size": 12, "color": "rgb(232, 193, 160)" }, { "id": "Node 1.3", "height": 0, "size": 12, "color": "rgb(232, 193, 160)" }, { "id": "Node 1.4", "height": 0, "size": 12, "color": "rgb(232, 193, 160)" }, { "id": "Node 1.5", "height": 0, "size": 12, "color": "rgb(232, 193, 160)" }, { "id": "Node 1.6", "height": 0, "size": 12, "color": "rgb(232, 193, 160)" }, { "id": "Node 2.0", "height": 0, "size": 12, "color": "rgb(232, 193, 160)" }, { "id": "Node 2.1", "height": 0, "size": 12, "color": "rgb(232, 193, 160)" }, { "id": "Node 2.2", "height": 0, "size": 12, "color": "rgb(232, 193, 160)" }, { "id": "Node 2.3", "height": 0, "size": 12, "color": "rgb(232, 193, 160)" }, { "id": "Node 2.4", "height": 0, "size": 12, "color": "rgb(232, 193, 160)" }, { "id": "Node 2.5", "height": 0, "size": 12, "color": "rgb(232, 193, 160)" }, { "id": "Node 2.6", "height": 0, "size": 12, "color": "rgb(232, 193, 160)" }, { "id": "Node 2.7", "height": 0, "size": 12, "color": "rgb(232, 193, 160)" }, { "id": "Node 2.8", "height": 0, "size": 12, "color": "rgb(232, 193, 160)" }, { "id": "Node 3.0", "height": 0, "size": 12, "color": "rgb(232, 193, 160)" }, { "id": "Node 3.1", "height": 0, "size": 12, "color": "rgb(232, 193, 160)" }, { "id": "Node 3.2", "height": 0, "size": 12, "color": "rgb(232, 193, 160)" }, { "id": "Node 3.3", "height": 0, "size": 12, "color": "rgb(232, 193, 160)" }, { "id": "Node 3.4", "height": 0, "size": 12, "color": "rgb(232, 193, 160)" }, { "id": "Node 3.5", "height": 0, "size": 12, "color": "rgb(232, 193, 160)" }, { "id": "Node 3.6", "height": 0, "size": 12, "color": "rgb(232, 193, 160)" }, { "id": "Node 3.7", "height": 0, "size": 12, "color": "rgb(232, 193, 160)" }, { "id": "Node 3.8", "height": 0, "size": 12, "color": "rgb(232, 193, 160)" }, { "id": "Node 4.0", "height": 0, "size": 12, "color": "rgb(232, 193, 160)" }, { "id": "Node 4.1", "height": 0, "size": 12, "color": "rgb(232, 193, 160)" }, { "id": "Node 4.2", "height": 0, "size": 12, "color": "rgb(232, 193, 160)" }, { "id": "Node 4.3", "height": 0, "size": 12, "color": "rgb(232, 193, 160)" }, { "id": "Node 4.4", "height": 0, "size": 12, "color": "rgb(232, 193, 160)" }, { "id": "Node 4.5", "height": 0, "size": 12, "color": "rgb(232, 193, 160)" }, { "id": "Node 4.6", "height": 0, "size": 12, "color": "rgb(232, 193, 160)" }, { "id": "Node 4.7", "height": 0, "size": 12, "color": "rgb(232, 193, 160)" }, { "id": "Node 4.8", "height": 0, "size": 12, "color": "rgb(232, 193, 160)" }, { "id": "Node 5.0", "height": 0, "size": 12, "color": "rgb(232, 193, 160)" }, { "id": "Node 5.1", "height": 0, "size": 12, "color": "rgb(232, 193, 160)" }, { "id": "Node 5.2", "height": 0, "size": 12, "color": "rgb(232, 193, 160)" }, { "id": "Node 6.0", "height": 0, "size": 12, "color": "rgb(232, 193, 160)" }, { "id": "Node 6.1", "height": 0, "size": 12, "color": "rgb(232, 193, 160)" }, { "id": "Node 6.2", "height": 0, "size": 12, "color": "rgb(232, 193, 160)" }, { "id": "Node 6.3", "height": 0, "size": 12, "color": "rgb(232, 193, 160)" }, { "id": "Node 6.4", "height": 0, "size": 12, "color": "rgb(232, 193, 160)" }, { "id": "Node 7.0", "height": 0, "size": 12, "color": "rgb(232, 193, 160)" }, { "id": "Node 7.1", "height": 0, "size": 12, "color": "rgb(232, 193, 160)" }, { "id": "Node 7.2", "height": 0, "size": 12, "color": "rgb(232, 193, 160)" }, { "id": "Node 7.3", "height": 0, "size": 12, "color": "rgb(232, 193, 160)" }, { "id": "Node 7.4", "height": 0, "size": 12, "color": "rgb(232, 193, 160)" }, { "id": "Node 7.5", "height": 0, "size": 12, "color": "rgb(232, 193, 160)" }, { "id": "Node 8.0", "height": 0, "size": 12, "color": "rgb(232, 193, 160)" }, { "id": "Node 8.1", "height": 0, "size": 12, "color": "rgb(232, 193, 160)" }, { "id": "Node 8.2", "height": 0, "size": 12, "color": "rgb(232, 193, 160)" }, { "id": "Node 8.3", "height": 0, "size": 12, "color": "rgb(232, 193, 160)" }, { "id": "Node 8.4", "height": 0, "size": 12, "color": "rgb(232, 193, 160)" }, { "id": "Node 8.5", "height": 0, "size": 12, "color": "rgb(232, 193, 160)" }, { "id": "Node 8.6", "height": 0, "size": 12, "color": "rgb(232, 193, 160)" }, { "id": "Node 8.7", "height": 0, "size": 12, "color": "rgb(232, 193, 160)" }, { "id": "Node 8.8", "height": 0, "size": 12, "color": "rgb(232, 193, 160)" } ], "links": [ { "source": "Node 0", "target": "Node 1", "distance": 80 }, { "source": "Node 1", "target": "Node 1", "distance": 80 }, { "source": "Node 1", "target": "Node 1.0", "distance": 50 }, { "source": "Node 1", "target": "Node 1.1", "distance": 50 }, { "source": "Node 1", "target": "Node 1.2", "distance": 50 }, { "source": "Node 1", "target": "Node 1.3", "distance": 50 }, { "source": "Node 1", "target": "Node 1.4", "distance": 50 }, { "source": "Node 1", "target": "Node 1.5", "distance": 50 }, { "source": "Node 1", "target": "Node 1.6", "distance": 50 }, { "source": "Node 0", "target": "Node 2", "distance": 80 }, { "source": "Node 2", "target": "Node 2.0", "distance": 50 }, { "source": "Node 2", "target": "Node 2.1", "distance": 50 }, { "source": "Node 2", "target": "Node 2.2", "distance": 50 }, { "source": "Node 2", "target": "Node 2.3", "distance": 50 }, { "source": "Node 2", "target": "Node 2.4", "distance": 50 }, { "source": "Node 2", "target": "Node 2.5", "distance": 50 }, { "source": "Node 2", "target": "Node 2.6", "distance": 50 }, { "source": "Node 2", "target": "Node 2.7", "distance": 50 }, { "source": "Node 2", "target": "Node 2.8", "distance": 50 }, { "source": "Node 0", "target": "Node 3", "distance": 80 }, { "source": "Node 3", "target": "Node 3.0", "distance": 50 }, { "source": "Node 3", "target": "Node 3.1", "distance": 50 }, { "source": "Node 3", "target": "Node 3.2", "distance": 50 }, { "source": "Node 3", "target": "Node 3.3", "distance": 50 }, { "source": "Node 3", "target": "Node 3.4", "distance": 50 }, { "source": "Node 3", "target": "Node 3.5", "distance": 50 }, { "source": "Node 3", "target": "Node 3.6", "distance": 50 }, { "source": "Node 3", "target": "Node 3.7", "distance": 50 }, { "source": "Node 3", "target": "Node 3.8", "distance": 50 }, { "source": "Node 0", "target": "Node 4", "distance": 80 }, { "source": "Node 4", "target": "Node 8", "distance": 80 }, { "source": "Node 4", "target": "Node 4.0", "distance": 50 }, { "source": "Node 4", "target": "Node 4.1", "distance": 50 }, { "source": "Node 4", "target": "Node 4.2", "distance": 50 }, { "source": "Node 4", "target": "Node 4.3", "distance": 50 }, { "source": "Node 4", "target": "Node 4.4", "distance": 50 }, { "source": "Node 4", "target": "Node 4.5", "distance": 50 }, { "source": "Node 4", "target": "Node 4.6", "distance": 50 }, { "source": "Node 4", "target": "Node 4.7", "distance": 50 }, { "source": "Node 4", "target": "Node 4.8", "distance": 50 }, { "source": "Node 0", "target": "Node 5", "distance": 80 }, { "source": "Node 5", "target": "Node 5.0", "distance": 50 }, { "source": "Node 5", "target": "Node 5.1", "distance": 50 }, { "source": "Node 5", "target": "Node 5.2", "distance": 50 }, { "source": "Node 0", "target": "Node 6", "distance": 80 }, { "source": "Node 6", "target": "Node 6.0", "distance": 50 }, { "source": "Node 6", "target": "Node 6.1", "distance": 50 }, { "source": "Node 6", "target": "Node 6.2", "distance": 50 }, { "source": "Node 6", "target": "Node 6.3", "distance": 50 }, { "source": "Node 6", "target": "Node 6.4", "distance": 50 }, { "source": "Node 0", "target": "Node 7", "distance": 80 }, { "source": "Node 7", "target": "Node 7.0", "distance": 50 }, { "source": "Node 7", "target": "Node 7.1", "distance": 50 }, { "source": "Node 7", "target": "Node 7.2", "distance": 50 }, { "source": "Node 7", "target": "Node 7.3", "distance": 50 }, { "source": "Node 7", "target": "Node 7.4", "distance": 50 }, { "source": "Node 7", "target": "Node 7.5", "distance": 50 }, { "source": "Node 0", "target": "Node 8", "distance": 80 }, { "source": "Node 8", "target": "Node 8.0", "distance": 50 }, { "source": "Node 8", "target": "Node 8.1", "distance": 50 }, { "source": "Node 8", "target": "Node 8.2", "distance": 50 }, { "source": "Node 8", "target": "Node 8.3", "distance": 50 }, { "source": "Node 8", "target": "Node 8.4", "distance": 50 }, { "source": "Node 8", "target": "Node 8.5", "distance": 50 }, { "source": "Node 8", "target": "Node 8.6", "distance": 50 }, { "source": "Node 8", "target": "Node 8.7", "distance": 50 }, { "source": "Node 8", "target": "Node 8.8", "distance": 50 } ] } ``` ```powershell New-UDNivoChart -Network -Data (Get-Content "$Repository\network.json" | ConvertFrom-Json) ``` #### Stream ```powershell $Data = 1..10 | ForEach-Object { @{ "Adam" = Get-Random "Alon" = Get-Random "Lee" = Get-Random "Frank" = Get-Random "Bill" = Get-Random } } New-UDNivoChart -Stream -Data $Data -Height 500 -Width 1000 -Keys @("adam", "alon", "lee", "frank", "bill") ``` #### Treemap ```powershell $TreeData = @{ Name = "root" children = @( @{ Name = "first" children = @( @{ Name = "first-first" Count = 7 } @{ Name = "first-second" Count = 8 } ) }, @{ Name = "second" Count = 21 } ) } New-UDNivoChart -Treemap -Data $TreeData -Value "count" -Identity "name" -Height 500 -Width 800 ``` ### Farbe basierend auf Daten Sie können das folgende Format verwenden, um Farben basierend auf Ihren Daten zu verwenden. ```powershell $Data = $([PSCustomObject]@{ value = 30 color = '#BF5290' } [PSCustomObject]@{ value = 100 color = '#52BE80' } ) New-UDNivoChart -Pie -Data ($Data | Where-Object { $_.Value -ne 0 }) -InnerRadius 0.7 -CornerRadius 5 -PadAngle 1 -Colors @{datum = 'data.color' }` -MarginLeft "150" -MarginTop 1 -Height 370 -Responsive ``` --- # 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/apps/components/data-visualization/charts.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.