Livecharts C# (Geliştiriciler için Nasıl Çalışır)

Ortamınızı Ayarlama

LiveCharts'i kullanmak için Visual Studio'nun kurulu olduğundan emin olun. Ardından, projenize dinamik veri görselleştirme için tasarlanmış dişli bir paket olan LiveCharts paketini ekleyin. Bunu NuGet Paket Yöneticisi aracılığıyla yapabilirsiniz. LiveCharts arayın ve en son sürümünü yükleyin. Bu işlem tüm gerekli referansları projenize ekler.

LiveCharts ile İlk Grafik

İlk grafiğinizi oluşturmak birkaç basit adımı içerir. Öncelikle, uygulamanızın kullanıcı arabirimine bir grafik denetimi ekleyin. WPF kullanıyorsanız, bunu XAML'de veya programatik olarak C#'da yapabilirsiniz.

İşte XAML'de basit bir örnek:

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

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

C# kodunuzda, grafik için verileri hazırlayın. Temel bir çizgi grafiği için bir SeriesCollection ihtiyaçınız olacak. Bu koleksiyonu LineSeries ile doldurabilir, Values özelliğini veri noktalarınıza ayarlayabilirsiniz.

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

Bu kod parçası basit bir çizgi grafiği oluşturur. Bir dizi değeri Kartezyen grafik üzerinde gösterir. Grafiğinizin verilerinize bağlandığından emin olmak için pencerenizin veya denetiminizin DataContext özelliğini ayarlamayı unutmayın.

Bu adımları takip ederek, basit bir grafik çalışır hale getireceksiniz. Bu sadece bir başlangıç. LiveCharts çok daha karmaşık ve etkileşimli veri görselleştirmeleri sağlar.

Veri Bağlama ve Güncellemeleri Anlamak

Veri bağlama, LiveCharts'te çekirdek bir kavramdır. Grafiklerinizin, verinizde yapılan değişiklikleri otomatik olarak yansıtmasına olanak tanır. Bu özellik, özellikle dinamik veri kaynaklarıyla uğraşan uygulamalar için faydalıdır.

Hisse senedi fiyatlarını takip eden bir uygulama düşünün. Yeni veriler geldikçe grafiğinizin güncellenmesini istersiniz. LiveCharts ile, yalnızca veri kaynağını güncellersiniz ve grafik bu değişiklikleri algılar ve uygun şekilde güncellenir.

İşte bir grafik kaynağına nasıl bağlanılacağına dair:

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

Grafik Türlerinde Derinleşme

LiveCharts çeşitli grafik türlerini destekler, her biri farklı veri görselleştirme ihtiyaçlarına uygundur. İşte birkaç örnek:

• Çizgi Serisi: Zaman içinde eğilimleri göstermek için idealdir.
• Pasta Grafiği: Bir veri kümesindeki oranları göstermek için en iyisidir.
• Çubuk Grafiği: Farklı kategoriler arasında miktarları karşılaştırmak için kullanışlıdır.

Bir pasta grafiği oluşturmak için PieSeries sınıfını kullanırsınız. İşte hızlı bir örnek:

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

Bu kod parçası, iki veri serisi ile basit bir pasta grafiği ayarlar. Çizgi grafik örneğinde olduğu gibi, PieSeries özelliğini Values özelliğine bağlar.

LiveCharts aynı zamanda grafiklerinizin görünümü ve davranışı üzerinde esneklik ve kontrol sunar. Renkler ve etiketlerden animasyonlara ve etkileşimliliklere kadar neredeyse her yönü özelleştirebilirsiniz. Bu, grafiklerinizi uygulamanızın görünüm ve hissine mükemmel şekilde uyacak şekilde uyarlamanızı sağlar.

Neden IronPDF?

IronPDF'in HTML'den PDF'ye Dönüştürme Yetenekleri, diğer PDF kütüphanelerinin yeterince güçlü olmadığı yerlerde parlar, özellikle HTML'yi PDFye dönüştürme yeteneğinde. Bu özellik, LiveCharts ile çalışırken özellikle faydalıdır, çünkü grafiklerinizi HTML kanvaslarına render edebilir ve ardından bu kanvasları PDF belgelerine dönüştürebilirsiniz. IronPDF, grafiklerinizin PDF çıktısında istenildiği gibi görünmesini sağlamak için tam CSS3, JavaScript ve HTML5 desteği sağlar.

LiveCharts ile IronPDF

İşte LiveCharts ile bir grafik oluşturma, bunu dışa aktarma ve ardından IronPDF kullanarak bu grafiği içeren bir PDF raporu oluşturma sürecini gösteren detaylı bir kod örneği. Bu örnek, LiveCharts ve IronPDF ile nasıl çalışılacağı konusunda temel bilgilere sahip olduğunuzu varsayar.

Öncelikle, NuGet aracılığıyla projenize LiveCharts ve IronPDF paketlerini yüklediğinizden emin olun.

Adım 1: LiveCharts ile Grafiği Oluşturun

LiveCharts kullanarak basit bir çizgi grafik oluşturarak başlayalım. Basitlik açısından, bu örnek grafiği oluşturup bir resim olarak kaydetmeye odaklanacak ve bu daha sonra PDF'mizde yer alacak.

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

Adım 2: Bir HTML Şablonu Oluşturun ve Grafiği Ekleyin

Şimdi, grafiği resim olarak kaydettiğimiz HTML içeriğimizi hazırlayacağız.

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

Adım 3: IronPDF ile HTML'yi PDF'ye Dönüştürün

Son olarak, yerleştirilmiş grafik görseli de dahil olmak üzere HTML içeriğimizi PDF belgesine dönüştürmek için IronPDF kullanacağız.

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

htmlContent dizesindeki "chart.png" yerine, eğer uygulamanızın çalıştırılabilir dosyasıyla aynı dizinde değilse, grafik görselinizin doğru yolunu değiştirdiğinizden emin olun.

Bu örnek, süreci açıklamak için temel bir senaryoyu kapsar. Özel gereksinimlerinize bağlı olarak, kodu ayarlamanız gerekebilir, özellikle LiveCharts için grafikleriniz için resimleri nasıl yönettiğiniz ve elde ettiğiniz konusunda.

Gelişmiş Teknikler ve İpuçları

Entegrasyonu daha da geliştirmenize yardımcı olacak bazı öneriler:

• Performansı Optimize Edin: Büyük veri kümeleri veya karmaşık grafikler için, hem LiveCharts hem de IronPDF'nin performansını optimize etmeyi düşünün, böylece hızlı yükleme süreleri ve sorunsuz çalışma sağlanır.
• İnteraktif PDF'ler: PDF'ler statik olsa da, bağlantılar veya yer imleri eklemek, raporların daha kullanıcı dostu hale gelmesini sağlar.
• Özel Stil: Raporların kurumsal markalama veya tasarım kılavuzlarınıza uyduğundan emin olmak için HTML şablonlarınızda CSS kullanın.