AIDE .NET

Livecharts C# (Comment ça marche pour les développeurs)

Name: IronPDF
Brand: Iron Software
Availability: InStock
Rating: 4.87 (307 reviews)

Kannapat Udonpant

avril 29, 2024

LiveCharts est une bibliothèque pour les développeurs .NET. LiveCharts permet de créer des graphiques dynamiques et magnifiques dans les applications C#. Cela signifie que vos graphiques sont actualisés automatiquement lorsque vos données changent. LiveCharts n'est pas réservé aux applications traditionnelles ; il prend en charge la Windows Presentation Foundation (WPF), ce qui en fait un outil polyvalent pour les applications de bureau.

Principales caractéristiques et avantages

Vous cherchez une réponse à vos besoins en matière de visualisation de données ? LiveCharts offre une solution complète avec un large éventail de fonctionnalités. Voici quelques points clés :

Animations Automatiques : Les graphiques s'animent automatiquement, se mettant à jour en douceur sans besoin de code supplémentaire, rendant vos visualisations de données plus attrayantes.
Support WPF : Vous pouvez utiliser LiveCharts dans les applications WPF, ce qui permet des interfaces utilisateur riches.
Haute Performance : Conçu pour améliorer la performance, la vitesse et l'efficacité, en particulier avec de grands ensembles de données.
Flexibilité : C'est simple, flexible, interactif et facile à utiliser dès le début, mais permet également des personnalisations complexes adaptées aux besoins de votre projet.
Graphiques interactifs : Les utilisateurs peuvent interagir avec les graphiques, améliorant l'exploration des données.
Large gamme de types de graphiques : Quels que soient vos besoins en matière de visualisation de données, LiveCharts propose un type de graphique adapté.
LiveCharts transforme des données complexes en représentations visuelles interactives et attrayantes. Sa facilité d'utilisation et sa flexibilité en font un outil puissant pour les développeurs. Grâce aux capacités des puissants LiveCharts, les développeurs peuvent transformer des données complexes en représentations visuelles interactives et attrayantes. Nous explorerons les fonctionnalités de LiveCharts et son intégration avec la bibliothèque IronPDF.

Premiers pas avec LiveCharts

La configuration de votre environnement de développement pour utiliser LiveCharts est simple, et l'accès à son code source améliore la personnalisation et la compréhension. Cette section vous guide à travers les étapes initiales et vous aide à créer votre premier graphique.

Mise en place de l'environnement

Pour utiliser LiveCharts, assurez-vous que Visual Studio est installé. Ensuite, ajoutez à votre projet le paquet LiveCharts, un paquet orienté conçu pour la visualisation dynamique des données. Vous pouvez le faire via le gestionnaire de paquets NuGet. Recherchez LiveCharts et installez la dernière version. Ce processus ajoute toutes les références nécessaires à votre projet.

Votre premier graphique avec LiveCharts

La création de votre premier graphique se fait en quelques étapes simples. Tout d'abord, ajoutez un contrôle graphique à l'interface utilisateur de votre application. Si vous utilisez WPF, vous pouvez le faire en XAML ou par programmation en C#.

Voici un exemple de base en XAML :

<lvc:CartesianChart Series="{Binding MySeries}"/>

<lvc:CartesianChart Series="{Binding MySeries}"/>

XML

Dans votre code C#, préparez les données pour votre graphique. Pour un graphique linéaire de base, vous aurez besoin d'une SeriesCollection. Vous pouvez remplir cette collection avec LineSeries, en définissant les Values sur vos points de données.

public SeriesCollection MySeries { get; set; }
public MainWindow()
{
    InitializeComponent();
    MySeries = new SeriesCollection
    {
        new LineSeries
        {
            Values = new ChartValues<double> { 4, 6, 5, 2, 7 }
        }
    };
    DataContext = this;
}

public SeriesCollection MySeries { get; set; }
public MainWindow()
{
    InitializeComponent();
    MySeries = new SeriesCollection
    {
        new LineSeries
        {
            Values = new ChartValues<double> { 4, 6, 5, 2, 7 }
        }
    };
    DataContext = this;
}

Public Property MySeries() As SeriesCollection
'INSTANT VB WARNING: The following constructor is declared outside of its associated class:
'ORIGINAL LINE: public MainWindow()
Public Sub New()
	InitializeComponent()
	MySeries = New SeriesCollection
		From {
			New LineSeries With {
				.Values = New ChartValues(Of Double) From {4, 6, 5, 2, 7}
			}
		}
	DataContext = Me
End Sub

Cet extrait de code crée un simple graphique linéaire. Il affiche une série de valeurs sur un graphique cartésien. Assurez-vous de définir le DataContext de votre fenêtre ou contrôle pour garantir que le graphique se lie à vos données.

En suivant ces étapes, vous disposerez d'un tableau de base. Ce n'est qu'un début. LiveCharts permet des visualisations de données beaucoup plus complexes et interactives.

Exploration des fonctionnalités de LiveCharts

LiveCharts ne se limite pas à l'affichage de données statiques. La véritable puissance de ces outils réside dans leur capacité à se mettre à jour en temps réel, à réagir aux changements de données et à offrir un large éventail de types de graphiques. Cette section se penche sur ces capacités et fournit des exemples pour vous aider à comprendre les concepts.

Comprendre la liaison des données et les mises à jour

La liaison de données est un concept fondamental de LiveCharts. Il permet à vos graphiques de refléter automatiquement les changements dans vos données. Cette fonction est particulièrement utile pour les applications qui utilisent des sources de données dynamiques.

Prenons l'exemple d'une application qui suit le cours des actions. Au fur et à mesure de l'arrivée de nouvelles données, vous souhaitez que votre graphique soit mis à jour. Avec LiveCharts, il suffit de mettre à jour la source de données. Le graphique détecte ces changements et les met à jour en conséquence.

Voici comment lier un graphique à une source de données :

var myValues = new ChartValues<double> { 3, 4, 6, 3, 2 };
var lineSeries = new LineSeries
{
    Values = myValues
};
mySeries.Add(lineSeries);
// When data changes
myValues.Add(5); // The chart updates automatically

var myValues = new ChartValues<double> { 3, 4, 6, 3, 2 };
var lineSeries = new LineSeries
{
    Values = myValues
};
mySeries.Add(lineSeries);
// When data changes
myValues.Add(5); // The chart updates automatically

Dim myValues = New ChartValues(Of Double) From {3, 4, 6, 3, 2}
Dim lineSeries As New LineSeries With {.Values = myValues}
mySeries.Add(lineSeries)
' When data changes
myValues.Add(5) ' The chart updates automatically

Livecharts C# (Comment cela fonctionne pour les développeurs) : Figure 1

Plongée dans les types de graphiques

LiveCharts prend en charge plusieurs types de graphiques, chacun adapté à différents types de besoins en matière de visualisation de données. Voici quelques exemples :

Série de lignes : Idéal pour afficher les tendances au fil du temps.
Diagramme en secteurs : Idéal pour montrer les proportions dans un ensemble de données.
Histogramme : Utile pour comparer des quantités entre différentes catégories.
Pour créer un graphique à secteurs, vous utiliseriez la classe PieSeries. Voici un exemple rapide :

public SeriesCollection MyPieSeries { get; set; }
public MainWindow()
{
    InitializeComponent();
    MyPieSeries = new SeriesCollection
    {
        new PieSeries
        {
            Values = new ChartValues<double> { 4, 6, 5 },
            Title = "Series 1"
        },
        new PieSeries
        {
            Values = new ChartValues<double> { 7, 8, 6 },
            Title = "Series 2"
        }
    };
    DataContext = this;
}

public SeriesCollection MyPieSeries { get; set; }
public MainWindow()
{
    InitializeComponent();
    MyPieSeries = new SeriesCollection
    {
        new PieSeries
        {
            Values = new ChartValues<double> { 4, 6, 5 },
            Title = "Series 1"
        },
        new PieSeries
        {
            Values = new ChartValues<double> { 7, 8, 6 },
            Title = "Series 2"
        }
    };
    DataContext = this;
}

Public Property MyPieSeries() As SeriesCollection
'INSTANT VB WARNING: The following constructor is declared outside of its associated class:
'ORIGINAL LINE: public MainWindow()
Public Sub New()
	InitializeComponent()
	MyPieSeries = New SeriesCollection
		From {
			New PieSeries With {
				.Values = New ChartValues(Of Double) From {4, 6, 5},
				.Title = "Series 1"
			},
			New PieSeries With {
				.Values = New ChartValues(Of Double) From {7, 8, 6},
				.Title = "Series 2"
			}
		}
	DataContext = Me
End Sub

Cet extrait de code met en place un diagramme circulaire de base avec deux séries de données. Comme l'exemple du graphique en ligne, il lie la PieSeries à la propriété Values.

Livecharts C# (Comment cela fonctionne pour les développeurs) : Figure 2

LiveCharts offre également une flexibilité et un contrôle sur l'apparence et le comportement de vos graphiques. Vous pouvez personnaliser presque tous les aspects, des couleurs et des étiquettes aux animations et à l'interactivité. Il est ainsi possible d'adapter les graphiques à l'aspect et à la convivialité de votre application.

Introduction à IronPDF

L'intégration de LiveCharts à IronPDF comble le fossé entre la visualisation dynamique des données et la génération de rapports statiques. IronPDF est une bibliothèque puissante pour C# qui permet aux développeurs de créer, manipuler et convertir des documents PDF par programmation.

La combinaison avec LiveCharts permet de créer des rapports PDF contenant vos graphiques interactifs. Cette section présente IronPDF et vous guide dans sa mise en place dans votre projet.

Pourquoi IronPDF ?

Les capacités de conversion de HTML en PDF d'IronPDF excellent là où d'autres bibliothèques PDF échouent, notamment dans sa capacité à rendre le HTML en PDF. Cette fonction est particulièrement utile lorsque vous travaillez avec LiveCharts, car vous pouvez convertir vos graphiques en canevas HTML, puis convertir ces canevas en documents PDF. IronPDF prend en charge l'intégralité des feuilles de style CSS3, JavaScript et HTML5, ce qui garantit que vos graphiques ont l'apparence voulue dans la sortie PDF.

LiveCharts avec IronPDF

Voici un exemple de code détaillé qui illustre le processus de création d'un graphique avec LiveCharts, son exportation, puis l'utilisation d'IronPDF pour générer un rapport PDF incluant ce graphique. Cet exemple suppose que vous avez des connaissances de base sur la façon de travailler avec LiveCharts et IronPDF.

Tout d'abord, assurez-vous que les paquets LiveCharts et IronPDF sont installés dans votre projet via NuGet.

Étape 1 : Générer le graphique avec LiveCharts

Commençons par créer un simple graphique linéaire à l'aide de LiveCharts. Par souci de simplicité, cet exemple se concentrera sur la génération du graphique et son enregistrement en tant qu'image, qui sera ensuite incluse dans notre PDF.

private void GenerateChartButton_Click(object sender, RoutedEventArgs e)
{
    CreateAndSaveChartImage();
}
public void CreateAndSaveChartImage()
{
    var seriesCollection = new SeriesCollection
{
    new LineSeries
    {
        Values = new ChartValues<double> { 4, 6, 5, 2, 7 },
        Title = "Sample Series"
        // Make sure to configure the series properties like color, point geometry, etc.
    }
};
    var chart = new CartesianChart
    {
        Series = seriesCollection,
        Width = 400,
        Height = 300,
        Background = Brushes.White
    };
    // Add chart to the UI
    ChartContainer.Child = chart;
    chart.Update(true, true); // Force chart redraw
    SaveChartToImage(chart);
}
private void SaveChartToImage(CartesianChart chart)
{
    // Ensure the chart layout is updated.
    chart.Measure(new Size(chart.Width, chart.Height));
    chart.Arrange(new Rect(0, 0, chart.Width, chart.Height));
    var renderTargetBitmap = new RenderTargetBitmap(
        (int)chart.ActualWidth,
        (int)chart.ActualHeight,
        96, // dpiX value
        96, // dpiY value
        PixelFormats.Pbgra32); // Pixel format
    renderTargetBitmap.Render(chart); // Render the chart to the bitmap
    var encoder = new PngBitmapEncoder();
    encoder.Frames.Add(BitmapFrame.Create(renderTargetBitmap));
    // Define the path where the chart will be saved
    string path = "chart.png";
    using (var stream = File.Create(path))
    {
        encoder.Save(stream);
    }
    MessageBox.Show($"Chart saved as {path}");
}

private void GenerateChartButton_Click(object sender, RoutedEventArgs e)
{
    CreateAndSaveChartImage();
}
public void CreateAndSaveChartImage()
{
    var seriesCollection = new SeriesCollection
{
    new LineSeries
    {
        Values = new ChartValues<double> { 4, 6, 5, 2, 7 },
        Title = "Sample Series"
        // Make sure to configure the series properties like color, point geometry, etc.
    }
};
    var chart = new CartesianChart
    {
        Series = seriesCollection,
        Width = 400,
        Height = 300,
        Background = Brushes.White
    };
    // Add chart to the UI
    ChartContainer.Child = chart;
    chart.Update(true, true); // Force chart redraw
    SaveChartToImage(chart);
}
private void SaveChartToImage(CartesianChart chart)
{
    // Ensure the chart layout is updated.
    chart.Measure(new Size(chart.Width, chart.Height));
    chart.Arrange(new Rect(0, 0, chart.Width, chart.Height));
    var renderTargetBitmap = new RenderTargetBitmap(
        (int)chart.ActualWidth,
        (int)chart.ActualHeight,
        96, // dpiX value
        96, // dpiY value
        PixelFormats.Pbgra32); // Pixel format
    renderTargetBitmap.Render(chart); // Render the chart to the bitmap
    var encoder = new PngBitmapEncoder();
    encoder.Frames.Add(BitmapFrame.Create(renderTargetBitmap));
    // Define the path where the chart will be saved
    string path = "chart.png";
    using (var stream = File.Create(path))
    {
        encoder.Save(stream);
    }
    MessageBox.Show($"Chart saved as {path}");
}

Imports System

Private Sub GenerateChartButton_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
	CreateAndSaveChartImage()
End Sub
Public Sub CreateAndSaveChartImage()
	Dim seriesCollection As New SeriesCollection
		From {
			New LineSeries With {
				.Values = New ChartValues(Of Double) From {4, 6, 5, 2, 7},
				.Title = "Sample Series"
			}
		}
	Dim chart = New CartesianChart With {
		.Series = seriesCollection,
		.Width = 400,
		.Height = 300,
		.Background = Brushes.White
	}
	' Add chart to the UI
	ChartContainer.Child = chart
	chart.Update(True, True) ' Force chart redraw
	SaveChartToImage(chart)
End Sub
Private Sub SaveChartToImage(ByVal chart As CartesianChart)
	' Ensure the chart layout is updated.
	chart.Measure(New Size(chart.Width, chart.Height))
	chart.Arrange(New Rect(0, 0, chart.Width, chart.Height))
	Dim renderTargetBitmap As New RenderTargetBitmap(CInt(Math.Truncate(chart.ActualWidth)), CInt(Math.Truncate(chart.ActualHeight)), 96, 96, PixelFormats.Pbgra32) ' Pixel format
	renderTargetBitmap.Render(chart) ' Render the chart to the bitmap
	Dim encoder = New PngBitmapEncoder()
	encoder.Frames.Add(BitmapFrame.Create(renderTargetBitmap))
	' Define the path where the chart will be saved
	Dim path As String = "chart.png"
	Using stream = File.Create(path)
		encoder.Save(stream)
	End Using
	MessageBox.Show($"Chart saved as {path}")
End Sub

Livecharts C# (Comment cela fonctionne pour les développeurs) : Figure 3

Étape 2 : Création d'un modèle HTML et insertion du graphique

Nous allons maintenant préparer notre contenu HTML, en intégrant le graphique que nous venons d'enregistrer en tant qu'image.

string htmlContent = @"
<html>
<body>
    <h1>Chart Report</h1>
    <img src='chart.png' alt='Chart'>
    <p>This is a report generated by combining LiveCharts and IronPDF.</p>
</body>
</html>";

string htmlContent = @"
<html>
<body>
    <h1>Chart Report</h1>
    <img src='chart.png' alt='Chart'>
    <p>This is a report generated by combining LiveCharts and IronPDF.</p>
</body>
</html>";

Dim htmlContent As String = "
<html>
<body>
    <h1>Chart Report</h1>
    <img src='chart.png' alt='Chart'>
    <p>This is a report generated by combining LiveCharts and IronPDF.</p>
</body>
</html>"

Étape 3 : Convertir HTML en PDF avec IronPDF

Enfin, nous utiliserons IronPDF pour convertir notre contenu HTML, y compris l'image graphique intégrée, en un document PDF.

using IronPdf;
public void CreatePdfReport(string htmlContent)
{
    var renderer = new ChromePdfRenderer();
    var pdf = renderer.RenderHtmlAsPdf(htmlContent);
    pdf.SaveAs("Report.pdf");
}

using IronPdf;
public void CreatePdfReport(string htmlContent)
{
    var renderer = new ChromePdfRenderer();
    var pdf = renderer.RenderHtmlAsPdf(htmlContent);
    pdf.SaveAs("Report.pdf");
}

Imports IronPdf
Public Sub CreatePdfReport(ByVal htmlContent As String)
	Dim renderer = New ChromePdfRenderer()
	Dim pdf = renderer.RenderHtmlAsPdf(htmlContent)
	pdf.SaveAs("Report.pdf")
End Sub

Assurez-vous de remplacer "chart.png" dans la chaîne htmlContent par le chemin correct de votre image de graphique si elle n'est pas dans le même répertoire que l'exécutable de votre application.

Cet exemple couvre un scénario de base pour illustrer le processus. En fonction de vos besoins spécifiques, il se peut que vous deviez adapter le code, notamment en ce qui concerne la manière dont vous traitez et sourcez les images pour vos graphiques.

Livecharts C# (Comment ça marche pour les développeurs) : Figure 4

Techniques et conseils avancés

Pour améliorer encore l'intégration :

Optimisez les performances : Pour les grands ensembles de données ou les graphiques complexes, envisagez d'optimiser les performances de LiveCharts et IronPDF afin de garantir des temps de chargement rapides et un fonctionnement fluide.
PDF interactifs : Bien que les PDF soient statiques, l'ajout d'hyperliens ou de signets peut améliorer la navigation, rendant les rapports plus conviviaux.
Style personnalisé : Utilisez CSS dans vos modèles HTML pour vous assurer que les rapports correspondent à votre image de marque ou aux directives de conception de votre entreprise.

Conclusion

Livecharts C# (Comment cela fonctionne pour les développeurs) : Figure 5

En conclusion, l'intégration de LiveCharts à IronPDF constitue une combinaison puissante pour les développeurs .NET qui souhaitent créer des graphiques dynamiques et visuellement attrayants et les incorporer dans des rapports PDF de qualité professionnelle. Cette synergie permet non seulement d'améliorer la présentation des données, mais aussi d'étendre l'utilité des applications en facilitant la génération de rapports statiques à partir d'ensembles de données dynamiques.

La capacité d'IronPDF à rendre HTML en PDF, avec une prise en charge complète de CSS3, JavaScript et HTML5, garantit une transition transparente de vos graphiques de l'écran à la page imprimée. Pour ceux qui souhaitent explorer cette fonctionnalité, IronPDF propose un essai gratuit d'IronPDF à partir de $749, offrant une solution économique pour la génération de rapports de haute qualité dans les applications .NET.

Kannapat Udonpant

Discutez avec l'équipe d'ingénierie maintenant

Ingénieur logiciel

Avant de devenir ingénieur logiciel, Kannapat a obtenu un doctorat en ressources environnementales à l'université d'Hokkaido au Japon. Tout en poursuivant ses études, Kannapat est également devenu membre du Vehicle Robotics Laboratory, qui fait partie du Department of Bioproduction Engineering (département d'ingénierie de la bioproduction). En 2022, il a mis à profit ses compétences en C# pour rejoindre l'équipe d'ingénieurs d'Iron Software, où il se concentre sur IronPDF. Kannapat apprécie son travail car il apprend directement auprès du développeur qui écrit la majeure partie du code utilisé dans IronPDF. Outre l'apprentissage par les pairs, Kannapat apprécie l'aspect social du travail chez Iron Software. Lorsqu'il n'écrit pas de code ou de documentation, Kannapat peut généralement être trouvé en train de jouer sur sa PS5 ou de revoir The Last of Us.

< PRÉCÉDENT
Masstransit C# (Comment ça marche pour les développeurs)

SUIVANT >
MS Graph .NET (Comment ça marche pour les développeurs)