New-UDChartJS

Übersicht

Erstellt ein neues ChartJS-Diagramm.

Syntax

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

Beschreibung

Erstellt ein neues ChartJS-Diagramm.

Parameter

-Id

Die ID der Komponente. Standardmäßig ist dies eine zufällige GUID.

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

-DatasetLabel

Die Bezeichnung für das Dataset. Diese wird nur verwendet, wenn das Diagramm ein einzelnes Dataset hat.

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

-Type

Der Typ des zu erstellenden Diagramms. Gültige Werte sind bar, line, area, doughnut, radar, pie und bubble.

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

-Options

Eine Hashtable mit Optionen, die an das Diagramm übergeben werden.

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

-OnClick

Ein Skriptblock, der ausgeführt wird, wenn auf das Diagramm geklickt wird. $EventData enthält das Element, auf das geklickt wurde.

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

-Data

Die für das Diagramm zu verwendenden Daten. Dies ist ein Array von Objekten oder Hashtables.

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

Wird beim Definieren mehrerer Datasets verwendet. Dies ist ein Array von Hashtables. Verwenden Sie das Cmdlet New-UDChartJSDataset, um das Dataset zu erstellen.

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

-DataProperty

Die für die Daten zu verwendende Eigenschaft. Diese wird nur verwendet, wenn das Diagramm ein einzelnes Dataset hat.

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

-LabelProperty

Die für die Bezeichnung zu verwendende Eigenschaft. Diese wird nur verwendet, wenn das Diagramm ein einzelnes Dataset hat.

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

-BackgroundColor <DashboardColor[]>

Die Hintergrundfarbe des Diagramms. Diese wird nur verwendet, wenn das Diagramm ein einzelnes Dataset hat.

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

-BorderColor <DashboardColor[]>

Die Rahmenfarbe des Diagramms. Diese wird nur verwendet, wenn das Diagramm ein einzelnes Dataset hat.

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

-HoverBackgroundColor <DashboardColor[]>

Die Hintergrundfarbe des Diagramms beim Hover. Diese wird nur verwendet, wenn das Diagramm ein einzelnes Dataset hat.

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

-HoverBorderColor <DashboardColor[]>

Die Rahmenfarbe des Diagramms beim Hover. Diese wird nur verwendet, wenn das Diagramm ein einzelnes Dataset hat.

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

-BorderWidth

Die Rahmenbreite des Diagramms. Diese wird nur verwendet, wenn das Diagramm ein einzelnes Dataset hat.

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

Allgemeine Parameter

Dieses Cmdlet unterstützt die allgemeinen Parameter: Verbose, Debug, ErrorAction, ErrorVariable, WarningAction, WarningVariable, OutBuffer, PipelineVariable und OutVariable. Weitere Informationen finden Sie unter about_CommonParameters.

Ausgaben

Beispiele

Beispiel 1: Balkendiagramm

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

Ein Balkendiagramm mit einer Daten- und einer Bezeichnungseigenschaft.

Beispiel 2: Blasendiagramm

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

Ein Blasendiagramm mit einer Dateneigenschaft.

Beispiel 3: Liniendiagramm

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

Ein Liniendiagramm mit einer Daten- und einer Bezeichnungseigenschaft.

Beispiel 4: Ringdiagramm

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

Ein Ringdiagramm mit einer Daten- und einer Bezeichnungseigenschaft.

Beispiel 5: Kreisdiagramm

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

Ein Kreisdiagramm mit einer Daten- und einer Bezeichnungseigenschaft.

Beispiel 6: Netzdiagramm

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

Ein Netzdiagramm mit einer Daten- und einer Bezeichnungseigenschaft.

Beispiel 7: Benutzerdefinierte Farben

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

Ein Balkendiagramm mit einer Daten- und einer Bezeichnungseigenschaft sowie einigen konfigurierten Farben.

Beispiel 8: Klick-Ereignis

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

Ein Balkendiagramm mit einer Daten- und einer Bezeichnungseigenschaft sowie einem Klick-Ereignis.

Beispiel 9: Mehrere Datasets

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

Ein Liniendiagramm mit mehreren Datasets.

Beispiel 10: Automatische Aktualisierung

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
}

Ein Balkendiagramm, das sich jede Sekunde automatisch aktualisiert.

Beispiel 11: ChartJS-Optionen

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

Sie können ChartJS-Optionen, die als Hashtable definiert sind, verwenden, um das Diagramm weiter zu konfigurieren. Weitere Informationen finden Sie in der ChartJS-Dokumentation.