> 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/fr/applis/components/data-visualization/charts.md). # Graphiques Créez des graphiques dans les applis PowerShell Universal avec les intégrations ChartJS et Nivo, couvrant les graphiques à barres, à lignes, à secteurs, les cartes thermiques, les graphiques de réseau Universal Apps offre plusieurs solutions de création de graphiques intégrées pour aider à visualiser vos données récupérées depuis PowerShell. ## ChartJS Universal Apps s'intègre avec [ChartJS](https://www.chartjs.org/). ### Créer un graphique Pour créer un graphique, utilisez `New-UDChartJS` et `New-UDChartJSData`. Le graphique ci-dessous montre les dix processus qui utilisent le plus de CPU. ```powershell $Data = Get-Process | Sort-Object -Property CPU -Descending | Select-Object -First 10 New-UDChartJS -Type 'bar' -Data $Data -DataProperty CPU -LabelProperty ProcessName ``` ### Types #### Barres ```powershell $Data = Get-Process | Sort-Object -Property CPU -Descending | Select-Object -First 10 New-UDChartJS -Type 'bar' -Data $Data -DataProperty CPU -LabelProperty ProcessName ``` #### Barres empilées ```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 ``` #### Barres horizontales ```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 ``` #### Bulles Un graphique à bulles est composé de coordonnées x et y et d'une valeur r pour le rayon des cercles. ```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 ``` #### Lignes ```powershell $Data = Get-Process | Sort-Object -Property CPU -Descending | Select-Object -First 10 New-UDChartJS -Type 'line' -Data $Data -DataProperty CPU -LabelProperty ProcessName ``` #### Anneau ```powershell $Data = Get-Process | Sort-Object -Property CPU -Descending | Select-Object -First 10 New-UDChartJS -Type 'doughnut' -Data $Data -DataProperty CPU -LabelProperty ProcessName ``` #### Secteurs ```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 ``` ### Couleurs Les couleurs peuvent être définies à l'aide des différents paramètres de couleur de `New-UDChartJS`. ```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 ``` ### Jeux de données Par défaut, vous n'avez pas besoin de définir les jeux de données manuellement. Un seul jeu de données est créé automatiquement lorsque vous utilisez les paramètres `-DataProperty` et `-LabelProperty`. Si vous voulez définir plusieurs jeux de données pour un même graphique, vous pouvez utiliser la propriété `-Dataset` conjointement avec `New-UDChartJSDataset`. ```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 ``` ### Événements de clic Vous pouvez effectuer une action lorsqu'un utilisateur clique sur le graphique. Cet exemple affiche une notification toast avec le contenu de la variable `$Body`. La variable `$Body` contient une chaîne JSON avec des informations sur les éléments qui ont été cliqués. ```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 ``` ### Graphiques à actualisation automatique Vous pouvez utiliser `New-UDDynamic` pour créer des graphiques qui s'actualisent à intervalle régulier. ```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 ``` ### Moniteurs Les moniteurs sont un type particulier de graphique qui suit les données au fil du temps. Les moniteurs sont utiles pour afficher des données telles que les statistiques de performance des serveurs qui changent fréquemment. Vous retournez une seule valeur à partir d'un moniteur et elle est représentée graphiquement automatiquement au fil du temps. ``` New-UDChartJSMonitor -LoadData { Get-Random -Max 100 | Out-UDChartJSMonitorData } -Labels "Random" -ChartBackgroundColor "#297741" -RefreshInterval 1 ``` ### Options L'applet de commande `New-UDChartJS` prend en charge les options avancées de ChartJS. Vous pouvez utiliser le paramètre `-Options` pour passer une table de hachage. Cet exemple masque la légende. ```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 } } ``` #### Titre Vous pouvez inclure un titre avec l'option de titre. ```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' } } } } ``` ## Graphiques Nivo Universal Dashboard s'intègre avec [Nivo Charts](https://nivo.rocks/components). Vous trouverez ci-dessous des exemples et de la documentation sur l'utilisation de ces graphiques. ### Créer un graphique Tous les graphiques Nivo peuvent être créés avec `New-UDNivoChart`. Vous spécifierez un paramètre de type switch pour les différents types de graphiques. Chaque type de graphique acceptera un format de données bien défini via le paramètre `-Data`. ```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 ``` ### Motifs Nivo permet de spécifier des motifs à afficher par-dessus les jeux de données. Vous pouvez configurer ces motifs avec `New-UDNivoPattern` et `New-UDNivoFill` . ```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' ``` ### Largeurs adaptatives Les graphiques Nivo offrent des largeurs adaptatives afin qu'ils se redimensionnent automatiquement lorsqu'ils sont placés sur une page ou lorsque le navigateur est redimensionné. Une hauteur est requise lors de l'utilisation de largeurs adaptatives. ### Graphiques à actualisation automatique Comme de nombreux composants dans Universal Dashboard v3, les graphiques Nivo ne définissent pas eux-mêmes de propriétés d'actualisation automatique. Au lieu de cela, vous pouvez tirer parti de `New-UDDynamic` pour actualiser le graphique à intervalle régulier. ```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 Les graphiques Nivo prennent en charge les gestionnaires d'événements OnClick. Vous recevrez des informations au format JSON sur le jeu de données qui a été cliqué. ```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 } ``` ### Types de graphiques #### Barres ```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 } ``` #### Bulles ```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 ``` #### Calendrier ```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 ``` #### Carte thermique ```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 ``` #### Lignes ```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 ``` #### Réseau En supposant les données JSON ci-dessous, vous pouvez utiliser le code d'appli suivant. ```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) ``` #### Flux ```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 ``` ### Couleurs basées sur les données Vous pouvez utiliser le format suivant pour utiliser des couleurs basées sur vos données. ```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/fr/applis/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.