New-UDChartJS

Sinossi

Crea un nuovo grafico ChartJS.

Sintassi

New-UDChartJS [-Id <String>] [-Type <String>] [-Options <Hashtable>] [-OnClick <Endpoint>] [-LoadData <Endpoint>] [-LabelProperty <String>] [<CommonParameters>]

New-UDChartJS [-Id <String>] [-DatasetLabel <String>] [-Type <String>] [-Options <Hashtable>] [-OnClick <Endpoint>] -Data <Object> [-DataProperty <String>] [-LabelProperty <String>] [-BackgroundColor <DashboardColor[]>] [-BorderColor <DashboardColor[]>] [-HoverBackgroundColor <DashboardColor[]>] [-HoverBorderColor <DashboardColor[]>] [-BorderWidth <Int32>] [<CommonParameters>]

New-UDChartJS [-Id <String>] [-Type <String>] [-Options <Hashtable>] [-OnClick <Endpoint>] -Data <Object> -Dataset <Hashtable[]> [-LabelProperty <String>] [<CommonParameters>]

Descrizione

Crea un nuovo grafico ChartJS.

Parametri

-Id

L'ID del componente. Per impostazione predefinita è un GUID casuale.

Required?                    false
Position?                    named
Default value                [Guid]::NewGuid()
Accept pipeline input?       false
Aliases
Accept wildcard characters?  false

-DatasetLabel

L'etichetta del set di dati. Viene utilizzata solo quando il grafico ha un singolo set di dati.

Required?                    false
Position?                    named
Default value
Accept pipeline input?       false
Aliases
Accept wildcard characters?  false

-Type

Il tipo di grafico da creare. I valori validi sono bar, line, area, doughnut, radar, pie e bubble.

Required?                    false
Position?                    named
Default value                bar
Accept pipeline input?       false
Aliases
Accept wildcard characters?  false

-Options

Una hashtable di opzioni da passare al grafico.

Required?                    false
Position?                    named
Default value
Accept pipeline input?       false
Aliases
Accept wildcard characters?  false

-OnClick

Un blocco di script da eseguire quando si fa clic sul grafico. $EventData includerà l'elemento su cui è stato fatto clic.

Required?                    false
Position?                    named
Default value
Accept pipeline input?       false
Aliases
Accept wildcard characters?  false

-Data

I dati da utilizzare per il grafico. Si tratta di un array di oggetti o hashtable.

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 <Hashtable[]>

Utilizzato quando si definiscono più set di dati. Si tratta di un array di hashtable. Utilizzi il cmdlet New-UDChartJSDataset per creare il set di dati.

Required?                    true
Position?                    named
Default value
Accept pipeline input?       false
Aliases
Accept wildcard characters?  false

-DataProperty

La proprietà da utilizzare per i dati. Viene utilizzata solo quando il grafico ha un singolo set di dati.

Required?                    false
Position?                    named
Default value
Accept pipeline input?       false
Aliases
Accept wildcard characters?  false

-LabelProperty

La proprietà da utilizzare per l'etichetta. Viene utilizzata solo quando il grafico ha un singolo set di dati.

Required?                    false
Position?                    named
Default value
Accept pipeline input?       false
Aliases
Accept wildcard characters?  false

-BackgroundColor <DashboardColor[]>

Il colore di sfondo del grafico. Viene utilizzato solo quando il grafico ha un singolo set di dati.

Required?                    false
Position?                    named
Default value                @("#808978FF")
Accept pipeline input?       false
Aliases
Accept wildcard characters?  false

-BorderColor <DashboardColor[]>

Il colore del bordo del grafico. Viene utilizzato solo quando il grafico ha un singolo set di dati.

Required?                    false
Position?                    named
Default value                @("#FF8978FF")
Accept pipeline input?       false
Aliases
Accept wildcard characters?  false

-HoverBackgroundColor <DashboardColor[]>

Il colore di sfondo al passaggio del mouse sul grafico. Viene utilizzato solo quando il grafico ha un singolo set di dati.

Required?                    false
Position?                    named
Default value                @("#807B210C")
Accept pipeline input?       false
Aliases
Accept wildcard characters?  false

-HoverBorderColor <DashboardColor[]>

Il colore del bordo al passaggio del mouse sul grafico. Viene utilizzato solo quando il grafico ha un singolo set di dati.

Required?                    false
Position?                    named
Default value                @("#FF7B210C")
Accept pipeline input?       false
Aliases
Accept wildcard characters?  false

-BorderWidth

La larghezza del bordo del grafico. Viene utilizzata solo quando il grafico ha un singolo set di dati.

Required?                    false
Position?                    named
Default value                1
Accept pipeline input?       false
Aliases
Accept wildcard characters?  false

Parametri comuni

Questo cmdlet supporta i parametri comuni: Verbose, Debug, ErrorAction, ErrorVariable, WarningAction, WarningVariable, OutBuffer, PipelineVariable e OutVariable. Per maggiori informazioni, veda about_CommonParameters.

Output

Esempi

Esempio 1: grafico a barre

$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 grafico a barre con una proprietà per i dati e una per l'etichetta.

Esempio 2: grafico a bolle

$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 grafico a bolle con una proprietà per i dati.

Esempio 3: grafico a linee

$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 grafico a linee con una proprietà per i dati e una per l'etichetta.

Esempio 4: grafico ad anello

$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 grafico ad anello con una proprietà per i dati e una per l'etichetta.

Esempio 5: grafico a torta

$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 grafico a torta con una proprietà per i dati e una per l'etichetta.

Esempio 6: grafico radar

$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 grafico radar con una proprietà per i dati e una per l'etichetta.

Esempio 7: colori personalizzati

$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 grafico a barre con una proprietà per i dati e una per l'etichetta e alcuni colori configurati.

Esempio 8: evento di clic

$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 grafico a barre con una proprietà per i dati e una per l'etichetta e un evento di clic.

Esempio 9: più set di dati

$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 grafico a linee con più set di dati.

Esempio 10: aggiornamento automatico

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 grafico a barre che si aggiorna automaticamente ogni secondo.

Esempio 11: opzioni ChartJS

$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'
}

È possibile utilizzare le opzioni ChartJS definite come hashtable per configurare ulteriormente il grafico. Per maggiori informazioni, veda la documentazione di ChartJS.