Livecharts C# (Wie es für Entwickler funktioniert)

LiveCharts ist eine Bibliothek für .NET-Entwickler. LiveCharts hilft bei der Erstellung dynamischer und schöner Diagramme in C#-Anwendungen. Das bedeutet, dass Ihre Diagramme automatisch aktualisiert werden, wenn sich Ihre Daten ändern. LiveCharts ist nicht nur für traditionelle Anwendungen geeignet. Es unterstützt die Windows Presentation Foundation (WPF). Das macht ihn zu einem vielseitigen Werkzeug für Desktop-Anwendungen.

Hauptmerkmale und Vorteile

Suchen Sie nach einer Lösung für Ihre Datenvisualisierungsanforderungen? LiveCharts bietet eine umfassende Lösung. LiveCharts bietet eine breite Palette von Funktionen. Hier sind einige wichtige Punkte:

• Automatische Animationen: Die Diagramme werden automatisch animiert und aktualisieren sich reibungslos, ohne dass zusätzlicher Code erforderlich ist, wodurch Ihre Datenvisualisierungen noch ansprechender werden.
• Unterstützung von WPF: Sie können LiveCharts in WPF-Anwendungen verwenden. Dies ermöglicht umfangreiche Benutzeroberflächen.
• Hohe Leistung: Entwickelt zur Verbesserung von Leistung, Geschwindigkeit und Effizienz, insbesondere bei großen Datensätzen.
• Flexibilität: Es ist einfach, flexibel, interaktiv und von Anfang an leicht zu bedienen, ermöglicht aber auch komplexe Anpassungen, die auf die Bedürfnisse Ihres Projekts zugeschnitten sind.
• Interaktive Diagramme: Die Benutzer können mit den Diagrammen interagieren. Dies macht die Datenexploration intuitiv.

• Große Auswahl an Diagrammtypen: Was auch immer Sie zur Visualisierung Ihrer Daten benötigen, LiveCharts hat den passenden Diagrammtyp dafür.

  LiveCharts verwandelt komplexe Daten in interaktive, ansprechende visuelle Darstellungen. Seine Benutzerfreundlichkeit und Flexibilität machen es zu einem leistungsstarken Werkzeug für Entwickler. Mit den Funktionen der leistungsstarken LiveCharts können Entwickler komplexe Daten in interaktive, ansprechende visuelle Darstellungen verwandeln. Wir werden die Funktionen von LiveCharts und seine Integration mit dem IronPDF-Bibliothek.

Erste Schritte mit LiveCharts

Die Einrichtung Ihrer Entwicklungsumgebung zur Verwendung von LiveCharts ist einfach, und der Zugriff auf den Quellcode erleichtert die Anpassung und das Verständnis. Dieser Abschnitt führt Sie durch die ersten Schritte und hilft Ihnen, Ihr erstes Diagramm zu erstellen.

Einrichten Ihrer Umgebung

Um LiveCharts zu verwenden, müssen Sie sicherstellen, dass Sie Visual Studio installiert haben. Fügen Sie dann das LiveCharts-Paket, ein auf dynamische Datenvisualisierung ausgerichtetes Paket, zu Ihrem Projekt hinzu. Sie können dies über den NuGet Package Manager tun. Suchen Sie nach LiveCharts und installieren Sie die neueste Version. Dieser Vorgang fügt alle notwendigen Referenzen zu Ihrem Projekt hinzu.

Ihr erster Chart mit LiveCharts

Die Erstellung Ihrer ersten Karte erfordert einige einfache Schritte. Fügen Sie zunächst ein Diagramm-Steuerelement in die Benutzeroberfläche Ihrer Anwendung ein. Wenn Sie WPF verwenden, können Sie dies in XAML oder programmatisch in C# tun.

Hier ist ein einfaches Beispiel in XAML:

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

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

'INSTANT VB TODO TASK: The following line uses invalid syntax:
'<lvc:CartesianChart Series="{Binding MySeries}"/>

Bereiten Sie in Ihrem C#-Code die Daten für Ihr Diagramm vor. Für ein einfaches Liniendiagramm benötigen Sie eine SeriesCollection. Sie können diese Sammlung mit LineSeries füllen und die Values auf Ihre Datenpunkte setzen.

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

Mit diesem Codeschnipsel wird ein einfaches Liniendiagramm erstellt. Sie zeigt eine Reihe von Werten in einem kartesischen Diagramm an. Denken Sie daran, den DataContext Ihres Fensters oder Steuerelements zu setzen, um sicherzustellen, dass das Diagramm an Ihre Daten gebunden ist.

Wenn Sie diese Schritte befolgen, haben Sie ein grundlegendes Diagramm erstellt und können es verwenden. Dies ist erst der Anfang. LiveCharts ermöglicht viel komplexere und interaktive Datenvisualisierungen.

Erkunden der LiveCharts-Funktionen

Bei LiveCharts geht es nicht nur um die Anzeige statischer Daten. Seine wahre Stärke liegt in seiner Fähigkeit, in Echtzeit zu aktualisieren, auf Datenänderungen zu reagieren und eine breite Palette von Diagrammtypen anzubieten. In diesem Abschnitt werden diese Fähigkeiten anhand von Beispielen erläutert, damit Sie die Konzepte besser verstehen.

Verstehen von Datenbindung und Aktualisierungen

Datenbindung ist ein zentrales Konzept in LiveCharts. Sie ermöglicht es, dass Ihre Diagramme Änderungen in Ihren Daten automatisch widerspiegeln. Diese Funktion ist besonders nützlich für Anwendungen, die mit dynamischen Datenquellen arbeiten.

Nehmen wir eine Anwendung, die Aktienkurse verfolgt. Wenn neue Daten eingehen, soll Ihr Diagramm aktualisiert werden. Mit LiveCharts aktualisieren Sie einfach die Datenquelle. Das Diagramm erkennt diese Änderungen und wird entsprechend aktualisiert.

So können Sie ein Diagramm an eine Datenquelle binden:

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

Eintauchen in Diagrammtypen

LiveCharts unterstützt verschiedene Diagrammtypen, die jeweils für unterschiedliche Anforderungen an die Datenvisualisierung geeignet sind. Hier sind einige Beispiele:

• Linienreihen: Ideal für die Darstellung von Trends im Zeitverlauf.
• Kuchendiagramm: Am besten geeignet für die Darstellung von Proportionen in einem Datensatz.

• Balkendiagramm: Nützlich für den Vergleich von Mengen zwischen verschiedenen Kategorien.

  Um ein Kreisdiagramm zu erstellen, verwenden Sie die Klasse PieSeries. Hier ein kurzes Beispiel:

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

Dieses Codeschnipsel richtet ein einfaches Kreisdiagramm mit zwei Datenreihen ein. Wie das Liniendiagramm-Beispiel bindet es die PieSeries an die Eigenschaft Values.

LiveCharts bietet außerdem Flexibilität und Kontrolle über das Aussehen und Verhalten Ihrer Diagramme. Sie können nahezu jeden Aspekt anpassen, von Farben und Beschriftungen bis hin zu Animationen und Interaktivität. So können Sie Ihre Diagramme perfekt an das Erscheinungsbild Ihrer Anwendung anpassen.

Einführung in IronPDF

Die Integration von LiveCharts mit IronPDF schließt die Lücke zwischen dynamischer Datenvisualisierung und statischer Berichtserstellung. IronPDF ist eine leistungsstarke Bibliothek für C#, die es Entwicklern ermöglicht, PDF-Dokumente programmatisch zu erstellen, zu bearbeiten und zu konvertieren.

Die Kombination mit LiveCharts ermöglicht die Erstellung von PDF-Berichten mit Ihren interaktiven Diagrammen. In diesem Abschnitt wird IronPDF vorgestellt und Sie erfahren, wie Sie es in Ihrem Projekt einrichten können.

Warum IronPDF?

IronPDF zeichnet sich dort aus, wo andere PDF-Bibliotheken versagen, insbesondere bei der Darstellung von HTML zu PDF. Diese Funktion ist besonders nützlich bei der Arbeit mit LiveCharts, da Sie Ihre Diagramme in HTML-Leinwände rendern und diese dann in PDF-Dokumente umwandeln können. IronPDF unterstützt CSS3, JavaScript und HTML5 in vollem Umfang und sorgt dafür, dass Ihre Diagramme in der PDF-Ausgabe wie gewünscht aussehen.

LiveCharts mit IronPDF

Hier ist ein detailliertes Code-Beispiel, das den Prozess der Erstellung eines Diagramms mit LiveCharts, den Export und die anschließende Verwendung von IronPDF zur Erstellung eines PDF-Berichts, der dieses Diagramm enthält, veranschaulicht. In diesem Beispiel wird davon ausgegangen, dass Sie ein grundlegendes Verständnis für die Arbeit mit LiveCharts und IronPDF haben.

Stellen Sie zunächst sicher, dass Sie die LiveCharts- und IronPDF-Pakete über NuGet in Ihrem Projekt installiert haben.

Schritt 1: Erzeugen Sie das Diagramm mit LiveCharts

Beginnen wir mit der Erstellung eines einfachen Liniendiagramms mit LiveCharts. Der Einfachheit halber wird sich dieses Beispiel auf die Erstellung des Diagramms und das Speichern als Bild konzentrieren, das später in unsere PDF-Datei aufgenommen wird.

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

Schritt 2: Erstellen einer HTML-Vorlage und Einfügen des Diagramms

Jetzt bereiten wir unseren HTML-Inhalt vor, indem wir das gerade gespeicherte Diagramm als Bild einbetten.

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

Schritt 3: Konvertieren von HTML in PDF mit IronPDF

Schließlich werden wir IronPDF verwenden, um unseren HTML-Inhalt, einschließlich des eingebetteten Diagramms, in ein PDF-Dokument zu konvertieren.

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

Ersetzen Sie "chart.png " in der Zeichenkette htmlContent durch den korrekten Pfad zu Ihrem Diagramm, wenn es sich nicht im selben Verzeichnis befindet wie die ausführbare Datei Ihrer Anwendung.

In diesem Beispiel wird ein grundlegendes Szenario zur Veranschaulichung des Prozesses dargestellt. Je nach Ihren spezifischen Anforderungen müssen Sie den Code möglicherweise anpassen, insbesondere im Hinblick darauf, wie Sie Bilder für Ihre Diagramme behandeln und beschaffen.

Fortgeschrittene Techniken und Tipps

Zur weiteren Verbesserung der Integration:

• Leistung optimieren: Bei großen Datensätzen oder komplexen Diagrammen sollten Sie die Leistung von LiveCharts und IronPDF optimieren, um schnelle Ladezeiten und einen reibungslosen Betrieb zu gewährleisten.
• Interaktive PDFs: Obwohl PDFs statisch sind, kann das Hinzufügen von Hyperlinks oder Lesezeichen die Navigation verbessern und die Berichte benutzerfreundlicher machen.
• Benutzerdefiniertes Styling: Verwenden Sie CSS innerhalb Ihrer HTML-Vorlagen, um sicherzustellen, dass die Berichte Ihrem Corporate Branding oder Ihren Designrichtlinien entsprechen.

Schlussfolgerung

Zusammenfassend lässt sich sagen, dass die Integration von LiveCharts mit IronPDF eine leistungsstarke Kombination für .NET-Entwickler darstellt, die dynamische, visuell ansprechende Diagramme erstellen und diese in professionell gestaltete PDF-Berichte einbinden möchten. Diese Synergie verbessert nicht nur die Darstellung von Daten, sondern erweitert auch den Nutzen von Anwendungen, indem sie die Erstellung von statischen Berichten aus dynamischen Datensätzen erleichtert.

Die Fähigkeit von IronPDF, HTML in PDF umzuwandeln, mit voller Unterstützung für CSS3, JavaScript und HTML5, stellt sicher, dass Ihre Diagramme nahtlos vom Bildschirm auf die gedruckte Seite übergehen. Für diejenigen, die sich für diese Funktionalität interessieren, bietet IronPDF eine kostenloser Test zu einem Preis ab 749 $ und bietet eine kostengünstige Lösung für die Erstellung hochwertiger Berichte in .NET-Anwendungen.