LiveCharts to biblioteka dla programistów .NET. LiveCharts pomaga tworzyć dynamiczne i atrakcyjne wykresy w aplikacjach napisanych w języku C#. Oznacza to, że wykresy odświeżają się automatycznie po zmianie danych. LiveCharts nie jest przeznaczony wyłącznie do tradycyjnych aplikacji; Obsługuje platformę Windows Presentation Foundation (WPF), co czyni go wszechstronnym narzędziem do tworzenia aplikacji desktopowych.

Najważniejsze cechy i zalety

Szukasz rozwiązania dla swoich potrzeb w zakresie wizualizacji danych? LiveCharts oferuje kompleksowe rozwiązanie z szeroką gamą funkcji. Oto kilka kluczowych punktów:

• Automatyczne animacje: wykresy animują się automatycznie, płynnie aktualizując się bez potrzeby stosowania dodatkowego kodu, dzięki czemu wizualizacje danych są bardziej atrakcyjne.
• Obsługa WPF: Możesz używać LiveCharts w aplikacjach WPF, co pozwala na tworzenie bogatych interfejsów użytkownika.
• Wysoka wydajność: Zaprojektowane z myślą o poprawie wydajności, szybkości i efektywności, zwłaszcza w przypadku dużych zbiorów danych.
• Elastyczność: Jest to rozwiązanie proste, elastyczne, interaktywne i łatwe w użyciu od samego początku, ale pozwala również na złożone dostosowania do potrzeb Twojego projektu.
• Interaktywne wykresy: Użytkownicy mogą wchodzić w interakcję z wykresami, co ułatwia analizę danych.
• Szeroki wybór typów wykresów: Niezależnie od potrzeb w zakresie wizualizacji danych, LiveCharts oferuje odpowiedni typ wykresu.

LiveCharts przekształca złożone dane w interaktywne, angażujące wizualizacje. Łatwość obsługi i elastyczność sprawiają, że jest to potężne narzędzie dla programistów. Korzystając z możliwości potężnego LiveCharts, programiści mogą przekształcić złożone dane w interaktywne, angażujące wizualizacje. Omówimy funkcje LiveCharts oraz jego integrację z biblioteką IronPDF.

Pierwsze kroki z LiveCharts

Konfiguracja środowiska programistycznego do korzystania z LiveCharts jest prosta, a dostęp do kodu źródłowego ułatwia dostosowywanie i zrozumienie. Ta sekcja przeprowadzi Cię przez pierwsze kroki i pomoże Ci stworzyć pierwszy wykres.

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

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.

Odkrywanie funkcji LiveCharts

LiveCharts to nie tylko wyświetlanie statycznych danych. Jego prawdziwa siła leży w możliwości aktualizacji w czasie rzeczywistym, reagowania na zmiany danych oraz oferowania szerokiej gamy typów wykresów. W tej sekcji omówiono te możliwości, podając przykłady, które pomogą Ci zrozumieć te koncepcje.

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

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

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.

Wprowadzenie do IronPDF

Integracja LiveCharts z IronPDF wypełnia lukę między dynamiczną wizualizacją danych a statycznym generowaniem raportów. IronPDF to potężna biblioteka dla języka C#, która pozwala programistom tworzyć, modyfikować i konwertować dokumenty PDF programowo.

Połączenie z LiveCharts umożliwia tworzenie raportów PDF zawierających interaktywne wykresy. W tej sekcji przedstawiono IronPDF i wyjaśniono, jak skonfigurować go w projekcie.

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

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

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

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

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.

Wnioski

Podsumowując, integracja LiveCharts z IronPDF stanowi potężne połączenie dla programistów .NET, którzy chcą tworzyć dynamiczne, atrakcyjne wizualnie wykresy i włączać je do profesjonalnie stylizowanych raportów PDF. Ta synergia nie tylko poprawia prezentację danych, ale także rozszerza użyteczność aplikacji, ułatwiając generowanie statycznych raportów na podstawie dynamicznych zbiorów danych.

Możliwość renderowania HTML do formatu PDF przez IronPDF, wraz z pełną obsługą CSS3, JavaScript i HTML5, gwarantuje, że wykresy będą płynnie przenoszone z ekranu na wydrukowaną stronę. Dla tych, którzy są zainteresowani eksploracją tej funkcjonalności, IronPDF oferuje bezpłatną wersję próbną IronPDF rozpoczynającą się od $999, zapewniając opłacalne rozwiązanie dla generowania raportów wysokiej jakości w aplikacjach .NET.