> 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/commandes-powershell/new-udchartjs.md). # New-UDChartJS New-UDChartJS affiche un graphique ChartJS interactif dans PowerShell Universal, prenant en charge les jeux de données, les événements de clic et les données chargées dynamiquement. ### Synopsis Crée un nouveau graphique ChartJS. ### Syntaxe ```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 ] [] ``` ### Description Crée un nouveau graphique ChartJS. ### Paramètres #### -Id L'ID du composant. Par défaut, il s'agit d'un GUID aléatoire. ``` Required? false Position? named Default value [Guid]::NewGuid() Accept pipeline input? false Aliases Accept wildcard characters? false ``` #### -DatasetLabel L'étiquette du jeu de données. Elle est utilisée uniquement lorsque le graphique comporte un seul jeu de données. ``` Required? false Position? named Default value Accept pipeline input? false Aliases Accept wildcard characters? false ``` #### -Type Le type de graphique à créer. Les valeurs valides sont bar, line, area, doughnut, radar, pie et bubble. ``` Required? false Position? named Default value bar Accept pipeline input? false Aliases Accept wildcard characters? false ``` #### -Options Une table de hachage d'options à transmettre au graphique. ``` Required? false Position? named Default value Accept pipeline input? false Aliases Accept wildcard characters? false ``` #### -OnClick Un bloc de script à exécuter lorsqu'on clique sur le graphique. `$EventData` inclura l'élément sur lequel on a cliqué. ``` Required? false Position? named Default value Accept pipeline input? false Aliases Accept wildcard characters? false ``` #### -Data Les données à utiliser pour le graphique. Il s'agit d'un tableau d'objets ou de tables de hachage. ``` 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 \ Utilisé lors de la définition de plusieurs jeux de données. Il s'agit d'un tableau de tables de hachage. Utilisez l'applet de commande `New-UDChartJSDataset` pour créer le jeu de données. ``` Required? true Position? named Default value Accept pipeline input? false Aliases Accept wildcard characters? false ``` #### -DataProperty La propriété à utiliser pour les données. Elle est utilisée uniquement lorsque le graphique comporte un seul jeu de données. ``` Required? false Position? named Default value Accept pipeline input? false Aliases Accept wildcard characters? false ``` #### -LabelProperty La propriété à utiliser pour l'étiquette. Elle est utilisée uniquement lorsque le graphique comporte un seul jeu de données. ``` Required? false Position? named Default value Accept pipeline input? false Aliases Accept wildcard characters? false ``` #### -BackgroundColor \ La couleur d'arrière-plan du graphique. Elle est utilisée uniquement lorsque le graphique comporte un seul jeu de données. ``` Required? false Position? named Default value @("#808978FF") Accept pipeline input? false Aliases Accept wildcard characters? false ``` #### -BorderColor \ La couleur de bordure du graphique. Elle est utilisée uniquement lorsque le graphique comporte un seul jeu de données. ``` Required? false Position? named Default value @("#FF8978FF") Accept pipeline input? false Aliases Accept wildcard characters? false ``` #### -HoverBackgroundColor \ La couleur d'arrière-plan au survol du graphique. Elle est utilisée uniquement lorsque le graphique comporte un seul jeu de données. ``` Required? false Position? named Default value @("#807B210C") Accept pipeline input? false Aliases Accept wildcard characters? false ``` #### -HoverBorderColor \ La couleur de bordure au survol du graphique. Elle est utilisée uniquement lorsque le graphique comporte un seul jeu de données. ``` Required? false Position? named Default value @("#FF7B210C") Accept pipeline input? false Aliases Accept wildcard characters? false ``` #### -BorderWidth La largeur de bordure du graphique. Elle est utilisée uniquement lorsque le graphique comporte un seul jeu de données. ``` Required? false Position? named Default value 1 Accept pipeline input? false Aliases Accept wildcard characters? false ``` #### Paramètres communs Cette applet de commande prend en charge les paramètres communs : Verbose, Debug, ErrorAction, ErrorVariable, WarningAction, WarningVariable, OutBuffer, PipelineVariable et OutVariable. Pour plus d'information, consultez [about\_CommonParameters](https://go.microsoft.com/fwlink/?LinkID=113216). ### Sorties ### Exemples #### Exemple 1 : Graphique à barres ```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' } ``` Un graphique à barres avec une propriété de données et d'étiquette. #### Exemple 2 : Graphique à bulles ```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' } ``` Un graphique à bulles avec une propriété de données. #### Exemple 3 : Graphique linéaire ```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' } ``` Un graphique linéaire avec une propriété de données et d'étiquette. #### Exemple 4 : Graphique en anneau ```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' } ``` Un graphique en anneau avec une propriété de données et d'étiquette. #### Exemple 5 : Graphique circulaire ```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' } ``` Un graphique circulaire avec une propriété de données et d'étiquette. #### Exemple 6 : Graphique en radar ```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' } ``` Un graphique en radar avec une propriété de données et d'étiquette. #### Exemple 7 : Couleurs personnalisées ```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' } ``` Un graphique à barres avec une propriété de données et d'étiquette ainsi que quelques couleurs configurées. #### Exemple 8 : Événement de clic ```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' } ``` Un graphique à barres avec une propriété de données et d'étiquette ainsi qu'un événement de clic. #### Exemple 9 : Plusieurs jeux de données ```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' } ``` Un graphique linéaire avec plusieurs jeux de données. #### Exemple 10 : Actualisation automatique ```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 } ``` Un graphique à barres qui s'actualise automatiquement à chaque seconde. #### Exemple 11 : Options ChartJS ```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' } ``` Vous pouvez utiliser les options ChartJS définies sous forme de table de hachage pour configurer davantage le graphique. Pour plus d'information, consultez la [documentation ChartJS](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/fr/commandes-powershell/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.