octobre 30, 2025

Graphiques financiers cryptographiques dans les applications .NET MAUI

Dans un marché volatil comme celui des cryptomonnaies, les utilisateurs ont besoin d’une visualisation des données en temps réel, facile à lire. Le tableau financier .NET MAUI peut vous aider !

Pour moi, la technologie est comme « une boule de neige qui ne cesse de grandir », surtout ces dernières années – et c’est extrêmement bien pour nous ! Chaque avancée est conçue pour qu’en tant que développeurs, nous puissions faciliter la vie des utilisateurs grâce à nos applications, en particulier dans un monde en constante évolution et où de nouveaux besoins surgissent toujours.

Un exemple clair de ceci est celui des applications qui fonctionnent avec crypto. C’est un espace où les utilisateurs prennent de nombreuses décisions importantes, car l’argent est en jeu. Alors, qu’est-ce qui compte le plus ici ?

Que c’est un fiable application.
Et un transparent un.

L’expérience utilisateur est donc la clé de la croissance de ce type d’application.

Et en parlant de transparence, le marché des cryptomonnaies est extrêmement volatil. C’est pourquoi les utilisateurs doivent visualiser en temps réel l’évolution des tendances et, en fonction de ce qu’ils voient, analyser et décider d’acheter ou non.

Imaginez maintenant que ces informations soient très lourdes à lire… juste un tableau brut de données non traitées, où les utilisateurs devraient encore effectuer des calculs supplémentaires avant de prendre des décisions claires. Cela pourrait les rendre incapables d’interpréter rapidement le comportement du marché et donc de prendre des décisions agiles, ce qui n’est certainement pas une bonne chose.

C’est pourquoi un tableau financier s’intègre parfaitement dans ce genre d’application, car elle :

Rend les informations plus attrayantes et compréhensibles pour la prise de décision.
Permet interactivité avec les données présentées.
Gardez votre application plus propre et plus élégante, puisque vous n’avez pas besoin d’afficher une surcharge de données brutes.

C’est pourquoi aujourd’hui, vous allez approfondir une option super intéressante : le Graphique financier de .NET MAUI. Explorons-le ensemble !

Qu’est-ce que le tableau financier Telerik pour .NET MAUI ?

Le graphique financier .NET MAUI est un composant qui fournit des visualisations financières d’une manière à la fois compréhensible et intuitive pour les utilisateurs. Il est principalement utilisé pour suivre cours des actions et analyser modèles de changements de prix au fil du temps.

Voici un exemple de l’apparence de ce composant :

Tableau financier pour .NET MAUI

✍️ Ce contrôle fait partie de l’interface utilisateur Progress Telerik pour Bibliothèque de composants .NET MAUIqui propose plus de 60 composants d’interface utilisateur conçus par des professionnels, idéaux pour créer des applications multiplateformes modernes avec une expérience utilisateur raffinée.

Types de graphiques et indicateurs financiers

Alors que le Tableau financier fournit la base pour visualiser les données du marché, indicateurs financiers entrent également en jeu.

Les graphiques se concentrent sur l’affichage des mouvements de prix bruts.
Alors que indicateurs appliquer des formules à ces prix pour révéler les tendances, la dynamique ou la volatilité.

La combinaison des deux transforme les données brutes en informations exploitablesdonnant à l’utilisateur une vue plus complète du marché. Regardons-les de plus près.

Graphique de la série .NET OHLC

OHLC vient des initiales Ouvert, Haut, Bas, Fermer. Il condense toutes les informations clés sur le comportement d’un actif sur une période donnée en un seul élément. C’est l’un des formats les plus utilisés en analyse de marché.

Pour mieux le comprendre visuellement, chaque point de données dans un Graphique OHLC s’affiche avec une combinaison de lignes et de marques :

UN ligne verticale cela va du prix le plus bas atteint au prix le plus élevé sur la période.
UN marque horizontale sur le côté gauche de la ligne indiquant le prix d’ouverture.
UN marque horizontale sur le côté droit de la ligne indiquant le cours de clôture.

Cela permet à un seul chiffre de montrer la fourchette complète des prix (haut et bas) et le prix exact auquel la période a commencé et s’est terminée.

En résumé, ces calculs vous permettent de :

Savoir si le prix a clôturé au-dessus ou en dessous de l’ouverture
Voir dans quelle mesure un actif a varié entre le maximum et le minimum (volatilité)
Identifier les modèles de comportement

Le Graphique de la série .NET OHLC est mis en œuvre au sein d’un Graphique RadCartésien. Ce contrôle attend les quatre valeurs (ouverture, haut, bas, fermeture) comme paramètres et, en fonction de celles-ci, il dessine la figure !

Un exemple de son code d’implémentation principal serait le suivant :

<telerik:RadCartesianChart PaletteName="Light" 
SelectionPaletteName="LightSelected" 
BackgroundColor="White" > 
    <telerik:RadCartesianChart.BindingContext> 
	    <local:SeriesOhlcViewModel /> 
	    </telerik:RadCartesianChart.BindingContext> 
		    <telerik:RadCartesianChart.HorizontalAxis> 
		    <telerik:DateTimeContinuousAxis LineColor="#A9A9A9" 
		    LabelFitMode="Rotate" 
		    LabelFormat="MMM" 
		    PlotMode="BetweenTicks" 
		    MajorStepUnit="Month"/> 
		    </telerik:RadCartesianChart.HorizontalAxis> 
		    <telerik:RadCartesianChart.VerticalAxis> 
		    <telerik:NumericalAxis LineColor="#A9A9A9" 
	    MajorTickBackgroundColor="#A9A9A9" /> 
    </telerik:RadCartesianChart.VerticalAxis> 
    <telerik:RadCartesianChart.Series> 
	    <telerik:OhlcSeries CategoryBinding="Category" 
	    OpenBinding="Open" 
	    HighBinding="High" 
	    LowBinding="Low" 
	    CloseBinding="Close" 
	    ItemsSource="{Binding SeriesData}" /> 
    </telerik:RadCartesianChart.Series> 
</telerik:RadCartesianChart>

⚠️ Dans cet exemple, j’ai uniquement ajouté l’implémentation en XAML. N’oubliez pas que vous devez également créer vos modèles.

Et visuellement, cela donnerait ceci :

Série OHLC

Série de chandeliers graphiques .NET MAUI

Il s’agit d’une autre manière très populaire de représenter les données financières d’un actif. C’est l’une des méthodes les plus couramment utilisées par commerçants et analystes techniquescar cela leur permet de comprendre rapidement les hauts et les bas du marché, d’identifier les tendances et de détecter les modèles graphiques classiques. Fait amusant, son nom vient de sa ressemblance visuelle avec une bougie.

Tout comme le Série OHLCun chandelier utilise quatre valeurs fondamentales du marché : Ouvert, haut, bas et fermé.

Avec ces valeurs, le graphique représente :

Le corps de la bougie (rectangle) : Montre la différence entre l’ouverture et la fermeture
Les mèches (traits fins au dessus et en dessous) : Afficher les prix les plus élevés et les plus bas atteints au cours de la période

Vous pouvez interpréter ce graphique comme suit :

Si le cours de clôture est supérieur au cours d’ouverture → la bougie est généralement affichée en vert (ou creuse), indiquant que le prix a augmenté.
Si le cours de clôture est inférieur au cours d’ouverture → la bougie est généralement affichée en rouge (ou remplie), indiquant que le prix a baissé.

Tout comme OHLC, ceci est également mis en œuvre dans un Graphique RadCartésien. Dans le code, son implémentation dans XAML ressemblerait à quelque chose comme ceci :

<telerik:RadCartesianChart PaletteName="Light" 
    SelectionPaletteName="LightSelected" 
    BackgroundColor="White" > 
	    <telerik:RadCartesianChart.BindingContext> 
		    <local:SeriesOhlcViewModel /> 
		    </telerik:RadCartesianChart.BindingContext> 
		    <telerik:RadCartesianChart.HorizontalAxis> 
		    <telerik:DateTimeContinuousAxis LineColor="#A9A9A9" 
		    LabelFitMode="Rotate" 
		    LabelFormat="MMM" 
		    PlotMode="BetweenTicks" 
		    MajorStepUnit="Month"/> 
		    </telerik:RadCartesianChart.HorizontalAxis> 
		    <telerik:RadCartesianChart.VerticalAxis> 
		    <telerik:NumericalAxis LineColor="#A9A9A9" 
		    MajorTickBackgroundColor="#A9A9A9" /> 
		    </telerik:RadCartesianChart.VerticalAxis> 
	    <telerik:RadCartesianChart.Series> 
		    <telerik:CandlestickSeries CategoryBinding="Category" 
		    OpenBinding="Open" 
		    HighBinding="High" 
		    LowBinding="Low" 
		    CloseBinding="Close" 
		    ItemsSource="{Binding SeriesData}" /> 
    </telerik:RadCartesianChart.Series> 
</telerik:RadCartesianChart>

⚠️ Dans cet exemple, j’ai uniquement ajouté votre implémentation en XAML. N’oubliez pas que vous devez également créer vos modèles.

Et visuellement, cela donnerait ceci :

Série de chandeliers

Graphique .NET MAUI Indicateurs financiers

Ceux-ci sont utilisés pour suivre les cours des actions et les tendances des changements de prix au fil du temps. Le indicateurs financiers utilisez également le Graphique RadCartésienvous devez donc les ajouter de la même manière que vous ajoutez toute autre série cartésienne.

Lors de la configuration d’indicateurs financiers dans un RadCartesianChart, il existe deux groupes principaux :

Indicateurs basés sur la catégorie + une valeur unique (généralement Close) et une ou plusieurs périodes : Ceux-ci vous permettent de mesurer tendances, dynamique et volatilité à partir du cours de clôture et des périodes définies, et elles sont les suivantes :

OscillatorIndicator, RateOfChangeIndicator, RelativeStrengthIndexIndicator, TrixIndicator, WeightedMovingAverageIndicator, ExponentialMovingAverageIndicator, ExponentialMovingAverageIndicator, AdaptiveMovingAverageKaufmanIndicator, AdaptiveMovingAverageKaufmanIndicator, BollingerBandsIndicator, BollingerBandsIndicator, RelativeMomentumIndexIndicator, MacdIndicator

Indicateurs basés sur la catégorie + valeurs Haut/Bas/Clôture et aucun, une ou plusieurs périodes : Ceux-ci se concentrent sur volatilité et oscillateurs qui comparent les prix de clôture aux fourchettes de prix, et ce sont les suivants :

AverageTrueRangeIndicator, CommodityChannelIndexIndicator, StochasticFastIndicator, StochasticSlowIndicator, TrueRangeIndicator, UltimateOscillatorIndicator

Dans le code, son implémentation en XAML ressemblerait à ceci :

<telerik:RadCartesianChart PaletteName="Light" 
    SelectionPaletteName="LightSelected" 
    BackgroundColor="White" > 
	    <telerik:RadCartesianChart.BindingContext> 
	    <local:ViewModel /> 
		    </telerik:RadCartesianChart.BindingContext> 
		    <telerik:RadCartesianChart.HorizontalAxis> 
		    <telerik:DateTimeContinuousAxis LineColor="#A9A9A9" 
		    LabelFitMode="Rotate" 
		    LabelFormat="dd/MM" 
		    PlotMode="BetweenTicks" 
		    MajorStep="2" 
		    MajorStepUnit="Day"/> 
		    </telerik:RadCartesianChart.HorizontalAxis> 
		    <telerik:RadCartesianChart.VerticalAxis> 
	    <telerik:NumericalAxis LineColor="#A9A9A9" 
	    Minimum="320" 
	    Maximum="350" 
	    MajorTickBackgroundColor="#A9A9A9" /> 
		    </telerik:RadCartesianChart.VerticalAxis> 
		    <telerik:RadCartesianChart.Series> 
		    <telerik:OhlcSeries CategoryBinding="Category" 
		    DisplayName="AppleStocks-OHLC" 
		    OpenBinding="Open" 
		    HighBinding="High" 
		    LowBinding="Low" 
		    CloseBinding="Close" 
		    ItemsSource="{Binding SeriesData}"/> 
		    <telerik:ExponentialMovingAverageIndicator CategoryBinding="Category" 
		    DisplayName="EMA 7days" 
			    ValueBinding="Close" 
			    Period="7" 
			    StrokeThickness="1" 
			    Stroke="DarkGreen" 
		    ItemsSource="{Binding SeriesData}"/>
		    <telerik:ExponentialMovingAverageIndicator CategoryBinding="Category" 
		    DisplayName="EMA 14days" 
			    ValueBinding="Close" 
			    Period="14" 
			    StrokeThickness="1" 
			    Stroke="DarkOrange" 
		    ItemsSource="{Binding SeriesData}"/> 
    </telerik:RadCartesianChart.Series> 
</telerik:RadCartesianChart>

Et visuellement, cela donnerait ceci :

Graphique RadCartésien

Prise en charge de la légende

Le Tableau financier facilite également l’ajout de descriptions pour les séries visualisées dans le contrôle. Ceci est particulièrement utile lorsque vous avez plusieurs séries dans le même graphique, permettant aux utilisateurs d’identifier rapidement ce que représente chaque ligne ou chiffre, rendant le graphique plus clair et plus facile à interpréter.

Comment l’utiliser

Regardons un exemple utilisant un Graphique à secteurs:

Initialiser un RadLegend objet et liez-le à un type de graphique (PieChart dans notre exemple). Cela se fait à travers le LegendProvider propriété.

<telerik:RadPieChart x:Name="pieChart" HeightRequest="300"> 
  <telerik:RadCartesianChart.BindingContext> 
   <local:ViewModel /> 
  </telerik:RadCartesianChart.BindingContext> 
  <telerik:RadPieChart.Series> 
    <telerik:PieSeries DisplayName="Value" LegendTitleBinding="Category" ItemsSource="{Binding Data1}" ValueBinding="Value"/> 
  </telerik:RadPieChart.Series> 
 </telerik:RadPieChart> 
 <telerik:RadLegend HeightRequest="200" 
 LegendItemFontColor="DarkGreen" 
 LegendItemFontSize="20" 
LegendProvider="{x:Reference Name=pieChart}"/>

Définir un ViewModel avec des collections de données catégorielles qui alimentent la série de graphiques.

public class ViewModel
  { 
    public ViewModel() 
    { 
	   this.Data1 = GetCategoricalData(); 
	   this.Data2 = GetCategoricalData2(); 
	   this.Data3 = GetCategoricalData3(); 
    }
        
    public ObservableCollection<CategoricalData> Data1 { get; set; }
    public ObservableCollection<CategoricalData> Data2 { get; set; }
    public ObservableCollection<CategoricalData> Data3 { get; set; }
        
    private static ObservableCollection<CategoricalData> GetCategoricalData()
    {
      var data = new ObservableCollection<CategoricalData> { 
	      new CategoricalData { Category = "A", Value = 0.63 }, 
	      new CategoricalData { Category = "B", Value = 0.85 },
	      new CategoricalData { Category = "C", Value = 1.05 },
	      new CategoricalData { Category = "D", Value = 0.96 },
	      new CategoricalData { Category = "E", Value = 0.78 },
      };
      return data;
    }
        
    private static ObservableCollection<CategoricalData> GetCategoricalData2()
    {
      var data = new ObservableCollection<CategoricalData> {
	      new CategoricalData { Category = "A", Value = 0.13 },
	      new CategoricalData { Category = "B", Value = 0.35 },
	      new CategoricalData { Category = "C", Value = 0.55 },
	      new CategoricalData { Category = "D", Value = 0.46 },
	      new CategoricalData { Category = "E", Value = 0.28 },
      };
      return data;
    }
        
    private static ObservableCollection<CategoricalData> GetCategoricalData3()
    {
      var data = new ObservableCollection<CategoricalData> { 
        new CategoricalData { Category = "A", Value = 1.63 }, 
        new CategoricalData { Category = "B", Value = 1.85 }, 
        new CategoricalData { Category = "C", Value = 2.05 }, 
        new CategoricalData { Category = "D", Value = 1.96 }, 
        new CategoricalData { Category = "E", Value = 1.78 }, 
      }; 
      return data; 
    } 
 }

Chaque série peut avoir un DisplayName ou un LegendTitleBindingqui apparaîtront comme éléments dans la légende.

Et vous aurez un résultat du type suivant :

Exemple de graphique à secteurs

Annotations

Les annotations sont très utiles lorsque vous devez attirer l’attention de l’utilisateur sur un point de données ou une zone spécifique dans un graphique (par exemple, marquer un pic inhabituel), et vous pouvez également les utiliser dans ce contrôle ! 😎

Le graphique prend en charge les types d’annotations suivants :

➖ Annotation CartesianGridLine

Il s’agit d’une annotation qui trace une ligne droite (verticale ou horizontale) sur l’ensemble du graphique pour marquer une valeur spécifique sur l’axe cartésien.

Il offre les fonctionnalités suivantes :

Axe: Doit être explicitement associé à un axe cartésien horizontal ou vertical
Valeur: Spécifie le point exact sur l’axe associé où la ligne est tracée

Voyons un exemple de code. Tout d’abord, voyons un exemple de ViewModel :

public class ViewModel 
{ 
    public ObservableCollection<CategoricalData> Data { get; set; } 
    public double Threshold { get; set; }
     
public ViewModel() 
{ 
    this.Data = GetCategoricalData(); 
    this.Threshold = this.Data.Average(data => data.Value); 
}
 
private static ObservableCollection<CategoricalData> GetCategoricalData() 
{ 
    var data = new ObservableCollection<CategoricalData> 
    { 
    new CategoricalData { Category = "Greenings", Value = 21 }, 
    new CategoricalData { Category = "Perfecto", Value = 18 }, 
    new CategoricalData { Category = "NearBy", Value = 44 }, 
    new CategoricalData { Category = "Family", Value = 77 }, 
    new CategoricalData { Category = "Fresh", Value = 34 }, 
}; 
return data; 
} 
}

Et puis le RadChart en XAML :

<telerik:RadCartesianChart> 
	    <telerik:RadCartesianChart.BindingContext> 
    <local:ViewModel /> 
	    </telerik:RadCartesianChart.BindingContext> 
	    <telerik:RadCartesianChart.HorizontalAxis> 
	    <telerik:CategoricalAxis LabelFitMode="MultiLine" /> 
	    </telerik:RadCartesianChart.HorizontalAxis> 
	    <telerik:RadCartesianChart.VerticalAxis> 
	    <telerik:NumericalAxis x:Name="verticalAxis" /> 
	    </telerik:RadCartesianChart.VerticalAxis> 
	    <telerik:RadCartesianChart.Series> 
	    <telerik:BarSeries ValueBinding="Value" 
	    CategoryBinding="Category" 
	    ItemsSource="{Binding Data}" /> 
	    </telerik:RadCartesianChart.Series> 
	    <telerik:RadCartesianChart.Annotations>
	    <telerik:CartesianGridLineAnnotation Stroke="#0E72F6"
	    StrokeThickness="2" 
	    Axis="{x:Reference verticalAxis}" 
	    Value="{Binding Threshold}"> 
	    <telerik:CartesianGridLineAnnotation.DashArray> 
		    <x:Array Type="{x:Type x:Double}"> 
		    <x:Double>4.0</x:Double> 
		    <x:Double>2.0</x:Double> 
	    </x:Array> 
	    </telerik:CartesianGridLineAnnotation.DashArray> 
	    </telerik:CartesianGridLineAnnotation> 
    </telerik:RadCartesianChart.Annotations> 
</telerik:RadCartesianChart>

Et vous aurez un résultat du type suivant :

Exemple d'annotation CartesianGridLineAnnotation

➖ Annotation CartesianPlotBand

Il s’agit d’une annotation qui dessine une bande horizontale ou verticale sur le graphique pour mettre en évidence une plage spécifique sur l’axe cartésien.

Il offre les fonctionnalités suivantes :

Axe: Doit être explicitement associé à un axe cartésien horizontal ou vertical
Depuis: La valeur de départ de la bande de tracé
À: La valeur finale de la bande de tracé
Remplir: Définit la couleur de remplissage de la bande

Voyons d’abord un exemple de code d’un ViewModel :

public class ViewModel 
{ 
public ObservableCollection<CategoricalData> Data { get; set; } 
public double StartThreshold { get; private set; } 
public double EndThreshold { get; private set; }
 
public ViewModel() 
{ 
    this.Data = GetCategoricalData(); 
    var threshold = this.Data.Average(data => data.Value); 
    this.StartThreshold = threshold * 0.9; 
    this.EndThreshold = threshold * 1.1; 
} 

private static ObservableCollection<CategoricalData> GetCategoricalData() 
{ 
var data = new ObservableCollection<CategoricalData> 
{ 
    new CategoricalData { Category = "Greenings", Value = 66 }, 
    new CategoricalData { Category = "Perfecto", Value = 19 }, 
    new CategoricalData { Category = "NearBy", Value = 92 }, 
    new CategoricalData { Category = "Family", Value = 23 }, 
    new CategoricalData { Category = "Fresh", Value = 56 }, 
}; 
return data; 
} 
}

Et puis le RadChart en XAML :

<telerik:RadCartesianChart> 
    <telerik:RadCartesianChart.BindingContext> 
    <local:ViewModel /> 
    </telerik:RadCartesianChart.BindingContext> 
    <telerik:RadCartesianChart.HorizontalAxis> 
    <telerik:CategoricalAxis LabelFitMode="MultiLine" 
    PlotMode="OnTicks" /> 
    </telerik:RadCartesianChart.HorizontalAxis> 
    <telerik:RadCartesianChart.VerticalAxis> 
    <telerik:NumericalAxis x:Name="verticalAxis" /> 
    </telerik:RadCartesianChart.VerticalAxis> 
    <telerik:RadCartesianChart.Series> 
    <telerik:LineSeries ValueBinding="Value" 
    CategoryBinding="Category" 
    ItemsSource="{Binding Data}" /> 
    </telerik:RadCartesianChart.Series> 
    <telerik:RadCartesianChart.Annotations> 
    <telerik:CartesianPlotBandAnnotation StrokeThickness="2" 
    Stroke="Green" 
    Fill="#2F66FF33" 
    Axis="{x:Reference verticalAxis}" 
    From="{Binding StartThreshold}" 
    To="{Binding EndThreshold}" /> 
    </telerik:RadCartesianChart.Annotations> 
</telerik:RadCartesianChart>

Et vous aurez un résultat du type suivant :

Exemple d'annotation CartesianPlotBandAnnotation

Conclusion

✨Ça y est ! En quelques minutes seulement, vous avez appris des informations précieuses sur le composant Telerik UI pour .NET MAUI Financial Chart. C’est très utile et vous fait gagner du temps en effectuant des calculs de tendances complexes pour vous.

🚀 De cette façon, si vous l’implémentez dans vos applications, vos utilisateurs l’apprécieront car il apporte une grande valeur pour leur prise de décision.

Pour voir une application crypto complète, consultez le Démo de l’application .NET MAUI Crypto Tracker. C’est l’un des exemples d’applications .NET MAUI Des offres de progression pour accéder aux code pour l’exemple d’application de cryptographie.

Si vous avez des questions, n’hésitez pas à laisser un commentaire ou à nous contacter, je serai ravi de vous aider !

Rendez-vous dans le prochain ! 🙋‍♀️💚

Références

Les explications du code sont tirées de la documentation officielle.

Source link

Blog ARC Optimizer

octobre 30, 2025

Graphiques financiers cryptographiques dans les applications .NET MAUI

Qu’est-ce que le tableau financier Telerik pour .NET MAUI ?

Types de graphiques et indicateurs financiers

Graphique de la série .NET OHLC

Série de chandeliers graphiques .NET MAUI

Graphique .NET MAUI Indicateurs financiers

Prise en charge de la légende

Comment l’utiliser

Annotations

➖ Annotation CartesianGridLine

➖ Annotation CartesianPlotBand

Conclusion

Références

Articles similaires

Blog ARC Optimizer

Qu’est-ce que le tableau financier Telerik pour .NET MAUI ?

Types de graphiques et indicateurs financiers

Graphique de la série .NET OHLC

Série de chandeliers graphiques .NET MAUI

Graphique .NET MAUI Indicateurs financiers

Prise en charge de la légende

Comment l’utiliser

Annotations

➖ Annotation CartesianGridLine

➖ Annotation CartesianPlotBand

Conclusion

Références

Partager :

Articles similaires