Livecharts C# (Funktionsweise für Entwickler)

Einrichten Ihrer Umgebung

Um LiveCharts zu nutzen, stellen Sie sicher, dass Visual Studio installiert ist. Fügen Sie dann das LiveCharts-Paket hinzu, ein speziell für dynamische Datenvisualisierungen entwickeltes Paket, das in Ihrem Projekt verwendet werden kann. Sie können dies über den NuGet Package Manager tun. Suchen Sie nach LiveCharts und installieren Sie die neueste Version. Dieser Prozess fügt alle notwendigen Referenzen zu Ihrem Projekt hinzu.

Ihr erstes Diagramm mit LiveCharts

Die Erstellung Ihres ersten Diagramms erfordert ein paar einfache Schritte. Fügen Sie ein Diagrammsteuerelement zur UI Ihrer Anwendung hinzu. 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}"/>

In Ihrem C#-Code bereiten Sie 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();
    // 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

Dieser Codeausschnitt erstellt ein einfaches Liniendiagramm. Es zeigt eine Reihe von Werten auf einem kartesischen Diagramm an. Vergessen Sie nicht, den DataContext Ihres Fensters oder Steuerelements zu setzen, damit das Diagramm an Ihre Daten gebunden wird.

Durch das Befolgen dieser Schritte haben Sie ein einfaches Diagramm betriebsbereit. Das ist erst der Anfang. LiveCharts ermöglicht viel komplexere und interaktive Datenvisualisierungen.

Datenbindung und Aktualisierungen verstehen

Datenbindung ist ein Kernkonzept in LiveCharts. Es ermöglicht, dass sich Ihre Diagramme automatisch an Änderungen in Ihren Daten anpassen. Diese Funktion ist besonders nützlich für Anwendungen, die mit dynamischen Datenquellen arbeiten.

Betrachten Sie eine Anwendung, die Aktienkurse verfolgt. Wenn neue Daten eingehen, möchten Sie, dass sich Ihr Diagramm aktualisiert. Mit LiveCharts aktualisieren Sie einfach die Datenquelle, und das Diagramm erkennt diese Änderungen und aktualisiert sich entsprechend.

So binden Sie ein Diagramm an eine Datenquelle:

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

Eintauchen in Diagrammtypen

LiveCharts unterstützt verschiedene Diagrammtypen, die sich für unterschiedliche Arten von Datenvisualisierungsanforderungen eignen. Hier sind einige Beispiele:

• Linienserie: Ideal zur Darstellung von Trends im Zeitverlauf.
• Tortendiagramm: Am besten geeignet, um Anteile in einem Datensatz darzustellen.
• Balkendiagramm: Nützlich zum Vergleich von Mengen zwischen verschiedenen Kategorien.

Um ein Kuchendiagramm zu erstellen, verwenden Sie die PieSeries-Klasse. Hier ist ein kurzes Beispiel:

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

Dieser Codeausschnitt erstellt ein einfaches Kuchendiagramm mit zwei Datenserien. Wie im Beispiel des Liniendiagramms bindet es die PieSeries an die Values-Eigenschaft.

LiveCharts bietet auch Flexibilität und Kontrolle über das Erscheinungsbild und Verhalten Ihrer Diagramme. Sie können fast jeden Aspekt anpassen, von Farben und Labels bis hin zu Animationen und Interaktivität. Dies ermöglicht es, Ihre Diagramme perfekt an das Aussehen und Gefühl Ihrer Anwendung anzupassen.

Warum IronPDF?

IronPDF's HTML-zu-PDF-Konvertierungsfähigkeiten sind überlegen, besonders in der Fähigkeit, HTML in PDF zu rendern. Diese Funktion ist besonders nützlich, wenn man mit LiveCharts arbeitet, da Sie Ihre Diagramme auf HTML-Canvas rendern und diese dann in PDF-Dokumente konvertieren können. IronPDF unterstützt vollständiges CSS3, JavaScript und HTML5 und stellt sicher, dass Ihre Diagramme im PDF-Output wie beabsichtigt aussehen.

LiveCharts mit IronPDF

Hier ist ein detailliertes Codebeispiel, das den Prozess der Erstellung eines Diagramms mit LiveCharts, dessen Export und dann die Verwendung von IronPDF zur Erstellung eines PDF-Berichts, der dieses Diagramm enthält, veranschaulicht. Dieses Beispiel setzt voraus, dass Sie ein grundlegendes Verständnis im Umgang mit LiveCharts und IronPDF haben.

Stellen Sie zuerst sicher, dass Sie die Pakete LiveCharts und IronPDF via NuGet in Ihrem Projekt installiert haben.

Schritt 1: Erzeugen Sie das Diagramm mit LiveCharts

Beginnen wir mit der Erstellung eines einfachen Liniendiagramms mit LiveCharts. Aus Gründen der Einfachheit wird sich dieses Beispiel darauf konzentrieren, das Diagramm zu generieren und als Bild zu speichern, das später in unser PDF eingefügt wird.

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

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

Nun bereiten wir unseren HTML-Inhalt vor, indem wir das gerade als Bild gespeicherte Diagramm 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>";

Schritt 3: Konvertieren von HTML in PDF mit IronPDF

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

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

Stellen Sie sicher, dass Sie im htmlContent-String "chart.png" durch den korrekten Pfad zu Ihrem Diagrammbild ersetzen, falls es sich nicht im gleichen Verzeichnis wie das ausführbare Programm Ihrer Anwendung befindet.

Dieses Beispiel deckt ein grundlegendes Szenario ab, um den Prozess zu veranschaulichen. Je nach Ihren spezifischen Anforderungen müssen Sie den Code anpassen, insbesondere wie Sie die Bilder für Ihre Diagramme handhaben und beziehen.

Fortgeschrittene Techniken und Tipps

Um die Integration weiter zu verbessern:

• Leistungsoptimierung: Bei großen Datensätzen oder komplexen Diagrammen empfiehlt es sich, die Leistung von LiveCharts und IronPDF zu optimieren, um kurze 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.
• Individuelles Styling: Verwenden Sie CSS in Ihren HTML-Vorlagen, um sicherzustellen, dass die Berichte Ihrem Corporate Branding oder Ihren Designrichtlinien entsprechen.