Fermer

décembre 12, 2023

Améliorez vos graphiques financiers avec l’interface utilisateur Telerik pour Blazor

Améliorez vos graphiques financiers avec l’interface utilisateur Telerik pour Blazor


Avec la prise en charge de différents types de graphiques, de fonctionnalités interactives, d’options de personnalisation et de gestion des événements, Telerik UI for Blazor simplifie grandement les graphiques financiers.

Lorsqu’il s’agit de développer des graphiques financiers interactifs et visuellement attrayants dans vos applications Blazor, Progress Interface utilisateur Telerik pour Blazor est un outil puissant qui peut vous rendre la vie beaucoup plus facile. Cette bibliothèque complète fournit une gamme de fonctionnalités et de composants, notamment le Graphique et Graphique boursier des composants qui peuvent faire passer la visualisation de vos données financières au niveau supérieur.

Dans cet article de blog, nous explorerons comment l’interface utilisateur Telerik pour Blazor peut vous aider à améliorer vos graphiques financiers, et nous fournirons également quelques extraits de code pour vous aider à démarrer.

Introduction à l’interface utilisateur Telerik pour Blazor

Telerik UI for Blazor est une bibliothèque de composants d’interface utilisateur conçue pour simplifier le processus de création d’applications Web avec Blazor, le framework Web de Microsoft pour créer des applications Web interactives à l’aide de C#. Il fournit une large gamme de composants à des fins diverses, notamment des graphiques, des grilles, des entrées et bien plus encore. Dans cet article de blog, nous nous concentrerons sur les capacités graphiques de Telerik UI pour Blazor.

Premiers pas avec les graphiques Telerik

Pour démarrer avec les cartes Telerik dans Blazor, vous pouvez utiliser le <TelerikChart> et <TelerikStockChart> Mots clés. Ces deux balises vous permettent d’ajouter facilement des composants graphiques à n’importe quelle page Razor. Ils offrent une compatibilité avec différents types de données financières, ce qui les rend idéaux pour créer des graphiques financiers interactifs.

Types de séries de graphiques de base

Les deux <TelerikChart> et <TelerikStockChart> prend en charge une variété de types de séries, notamment :

Le <TelerikChart> va encore plus loin en proposant des types de séries supplémentaires, tels que :

Cette large gamme de types de graphiques pris en charge garantit que vous pouvez choisir celui qui convient le mieux à la visualisation de vos données financières.

Fonctionnalités interactives

L’une des fonctionnalités les plus remarquables de Telerik UI pour les graphiques Blazor est leur interactivité. Les deux types de graphiques vous permettent d’implémenter des fonctionnalités telles que panoramique et zoomer, offrant aux utilisateurs la possibilité de se concentrer sur des segments spécifiques des données. Cette fonctionnalité peut s’avérer particulièrement utile lorsqu’il s’agit de grands ensembles de données ou lorsque les utilisateurs doivent zoomer sur des périodes spécifiques dans des graphiques financiers.

Pour des graphiques financiers plus avancés, le Telerik Stock Chart présente le Composant Navigateur. Le composant Navigateur complète le graphique principal en fournissant un aperçu plus réduit de l’ensemble des données. Les utilisateurs peuvent l’utiliser pour naviguer facilement et sélectionner des domaines d’intérêt spécifiques dans le graphique principal. Cette fonctionnalité est particulièrement utile pour analyser les données financières historiques.

Options de personnalisation

L’interface utilisateur Telerik pour les graphiques Blazor offre des options de personnalisation étendues. Vous pouvez personnaliser les étiquettes sur les deux axes, modifier l’apparence des éléments du graphique et appliquer divers thèmes pour correspondre à l’apparence générale de votre application. De plus, vous pouvez utiliser info-bulles pour fournir aux utilisateurs des informations supplémentaires lorsqu’ils survolent des points de données sur le graphique.

Exploration des graphiques pour des informations plus approfondies

En plus des fonctionnalités polyvalentes déjà mentionnées, Telerik UI pour Blazor Chart offre un précieux Option d’exploration cela vous permet de fournir aux utilisateurs des informations plus approfondies sur leurs données financières. Avec DrillDown, vous pouvez permettre aux utilisateurs d’explorer de manière interactive des informations détaillées en cliquant sur des éléments spécifiques du graphique. Ceci est particulièrement utile lorsqu’il s’agit d’ensembles de données financières complexes où les utilisateurs peuvent vouloir se plonger dans des points de données ou des catégories spécifiques pour un examen plus approfondi.

Gestion des événements

Pour rendre vos graphiques financiers plus interactifs et réactifs, l’interface utilisateur Telerik pour les graphiques Blazor est équipée de événements intégrés. Vous pouvez facilement répondre aux actions de l’utilisateur, telles que cliquer sur un point de données, en gérant ces événements dans votre code Blazor. Cela vous permet de créer des expériences de cartographie financière dynamiques et conviviales.

Extraits de code pour commencer

Examinons quelques extraits de code pour montrer comment démarrer avec Telerik UI pour les graphiques Blazor. Vous pouvez explorer nos articles de documentation de démarrage pour obtenir des informations détaillées sur la façon de configurer nos composants dans votre côté client, du côté serveur et hybride (avec .NET MAUI) applications.

Ajout de l’interface utilisateur Telerik pour Blazor à votre projet

Tout d’abord, vous devez ajouter Telerik UI pour Blazor à votre projet Blazor. Vous pouvez le faire à l’aide du gestionnaire de packages NuGet :

dotnet add package Telerik.UI.for.Blazor

Utilisation de TelerikChart dans un composant Blazor

Utiliser <TelerikChart> dans votre composant Blazor, vous devrez ajouter l’espace de noms nécessaire et inclure le composant graphique dans votre page Razor :

@* The code snippet below illustrate the Open-High-Low-Close, also known as OHLC, series type. *@

@page "/financial-chart"
@using Telerik.Blazor.Components

<TelerikChart Height="400px" Width="640px">
    <ChartSeriesItems>
        <ChartSeries Type="@ChartSeriesType.OHLC"
                     Name="Chang"
                     Data="@ChartProduct1Data"
                     CategoryField="@(nameof(StockDataPoint.Date))"
                     OpenField="@nameof(StockDataPoint.Open)"
                     CloseField="@nameof(StockDataPoint.Close)"
                     HighField="@nameof(StockDataPoint.High)"
                     LowField="@nameof(StockDataPoint.Low)">
        </ChartSeries>
    </ChartSeriesItems>

    <ChartCategoryAxes>
        <ChartCategoryAxis Type="@ChartCategoryAxisType.Date" BaseUnit="@ChartCategoryAxisBaseUnit.Months">
        </ChartCategoryAxis>
    </ChartCategoryAxes>

    <ChartValueAxes>
        <ChartValueAxis>
            <ChartValueAxisLabels Format="{0:C4}"></ChartValueAxisLabels>
        </ChartValueAxis>
    </ChartValueAxes>
</TelerikChart>

@code {
    List<StockDataPoint> ChartProduct1Data { get; set; }

    protected override async Task OnInitializedAsync()
    {
        await GenerateChartData();
    }

    async Task GenerateChartData()
    {
        ChartProduct1Data = new List<StockDataPoint>()
        {
            new StockDataPoint(new DateTime(2019, 1, 1), 39.88m, 40.12m, 41.12m, 39.75m, 3584700),
            new StockDataPoint(new DateTime(2019, 2, 1), 41.62m, 40.12m, 41.69m, 39.81m, 2632000),
            new StockDataPoint(new DateTime(2019, 3, 1), 42m, 42.62m, 43.31m, 41.38m, 7631700),
            new StockDataPoint(new DateTime(2019, 4, 1), 42.25m, 43.06m, 43.31m, 41.12m, 4922200),
        };

        await Task.FromResult(ChartProduct1Data);
    }

    public class StockDataPoint
    {
        public StockDataPoint() { }

        public StockDataPoint(DateTime date, decimal open, decimal close, decimal high, decimal low, int volume)
        {
            Date = date;
            Open = open;
            Close = close;
            High = high;
            Low = low;
            Volume = volume;
        }
        public DateTime Date { get; set; }
        public decimal Open { get; set; }
        public decimal Close { get; set; }
        public decimal High { get; set; }
        public decimal Low { get; set; }
        public int Volume { get; set; }
    }
}

Nous avons maintenant créé notre premier graphique financier à l’aide du composant TelerikChart :

graphique ohlc

Configuration du graphique

Vous pouvez configurer le graphique en spécifiant le type de série, les données et d’autres options. Par exemple, pour créer un graphique en chandeliers de base :

@* The Candlestick chart series type *@

<TelerikChart Height="480px" Width="640px">
    <ChartSeriesItems>
        <ChartSeries Type="@ChartSeriesType.Candlestick"
                     Name="Chang"
                     Data="@ChartProduct1Data"
                     CategoryField="@(nameof(StockDataPoint.Date))"
                     OpenField="@nameof(StockDataPoint.Open)"
                     CloseField="@nameof(StockDataPoint.Close)"
                     HighField="@nameof(StockDataPoint.High)"
                     LowField="@nameof(StockDataPoint.Low)">
        </ChartSeries>
    </ChartSeriesItems>

    <ChartCategoryAxes>
        <ChartCategoryAxis Type="@ChartCategoryAxisType.Date" BaseUnit="@ChartCategoryAxisBaseUnit.Months">
        </ChartCategoryAxis>
    </ChartCategoryAxes>

    <ChartValueAxes>
        <ChartValueAxis>
            <ChartValueAxisLabels Format="{0:C4}"></ChartValueAxisLabels>
        </ChartValueAxis>
    </ChartValueAxes>
</TelerikChart>

@code {
    List<StockDataPoint> ChartProduct1Data { get; set; }

    protected override async Task OnInitializedAsync()
    {
        await GenerateChartData();
    }

    async Task GenerateChartData()
    {
        ChartProduct1Data = new List<StockDataPoint>()
        {
            new StockDataPoint(new DateTime(2019, 1, 1), 39.88m, 40.12m, 41.12m, 39.75m, 3584700),

            // Close is lower than Open, so the Down color is used
            new StockDataPoint(new DateTime(2019, 2, 1), 41.62m, 40.12m, 41.69m, 39.81m, 2632000),

            new StockDataPoint(new DateTime(2019, 3, 1), 42m, 42.62m, 43.31m, 41.38m, 7631700),
            new StockDataPoint(new DateTime(2019, 4, 1), 42.25m, 43.06m, 43.31m, 41.12m, 4922200),
        };

        await Task.FromResult(ChartProduct1Data);
    }

    public class StockDataPoint
    {
        public StockDataPoint() { }

        public StockDataPoint(DateTime date, decimal open, decimal close, decimal high, decimal low, int volume)
        {
            Date = date;
            Open = open;
            Close = close;
            High = high;
            Low = low;
            Volume = volume;
        }
        public DateTime Date { get; set; }
        public decimal Open { get; set; }
        public decimal Close { get; set; }
        public decimal High { get; set; }
        public decimal Low { get; set; }
        public int Volume { get; set; }
    }
}

Et voici notre premier graphique en chandeliers. C’est facile, n’est-ce pas ?

graphique en chandelier

Ajout d’interactivité

Pour rendre le graphique interactif, vous pouvez activer le panoramique et le zoom :

<TelerikChart>
    <ChartPannable Enabled="true"></ChartPannable>
    <ChartZoomable Enabled="true"></ChartZoomable>

    <ChartSeriesItems>
        <ChartSeries Type="ChartSeriesType.Column"
                     Name="Product 1"
                     Data="@Data"
                     Field="@nameof(ChartSeriesData.Product1Sales)"
                     CategoryField="@nameof(ChartSeriesData.Year)">
        </ChartSeries>

        <ChartCategoryAxes>
            <ChartCategoryAxis Min="1" Max="5">
                <ChartCategoryAxisLabels>
                    <ChartCategoryAxisLabelsRotation Angle="-45" />
                </ChartCategoryAxisLabels>
            </ChartCategoryAxis>
        </ChartCategoryAxes>
    </ChartSeriesItems>
</TelerikChart>

@code {
    List<ChartSeriesData> Data { get; set; } = new List<ChartSeriesData>();

    protected override Task OnInitializedAsync()
    {
        Data = ChartSeriesData.GenerateData();
        return base.OnInitializedAsync();
    }

    public class ChartSeriesData
    {
        public int Product1Sales { get; set; }
        public DateTime Year { get; set; }
        public string SegmentName { get; set; }

        public static List<ChartSeriesData> GenerateData()
        {
            List<ChartSeriesData> data = new List<ChartSeriesData>();

            for (int i = 1; i <= 10; i++)
            {
                var dataItem = new ChartSeriesData
                    {
                        Product1Sales = i,
                        Year = new DateTime(2000 + i, 3, i),
                        SegmentName = $"{i}"
                    };

                data.Add(dataItem);
            }

            return data;
        }
    }
}

graphique panoramique et zoom

Gestion des événements

Vous pouvez répondre aux interactions des utilisateurs en gérant les événements. Par exemple, pour gérer un événement de clic sur un point de données :

@* Get the Category from which the user clicked. *@

<TelerikChart OnSeriesClick="@OnSeriesClickHandler">

    <ChartTooltip Visible="true">
    </ChartTooltip>

    <ChartSeriesItems>
        <ChartSeries Type="ChartSeriesType.Bar" Name="Product 1" Data="@series1Data">
        </ChartSeries>
        <ChartSeries Type="ChartSeriesType.Bar" Name="Product 2" Data="@series2Data">
        </ChartSeries>
    </ChartSeriesItems>

    <ChartCategoryAxes>
        <ChartCategoryAxis Categories="@xAxisItems"></ChartCategoryAxis>
    </ChartCategoryAxes>

    <ChartTitle Text="Quarterly revenue per product"></ChartTitle>

    <ChartLegend Position="ChartLegendPosition.Right">
    </ChartLegend>
</TelerikChart>


<div>
   Clicked from: @logger
</div>

@code {
    public List<object> series1Data = new List<object>() { 10, 2, 5, 6 };
    public List<object> series2Data = new List<object>() { 5, 8, 2, 7 };
    public string[] xAxisItems = new string[] { "Q1", "Q2", "Q3", "Q4" };

    string logger = String.Empty;

    void OnSeriesClickHandler(ChartSeriesClickEventArgs args)
    {
        var category = args.Category.ToString();
        logger = category;
    }
}

Conclusion

Telerik UI pour Blazor fournit un ensemble d’outils robustes pour améliorer vos graphiques financiers dans les applications Blazor. Avec la prise en charge de différents types de graphiques, de fonctionnalités interactives, d’options de personnalisation et de gestion des événements, il vous permet de créer des visualisations de données financières attrayantes et informatives. Que vous créiez un outil d’analyse boursière, un tableau de bord financier ou toute autre application nécessitant des capacités graphiques, Telerik UI for Blazor est là pour vous.

L’intégration de Telerik UI pour Blazor dans votre projet est simple, et la documentation complète et le support communautaire facilitent encore plus l’exploitation de tout le potentiel de ces puissants composants graphiques.

Alors, pourquoi ne pas essayer et faire passer vos tableaux financiers au niveau supérieur avec Interface utilisateur Telerik pour Blazor? Vos utilisateurs et parties prenantes vous en remercieront. Bonne cartographie !

Essayez maintenant

Le meilleur outil 2023 pour ta croissance Instagram !



Source link

décembre 12, 2023