Icône de message
Passer au contenu du pied de page
  1. IronPDF
  2. Blog IronPDF
  3. .NET Aide
  4. livecharts-csharp
.NET AIDE

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

Curtis Chau
Curtis Chau
Mis à jour:

LiveCharts est une bibliothèque pour les développeurs .NET. LiveCharts aide à créer des graphiques dynamiques et beaux dans les applications C#. Cela signifie que vos graphiques se rafraîchissent automatiquement lorsque vos données changent. LiveCharts n'est pas seulement pour les applications traditionnelles ; il prend en charge le Windows Presentation Foundation (WPF), ce qui en fait un outil polyvalent pour les applications de bureau.

Caractéristiques principales et avantages

Vous cherchez une réponse à vos besoins de visualisation de données ? LiveCharts offre une solution complète avec une large gamme 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 des applications WPF, permettant 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épart, 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 de visualisation de données, LiveCharts propose un type de graphique.

LiveCharts transforme des données complexes en représentations visuelles interactives et engageantes. Sa facilité d'utilisation et sa flexibilité en font un outil puissant pour les développeurs. Grâce aux capacités puissantes de 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.

Commencer avec LiveCharts

Mettre en place votre environnement de développement pour utiliser LiveCharts est simple, et accéder à 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.

Configurer votre environnement

Pour utiliser LiveCharts, assurez-vous d'avoir Visual Studio installé. Ajoutez ensuite le package LiveCharts, un package conçu pour la visualisation dynamique de données, à votre projet. Vous pouvez le faire via le gestionnaire de packages 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

Créer votre premier graphique implique quelques étapes simples. D'abord, ajoutez un contrôle de 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 des LineSeries, en définissant les Values sur vos points de données.

public SeriesCollection MySeries { get; set; }

public MainWindow()
{
    InitializeComponent();
    // Initialize the series collection and bind data
    MySeries = new SeriesCollection
    {
        new LineSeries
        {
            Values = new ChartValues<double> { 4, 6, 5, 2, 7 }
        }
    };
    // Bind the data context to this instance
    DataContext = this;
}
public SeriesCollection MySeries { get; set; }

public MainWindow()
{
    InitializeComponent();
    // Initialize the series collection and bind data
    MySeries = new SeriesCollection
    {
        new LineSeries
        {
            Values = new ChartValues<double> { 4, 6, 5, 2, 7 }
        }
    };
    // Bind the data context to this instance
    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()
	' Initialize the series collection and bind data
	MySeries = New SeriesCollection
		From {
			New LineSeries With {
				.Values = New ChartValues(Of Double) From {4, 6, 5, 2, 7}
			}
		}
	' Bind the data context to this instance
	DataContext = Me
End Sub
$vbLabelText   $csharpLabel

Cet extrait de code crée un simple graphique linéaire. Il affiche une série de valeurs sur un graphique cartésien. N'oubliez pas 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 aurez un graphique de base opérationnel. Ce n'est que le début. LiveCharts permet des visualisations de données beaucoup plus complexes et interactives.

Explorer les fonctionnalités de LiveCharts

LiveCharts ne se limite pas à afficher des données statiques. Sa véritable puissance réside dans sa capacité à se mettre à jour en temps réel, réagir aux changements de données, et offrir une large gamme de types de graphiques. Cette section plonge dans ces capacités, fournissant des exemples pour vous aider à comprendre les concepts.

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

La liaison de données est un concept central dans LiveCharts. Elle permet à vos graphiques de refléter automatiquement les changements dans vos données. Cette fonctionnalité est particulièrement utile pour les applications qui gèrent des sources de données dynamiques.

Considérez une application de suivi des prix des actions. Lorsque de nouvelles données arrivent, vous voulez que votre graphique se mette à jour. Avec LiveCharts, il vous suffit de mettre à jour la source de données, et le graphique détecte ces changements et se met à jour en conséquence.

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

var myValues = new ChartValues<double> { 3, 4, 6, 3, 2 };
var lineSeries = new LineSeries
{
    Values = myValues
};

// Add the line series to the series collection
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
};

// Add the line series to the series collection
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}

' Add the line series to the series collection
mySeries.Add(lineSeries)

' When data changes
myValues.Add(5) ' The chart updates automatically
$vbLabelText   $csharpLabel

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

Explorer les types de graphiques

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

  • Séries Linéaires : Idéal pour afficher des tendances au fil du temps.
  • Graphique en Secteurs : Idéal pour montrer les proportions dans un ensemble de données.
  • Graphique à Barres : Utile pour comparer des quantités entre différentes catégories.

Pour créer un graphique en secteurs, vous utiliseriez la classe PieSeries. Voici un exemple rapide :

public SeriesCollection MyPieSeries { get; set; }

public MainWindow()
{
    InitializeComponent();
    // Initialize the pie series collection and bind data
    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"
        }
    };
    // Bind the data context to this instance
    DataContext = this;
}
public SeriesCollection MyPieSeries { get; set; }

public MainWindow()
{
    InitializeComponent();
    // Initialize the pie series collection and bind data
    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"
        }
    };
    // Bind the data context to this instance
    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()
	' Initialize the pie series collection and bind data
	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"
			}
		}
	' Bind the data context to this instance
	DataContext = Me
End Sub
$vbLabelText   $csharpLabel

Cet extrait de code configure un graphique en secteurs de base avec deux séries de données. Comme l'exemple de graphique linéaire, il lie le PieSeries à la propriété Values.

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

LiveCharts offre également flexibilité et contrôle sur l'apparence et le comportement de vos graphiques. Vous pouvez personnaliser presque tous les aspects, des couleurs et étiquettes aux animations et à l'interactivité. Cela permet d'adapter parfaitement vos graphiques à l'apparence de votre application.

Introduction à IronPDF

L'intégration de LiveCharts avec 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 la création de rapports PDF contenant vos graphiques interactifs. Cette section introduit IronPDF et vous guide sur la façon de le configurer dans votre projet.

Pourquoi IronPDF ?

Les capacités de conversion HTML en PDF d'IronPDF excellent là où d'autres bibliothèques PDF échouent, en particulier dans sa capacité à rendre HTML en PDF. Cette fonctionnalité est particulièrement utile lorsqu'on travaille avec LiveCharts, car vous pouvez rendre vos graphiques sur des canaux HTML puis convertir ces canaux en documents PDF. IronPDF prend en charge complètement le CSS3, JavaScript et HTML5, garantissant que vos graphiques apparaissent comme prévu 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, de son exportation, puis de l'utilisation d'IronPDF pour générer un rapport PDF incluant ce graphique. Cet exemple suppose que vous avez une compréhension de base du travail avec LiveCharts et IronPDF.

D'abord, assurez-vous d'avoir installé les packages LiveCharts et IronPDF dans votre projet via NuGet.

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

Commençons par créer un simple graphique linéaire utilisant LiveCharts. Pour plus de simplicité, cet exemple se concentrera sur la génération du graphique et sur l'enregistrement sous forme d'image, qui sera ensuite incluse dans notre PDF.

private void GenerateChartButton_Click(object sender, RoutedEventArgs e)
{
    CreateAndSaveChartImage();
}

public void CreateAndSaveChartImage()
{
    // Create the series collection for the chart
    var seriesCollection = new SeriesCollection
    {
        new LineSeries
        {
            Values = new ChartValues<double> { 4, 6, 5, 2, 7 },
            Title = "Sample Series"
            // You can set other properties like color, point geometry, etc.
        }
    };

    // Initialize the CartesianChart
    var chart = new CartesianChart
    {
        Series = seriesCollection,
        Width = 400,
        Height = 300,
        Background = Brushes.White
    };

    // Add chart to the UI
    ChartContainer.Child = chart;

    // Force the chart to update
    chart.Update(true, true);

    // Save the rendered chart as an image
    SaveChartToImage(chart);
}

private void SaveChartToImage(CartesianChart chart)
{
    // Measure and arrange the chart to ensure correct layout
    chart.Measure(new Size(chart.Width, chart.Height));
    chart.Arrange(new Rect(0, 0, chart.Width, chart.Height));

    // Create a render target bitmap and render the chart on it
    var renderTargetBitmap = new RenderTargetBitmap(
        (int)chart.ActualWidth, (int)chart.ActualHeight, 
        96, 96, PixelFormats.Pbgra32);

    renderTargetBitmap.Render(chart);

    // Encode the rendered image to a PNG format
    var encoder = new PngBitmapEncoder();
    encoder.Frames.Add(BitmapFrame.Create(renderTargetBitmap));

    // Define the path where the chart will be saved
    string path = "chart.png";

    // Save the encoded PNG to the file system
    using (var stream = File.Create(path))
    {
        encoder.Save(stream);
    }

    // Inform the user of the successful save
    MessageBox.Show($"Chart saved as {path}");
}
private void GenerateChartButton_Click(object sender, RoutedEventArgs e)
{
    CreateAndSaveChartImage();
}

public void CreateAndSaveChartImage()
{
    // Create the series collection for the chart
    var seriesCollection = new SeriesCollection
    {
        new LineSeries
        {
            Values = new ChartValues<double> { 4, 6, 5, 2, 7 },
            Title = "Sample Series"
            // You can set other properties like color, point geometry, etc.
        }
    };

    // Initialize the CartesianChart
    var chart = new CartesianChart
    {
        Series = seriesCollection,
        Width = 400,
        Height = 300,
        Background = Brushes.White
    };

    // Add chart to the UI
    ChartContainer.Child = chart;

    // Force the chart to update
    chart.Update(true, true);

    // Save the rendered chart as an image
    SaveChartToImage(chart);
}

private void SaveChartToImage(CartesianChart chart)
{
    // Measure and arrange the chart to ensure correct layout
    chart.Measure(new Size(chart.Width, chart.Height));
    chart.Arrange(new Rect(0, 0, chart.Width, chart.Height));

    // Create a render target bitmap and render the chart on it
    var renderTargetBitmap = new RenderTargetBitmap(
        (int)chart.ActualWidth, (int)chart.ActualHeight, 
        96, 96, PixelFormats.Pbgra32);

    renderTargetBitmap.Render(chart);

    // Encode the rendered image to a PNG format
    var encoder = new PngBitmapEncoder();
    encoder.Frames.Add(BitmapFrame.Create(renderTargetBitmap));

    // Define the path where the chart will be saved
    string path = "chart.png";

    // Save the encoded PNG to the file system
    using (var stream = File.Create(path))
    {
        encoder.Save(stream);
    }

    // Inform the user of the successful save
    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()
	' Create the series collection for the chart
	Dim seriesCollection As New SeriesCollection
		From {
			New LineSeries With {
				.Values = New ChartValues(Of Double) From {4, 6, 5, 2, 7},
				.Title = "Sample Series"
			}
		}

	' Initialize the CartesianChart
	Dim chart = New CartesianChart With {
		.Series = seriesCollection,
		.Width = 400,
		.Height = 300,
		.Background = Brushes.White
	}

	' Add chart to the UI
	ChartContainer.Child = chart

	' Force the chart to update
	chart.Update(True, True)

	' Save the rendered chart as an image
	SaveChartToImage(chart)
End Sub

Private Sub SaveChartToImage(ByVal chart As CartesianChart)
	' Measure and arrange the chart to ensure correct layout
	chart.Measure(New Size(chart.Width, chart.Height))
	chart.Arrange(New Rect(0, 0, chart.Width, chart.Height))

	' Create a render target bitmap and render the chart on it
	Dim renderTargetBitmap As New RenderTargetBitmap(CInt(Math.Truncate(chart.ActualWidth)), CInt(Math.Truncate(chart.ActualHeight)), 96, 96, PixelFormats.Pbgra32)

	renderTargetBitmap.Render(chart)

	' Encode the rendered image to a PNG format
	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"

	' Save the encoded PNG to the file system
	Using stream = File.Create(path)
		encoder.Save(stream)
	End Using

	' Inform the user of the successful save
	MessageBox.Show($"Chart saved as {path}")
End Sub
$vbLabelText   $csharpLabel

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

Étape 2 : Créer un modèle HTML et insérer le graphique

Nous allons maintenant préparer notre contenu HTML, en intégrant le graphique que nous venons d'enregistrer sous forme d'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>";

É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)
{
    // Initialize the HTML to PDF converter
    var renderer = new ChromePdfRenderer();

    // Render the HTML content as a PDF
    var pdf = renderer.RenderHtmlAsPdf(htmlContent);

    // Save the rendered PDF to the file system
    pdf.SaveAs("Report.pdf");
}
using IronPdf;

public void CreatePdfReport(string htmlContent)
{
    // Initialize the HTML to PDF converter
    var renderer = new ChromePdfRenderer();

    // Render the HTML content as a PDF
    var pdf = renderer.RenderHtmlAsPdf(htmlContent);

    // Save the rendered PDF to the file system
    pdf.SaveAs("Report.pdf");
}
Imports IronPdf

Public Sub CreatePdfReport(ByVal htmlContent As String)
	' Initialize the HTML to PDF converter
	Dim renderer = New ChromePdfRenderer()

	' Render the HTML content as a PDF
	Dim pdf = renderer.RenderHtmlAsPdf(htmlContent)

	' Save the rendered PDF to the file system
	pdf.SaveAs("Report.pdf")
End Sub
$vbLabelText   $csharpLabel

Assurez-vous de remplacer "chart.png" dans la chaîne htmlContent par le bon chemin vers votre image 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 exigences spécifiques, vous devrez peut-être ajuster le code, notamment en ce qui concerne la manière dont vous gérez et sourcez les images pour vos graphiques.

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

Techniques avancées et conseils

Pour améliorer davantage l'intégration :

  • Optimiser la Performance : Pour les ensembles de données importants ou les graphiques complexes, envisagez d'optimiser la performance de LiveCharts et d'IronPDF pour garantir des temps de chargement rapides et un fonctionnement fluide.
  • PDFs Interactifs : Bien que les PDFs soient statiques, ajouter des hyperliens ou des signets peut améliorer la navigation, rendant les rapports plus conviviaux.
  • Stylisation Personnalisée : Utilisez le CSS dans vos modèles HTML pour vous assurer que les rapports correspondent à votre branding ou aux directives de conception.

Conclusion

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

En conclusion, l'intégration de LiveCharts avec IronPDF offre une combinaison puissante pour les développeurs .NET cherchant à créer des graphiques dynamiques et esthétiques et à les incorporer dans des rapports PDF professionnellement stylisés. Cette synergie améliore non seulement la présentation des données mais étend aussi l'utilité des applications en facilitant la génération de rapports statiques à partir de jeux de données dynamiques.

La capacité d'IronPDF à rendre HTML en PDF, avec un support complet de CSS3, de JavaScript et de HTML5, garantit que vos graphiques passent en douceur de l'écran à la page imprimée. Pour ceux qui souhaitent explorer cette fonctionnalité, IronPDF propose un essai gratuit de IronPDF à partir de $799, offrant une solution rentable pour la génération de rapports de haute qualité dans des applications .NET.

Questions Fréquemment Posées

Comment puis-je intégrer LiveCharts avec une bibliothèque PDF en C# ?

Pour intégrer LiveCharts avec une bibliothèque PDF, vous pouvez rendre vos graphiques sous forme d'images, les incorporer dans un document HTML, puis utiliser IronPDF pour convertir ce document HTML en PDF. Cela vous permet d'inclure des visuels de graphiques dynamiques dans vos rapports PDF.

Puis-je convertir des graphiques HTML en PDF en C# ?

Oui, vous pouvez convertir des graphiques HTML en PDF en utilisant IronPDF. IronPDF peut prendre du contenu HTML incluant des rendus de graphiques et le convertir en un document PDF, préservant les éléments interactifs et visuels des graphiques.

Quels sont les avantages d'utiliser LiveCharts pour les applications C# ?

LiveCharts offre plusieurs avantages, notamment des animations automatiques, la prise en charge des mises à jour de données en temps réel, des performances élevées avec de grands jeux de données, et une grande variété de types de graphiques. Il est également compatible avec WPF, ce qui améliore le développement d'applications de bureau.

Comment puis-je m'assurer que mes graphiques dans les applications C# se mettent à jour automatiquement ?

LiveCharts prend en charge la liaison des données, ce qui permet aux graphiques de se mettre à jour automatiquement lorsque les données sous-jacentes changent. Cette fonctionnalité est particulièrement utile pour les applications nécessitant une visualisation de données en temps réel, comme le suivi des prix des actions.

Quelles caractéristiques rendent une bibliothèque PDF adaptée à l'intégration de graphiques ?

Une bibliothèque PDF adaptée à l'intégration de graphiques, comme IronPDF, doit prendre en charge la conversion HTML en PDF, permettre le style CSS3 et JavaScript, et maintenir l'intégrité visuelle des graphiques lorsqu'ils sont rendus en format PDF. Elle doit également offrir des options pour intégrer des images et d'autres éléments interactifs.

Comment puis-je créer des rapports PDF interactifs en utilisant C# ?

Vous pouvez créer des rapports PDF interactifs en C# en utilisant IronPDF pour convertir du contenu HTML, qui inclut des éléments interactifs pilotés par JavaScript et des graphiques, dans un format PDF. Cette approche maintient l'interactivité et l'attrait visuel dans le PDF résultant.

Quel est le processus pour configurer LiveCharts dans un projet .NET ?

Pour configurer LiveCharts dans un projet .NET, vous devez installer le package LiveCharts via NuGet dans Visual Studio. Après l'installation, vous pouvez ajouter des contrôles de graphique à l'interface utilisateur de votre application et lier des données à ces contrôles en utilisant du code C#.

Comment puis-je optimiser les performances des graphiques et des PDF dans les applications C# ?

Pour optimiser les performances, minimisez la taille du jeu de données pour le rendu, utilisez l'accélération matérielle pour les animations dans les graphiques et utilisez le traitement asynchrone. Pour les PDF, optimisez le contenu HTML avant la conversion et utilisez les fonctionnalités de compression disponibles dans IronPDF.

Quels types de graphiques LiveCharts peut-il produire ?

LiveCharts peut produire une variété de types de graphiques, y compris des lignes, des camemberts, des barres et des séries plus complexes. Cette polyvalence permet aux développeurs de choisir le type de graphique le plus approprié à leurs besoins spécifiques de visualisation de données.

Est-il possible d'essayer gratuitement une bibliothèque PDF ?

Oui, IronPDF offre un essai gratuit qui permet aux développeurs d'évaluer ses capacités pour générer des documents PDF de haute qualité à partir de contenu HTML, y compris des graphiques et d'autres éléments visuels.

Curtis Chau
Curtis Chau
  Discutez maintenant avec l'équipe d'ingénierie
Rédacteur technique

Curtis Chau détient un baccalauréat en informatique (Université de Carleton) et se spécialise dans le développement front-end avec expertise en Node.js, TypeScript, JavaScript et React. Passionné par la création d'interfaces utilisateur intuitives et esthétiquement plaisantes, Curtis aime travailler avec des frameworks modernes ...

Lire la suite

Articles connexes

Essai de 30 jours → Produit complet. Pas de limites. Pas de carte. Démarrer l'essai gratuit