Livecharts C# (Jak to działa dla programistów)

Konfiguracja środowiska

Aby korzystać z LiveCharts, upewnij się, że masz zainstalowane Visual Studio. Następnie dodaj do swojego projektu pakiet LiveCharts, pakiet przeznaczony do dynamicznej wizualizacji danych. Można to zrobić za pomocą menedżera pakietów NuGet. Wyszukaj LiveCharts i zainstaluj najnowszą wersję. Ten proces dodaje wszystkie niezbędne odniesienia do Twojego projektu.

Twój pierwszy wykres z LiveCharts

Utworzenie pierwszego wykresu wymaga wykonania kilku prostych kroków. Najpierw dodaj kontrolkę wykresu do interfejsu użytkownika swojej aplikacji. Jeśli korzystasz z WPF, możesz to zrobić w XAML lub programowo w C#.

Oto podstawowy przykład w języku XAML:

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

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

W kodzie C# przygotuj dane do wykresu. Do stworzenia podstawowego wykresu liniowego potrzebna jest kolekcja SeriesCollection. Możesz wypełnić tę kolekcję za pomocą LineSeries, ustawiając wartości na swoje punkty danych.

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

Ten fragment kodu tworzy prosty wykres liniowy. Wyświetla serię wartości na wykresie kartezjańskim. Pamiętaj, aby ustawić DataContext okna lub kontrolki, aby zapewnić powiązanie wykresu z danymi.

Postępując zgodnie z tymi krokami, uzyskasz podstawowy wykres gotowy do użycia. To dopiero początek. LiveCharts umożliwia znacznie bardziej złożoną i interaktywną wizualizację danych.

Zrozumienie powiązania danych i aktualizacji

Powiązanie danych jest podstawową koncepcją w LiveCharts. Dzięki temu wykresy automatycznie odzwierciedlają zmiany w danych. Ta funkcja jest szczególnie przydatna w aplikacjach obsługujących dynamiczne źródła danych.

Weźmy pod uwagę aplikację śledzącą ceny akcji. W miarę napływania nowych danych chcesz, aby wykres był aktualizowany. Dzięki LiveCharts wystarczy zaktualizować źródło danych, a wykres wykryje te zmiany i odpowiednio się zaktualizuje.

Oto jak można powiązać wykres ze źródłem danych:

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

Zagłębienie się w typy wykresów

LiveCharts obsługuje różne typy wykresów, z których każdy jest dostosowany do różnych potrzeb w zakresie wizualizacji danych. Oto kilka przykładów:

• Seria Line: Idealna do wyświetlania trendów w czasie.
• Wykres kołowy: Najlepszy do przedstawiania proporcji w zbiorze danych.
• Wykres słupkowy: Przydatny do porównywania wielkości w różnych kategoriach.

Aby utworzyć wykres kołowy, należy użyć klasy PieSeries. Oto krótki przykład:

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

Ten fragment kodu tworzy podstawowy wykres kołowy z dwiema seriami danych. Podobnie jak w przykładzie wykresu liniowego, wiąże on serię PieSeries z właściwością Values.

LiveCharts oferuje również elastyczność i kontrolę nad wyglądem i zachowaniem wykresów. Możesz dostosować niemal każdy aspekt, od kolorów i etykiet po animacje i interaktywność. Dzięki temu można dostosować wykresy tak, aby idealnie pasowały do wyglądu i stylu aplikacji.

Dlaczego IronPDF?

Możliwości konwersji HTML do PDF oferowane przez IronPDF przewyższają możliwości innych bibliotek PDF, zwłaszcza w zakresie renderowania HTML do PDF. Ta funkcja jest szczególnie przydatna podczas pracy z LiveCharts, ponieważ umożliwia renderowanie wykresów na płótnach HTML, a następnie konwersję tych płócien do dokumentów PDF. IronPDF obsługuje w pełni CSS3, JavaScript i HTML5, zapewniając, że wykresy wyglądają zgodnie z zamierzeniami w pliku PDF.

LiveCharts z IronPDF

Oto szczegółowy przykład kodu ilustrujący proces tworzenia wykresu za pomocą LiveCharts, eksportowania go, a następnie użycia IronPDF do wygenerowania raportu PDF zawierającego ten wykres. W tym przykładzie zakłada się, że masz podstawową wiedzę na temat pracy z LiveCharts i IronPDF.

Najpierw upewnij się, że masz zainstalowane w swoim projekcie pakiety LiveCharts i IronPDF za pośrednictwem NuGet.

Krok 1: Wygeneruj wykres za pomocą LiveCharts

Zacznijmy od utworzenia prostego wykresu liniowego przy użyciu LiveCharts. Dla uproszczenia w tym przykładzie skupimy się na wygenerowaniu wykresu i zapisaniu go jako obrazu, który później zostanie dołączony do naszego pliku 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

Krok 2: Utwórz szablon HTML i wstaw wykres

Teraz przygotujemy naszą treść HTML, osadzając wykres, który właśnie zapisaliśmy jako obraz.

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

Krok 3: Konwersja HTML do PDF za pomocą IronPDF

Na koniec użyjemy IronPDF do konwersji naszej treści HTML, w tym osadzonego obrazu wykresu, do dokumentu 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

Pamiętaj, aby zastąpić "chart.png" w ciągu htmlContent prawidłową ścieżką do obrazu wykresu, jeśli nie znajduje się on w tym samym katalogu co plik wykonywalny aplikacji.

Ten przykład przedstawia podstawowy scenariusz ilustrujący cały proces. W zależności od konkretnych wymagań może być konieczne dostosowanie kodu, zwłaszcza w zakresie obsługi i pozyskiwania obrazów do wykresów.

Zaawansowane techniki i wskazówki

Aby jeszcze bardziej usprawnić integrację:

• Optymalizacja wydajności: W przypadku dużych zbiorów danych lub złożonych wykresów warto rozważyć optymalizację wydajności zarówno LiveCharts, jak i IronPDF, aby zapewnić szybkie ładowanie i płynne działanie.
• Interaktywne pliki PDF: Chociaż pliki PDF są statyczne, dodanie hiperłączy lub zakładek może poprawić nawigację, dzięki czemu raporty staną się bardziej przyjazne dla użytkownika.
• Stylizacja niestandardowa: Użyj CSS w szablonach HTML, aby raporty były zgodne z wizerunkiem firmy lub wytycznymi projektowymi.