New-UDChartJS

Synopsis

Crée un nouveau graphique ChartJS.

Syntaxe

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

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

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

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

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

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

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.

Sorties

Exemples

Exemple 1 : Graphique à barres

$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

$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

$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

$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

$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

$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

$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

$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

$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

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

$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.