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 et se mettent à jour en douceur sans nécessiter de code supplémentaire, ce qui rend vos visualisations de données plus attrayantes.
• Prise en charge de WPF : vous pouvez utiliser LiveCharts dans les applications WPF, ce qui permet de créer des interfaces utilisateur riches.
• Haute performance : Conçu pour améliorer les performances, la vitesse et l'efficacité, notamment avec les grands ensembles de données.
• Flexibilité : Simple, flexible, interactif et facile à utiliser dès le départ, il permet également des personnalisations complexes adaptées aux besoins de votre projet.
• Graphiques interactifs : les utilisateurs peuvent interagir avec les graphiques, ce qui améliore 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 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}"/>

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

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

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

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

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éales pour visualiser les tendances au fil du temps.
• Diagramme circulaire : Idéal pour représenter les proportions dans un ensemble de données.
• Graphique à barres : utile pour comparer les 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

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

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 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 lors du travail avec LiveCharts, car vous pouvez rendre vos graphiques sur des toiles HTML puis convertir ces toiles 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}");
}

Private Sub GenerateChartButton_Click(sender As Object, e As RoutedEventArgs)
    CreateAndSaveChartImage()
End Sub

Public Sub CreateAndSaveChartImage()
    ' Create the series collection for the chart
    Dim seriesCollection = New SeriesCollection From {
        New LineSeries With {
            .Values = New ChartValues(Of Double) From {4, 6, 5, 2, 7},
            .Title = "Sample Series"
            ' You can set other properties like color, point geometry, etc.
        }
    }

    ' 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(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 = New RenderTargetBitmap(CInt(chart.ActualWidth), CInt(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

Private Sub GenerateChartButton_Click(sender As Object, e As RoutedEventArgs)
    CreateAndSaveChartImage()
End Sub

Public Sub CreateAndSaveChartImage()
    ' Create the series collection for the chart
    Dim seriesCollection = New SeriesCollection From {
        New LineSeries With {
            .Values = New ChartValues(Of Double) From {4, 6, 5, 2, 7},
            .Title = "Sample Series"
            ' You can set other properties like color, point geometry, etc.
        }
    }

    ' 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(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 = New RenderTargetBitmap(CInt(chart.ActualWidth), CInt(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

É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>";

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(htmlContent As String)
    ' Initialize the HTML to PDF converter
    Dim renderer As 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

Imports IronPdf

Public Sub CreatePdfReport(htmlContent As String)
    ' Initialize the HTML to PDF converter
    Dim renderer As 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

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.

Techniques avancées et conseils

Pour améliorer davantage l'intégration :

• Optimisation des 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 et rendre les rapports plus conviviaux.
• Style personnalisé : Utilisez le CSS dans vos modèles HTML pour garantir que les rapports correspondent à votre image de marque ou à vos directives de conception.

Conclusion

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 intéressés par l'exploration de cette fonctionnalité, IronPDF offre un essai gratuit de IronPDF à partir de $999, offrant une solution rentable pour la génération de rapports de haute qualité dans les applications .NET.