> 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/aplicaciones/components/data-visualization/charts.md). # Gráficos Cree gráficos en las apps de PowerShell Universal con las integraciones de ChartJS y Nivo, incluidos gráficos de barras, líneas, circulares, mapas de calor, de red y monitores con actualización automá Universal Apps proporciona varias soluciones de gráficos integradas para ayudar a visualizar los datos obtenidos de PowerShell. ## ChartJS Universal Apps se integra con [ChartJS](https://www.chartjs.org/). ### Crear un gráfico Para crear un gráfico, utilice `New-UDChartJS` y `New-UDChartJSData`. El gráfico siguiente muestra los diez procesos que más CPU utilizan. ```powershell $Data = Get-Process | Sort-Object -Property CPU -Descending | Select-Object -First 10 New-UDChartJS -Type 'bar' -Data $Data -DataProperty CPU -LabelProperty ProcessName ``` ### Tipos #### Barras ```powershell $Data = Get-Process | Sort-Object -Property CPU -Descending | Select-Object -First 10 New-UDChartJS -Type 'bar' -Data $Data -DataProperty CPU -LabelProperty ProcessName ``` #### Barras apiladas ```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 ``` #### Barras 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 ``` #### Burbujas Un gráfico de burbujas consta de coordenadas x e y y de un valor r para el radio de los círculos. ```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 ``` #### Líneas ```powershell $Data = Get-Process | Sort-Object -Property CPU -Descending | Select-Object -First 10 New-UDChartJS -Type 'line' -Data $Data -DataProperty CPU -LabelProperty ProcessName ``` #### Anillo ```powershell $Data = Get-Process | Sort-Object -Property CPU -Descending | Select-Object -First 10 New-UDChartJS -Type 'doughnut' -Data $Data -DataProperty CPU -LabelProperty ProcessName ``` #### Circular ```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 ``` ### Colores Los colores se pueden definir mediante los distintos parámetros de color 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 ``` ### Conjuntos de datos De forma predeterminada, no es necesario definir los conjuntos de datos manualmente. Se crea automáticamente un único conjunto de datos cuando se utilizan los parámetros `-DataProperty` y `-LabelProperty`. Si desea definir varios conjuntos de datos para un solo gráfico, puede utilizar la propiedad `-Dataset` junto con `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 ``` ### Eventos de clic Puede realizar una acción cuando un usuario hace clic en el gráfico. Este ejemplo muestra un aviso con el contenido de la variable `$Body`. La variable `$Body` contiene una cadena JSON con información sobre los elementos en los que se ha hecho clic. ```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 ``` ### Gráficos con actualización automática Puede utilizar `New-UDDynamic` para crear gráficos que se actualicen a intervalos. ```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 ``` ### Monitores Los monitores son un tipo especial de gráfico que hace un seguimiento de los datos a lo largo del tiempo. Los monitores resultan útiles para mostrar datos como estadísticas de rendimiento de servidores que cambian con frecuencia. Se devuelve un único valor desde un monitor y este se representa gráficamente de forma automática a lo largo del tiempo. ``` New-UDChartJSMonitor -LoadData { Get-Random -Max 100 | Out-UDChartJSMonitorData } -Labels "Random" -ChartBackgroundColor "#297741" -RefreshInterval 1 ``` ### Opciones El cmdlet `New-UDChartJS` admite opciones avanzadas de ChartJS. Puede utilizar el parámetro `-Options` para pasar una tabla hash. Este ejemplo oculta la leyenda. ```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 } } ``` #### Título Puede incluir un título con la opción de título. ```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 se integra con [Nivo Charts](https://nivo.rocks/components). A continuación encontrará ejemplos y documentación sobre el uso de estos gráficos. ### Crear un gráfico Todos los gráficos de Nivo se pueden crear con `New-UDNivoChart`. Especificará un parámetro de modificador para los distintos tipos de gráficos. Cada tipo de gráfico admitirá un formato de datos bien definido a través del parámetro `-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 ``` ### Patrones Nivo ofrece la posibilidad de especificar patrones para mostrarlos sobre los conjuntos de datos. Puede configurar estos patrones con `New-UDNivoPattern` y `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' ``` ### Anchos adaptables Los gráficos de Nivo ofrecen anchos adaptables, por lo que se redimensionan automáticamente cuando se colocan en una página o cuando se redimensiona el navegador. Se requiere una altura cuando se utilizan anchos adaptables. ### Gráficos con actualización automática Como muchos componentes de Universal Dashboard v3, los gráficos de Nivo no definen por sí mismos propiedades de actualización automática. En su lugar, puede aprovechar `New-UDDynamic` para actualizar el gráfico a intervalos. ```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 Los gráficos de Nivo admiten controladores de eventos OnClick. Se le proporcionará información en formato JSON sobre el conjunto de datos en el que se ha hecho clic. ```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 } ``` ### Tipos de gráficos #### Barras ```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 } ``` #### Burbujas ```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 ``` #### Calendario ```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 ``` #### Mapa de calor ```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 ``` #### Líneas ```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 ``` #### Red Suponiendo los datos JSON siguientes, puede utilizar el código de app siguiente. ```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 ``` ### Color basado en los datos Puede utilizar el formato siguiente para usar colores basados en sus datos. ```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/es/aplicaciones/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.