> 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/es/comandos-de-powershell/new-udchartjs.md). # New-UDChartJS New-UDChartJS representa un gráfico ChartJS interactivo en PowerShell Universal, con compatibilidad con conjuntos de datos, eventos de clic y datos cargados dinámicamente. ### Sinopsis Crea un nuevo gráfico ChartJS. ### Sintaxis ```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 ] [] ``` ### Descripción Crea un nuevo gráfico ChartJS. ### Parámetros #### -Id El ID del componente. Por defecto, es un GUID aleatorio. ``` Required? false Position? named Default value [Guid]::NewGuid() Accept pipeline input? false Aliases Accept wildcard characters? false ``` #### -DatasetLabel La etiqueta del conjunto de datos. Solo se utiliza cuando el gráfico tiene un único conjunto de datos. ``` Required? false Position? named Default value Accept pipeline input? false Aliases Accept wildcard characters? false ``` #### -Type El tipo de gráfico que se va a crear. Los valores válidos son bar, line, area, doughnut, radar, pie y bubble. ``` Required? false Position? named Default value bar Accept pipeline input? false Aliases Accept wildcard characters? false ``` #### -Options Una tabla hash de opciones que se pasa al gráfico. ``` Required? false Position? named Default value Accept pipeline input? false Aliases Accept wildcard characters? false ``` #### -OnClick Un bloque de script que se ejecuta cuando se hace clic en el gráfico. `$EventData` incluirá el elemento en el que se ha hecho clic. ``` Required? false Position? named Default value Accept pipeline input? false Aliases Accept wildcard characters? false ``` #### -Data Los datos que se utilizarán para el gráfico. Se trata de una matriz de objetos o tablas hash. ``` 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 \ Se utiliza al definir varios conjuntos de datos. Se trata de una matriz de tablas hash. Utilice el cmdlet `New-UDChartJSDataset` para crear el conjunto de datos. ``` Required? true Position? named Default value Accept pipeline input? false Aliases Accept wildcard characters? false ``` #### -DataProperty La propiedad que se utilizará para los datos. Solo se utiliza cuando el gráfico tiene un único conjunto de datos. ``` Required? false Position? named Default value Accept pipeline input? false Aliases Accept wildcard characters? false ``` #### -LabelProperty La propiedad que se utilizará para la etiqueta. Solo se utiliza cuando el gráfico tiene un único conjunto de datos. ``` Required? false Position? named Default value Accept pipeline input? false Aliases Accept wildcard characters? false ``` #### -BackgroundColor \ El color de fondo del gráfico. Solo se utiliza cuando el gráfico tiene un único conjunto de datos. ``` Required? false Position? named Default value @("#808978FF") Accept pipeline input? false Aliases Accept wildcard characters? false ``` #### -BorderColor \ El color del borde del gráfico. Solo se utiliza cuando el gráfico tiene un único conjunto de datos. ``` Required? false Position? named Default value @("#FF8978FF") Accept pipeline input? false Aliases Accept wildcard characters? false ``` #### -HoverBackgroundColor \ El color de fondo del gráfico al pasar el cursor. Solo se utiliza cuando el gráfico tiene un único conjunto de datos. ``` Required? false Position? named Default value @("#807B210C") Accept pipeline input? false Aliases Accept wildcard characters? false ``` #### -HoverBorderColor \ El color del borde del gráfico al pasar el cursor. Solo se utiliza cuando el gráfico tiene un único conjunto de datos. ``` Required? false Position? named Default value @("#FF7B210C") Accept pipeline input? false Aliases Accept wildcard characters? false ``` #### -BorderWidth El ancho del borde del gráfico. Solo se utiliza cuando el gráfico tiene un único conjunto de datos. ``` Required? false Position? named Default value 1 Accept pipeline input? false Aliases Accept wildcard characters? false ``` #### Parámetros comunes Este cmdlet admite los parámetros comunes: Verbose, Debug, ErrorAction, ErrorVariable, WarningAction, WarningVariable, OutBuffer, PipelineVariable y OutVariable. Para obtener más información, consulte [about\_CommonParameters](https://go.microsoft.com/fwlink/?LinkID=113216). ### Salidas ### Ejemplos #### Ejemplo 1: gráfico de barras ```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 gráfico de barras con una propiedad de datos y de etiqueta. #### Ejemplo 2: gráfico de burbujas ```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 gráfico de burbujas con una propiedad de datos. #### Ejemplo 3: gráfico de líneas ```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 gráfico de líneas con una propiedad de datos y de etiqueta. #### Ejemplo 4: gráfico de anillos ```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 gráfico de anillos con una propiedad de datos y de etiqueta. #### Ejemplo 5: gráfico circular ```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 gráfico circular con una propiedad de datos y de etiqueta. #### Ejemplo 6: gráfico radial ```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 gráfico radial con una propiedad de datos y de etiqueta. #### Ejemplo 7: colores personalizados ```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 gráfico de barras con una propiedad de datos y de etiqueta y algunos colores configurados. #### Ejemplo 8: evento 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 gráfico de barras con una propiedad de datos y de etiqueta y un evento de clic. #### Ejemplo 9: varios conjuntos de datos ```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 gráfico de líneas con varios conjuntos de datos. #### Ejemplo 10: actualización automática ```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 gráfico de barras que se actualiza automáticamente cada segundo. #### Ejemplo 11: opciones de 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' } ``` Puede utilizar opciones de ChartJS definidas como una tabla hash para configurar el gráfico con más detalle. Para obtener más información, consulte la [documentación de 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/es/comandos-de-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.