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

Ortamınızı Ayarlama

LiveCharts'ı kullanmak için Visual Studio'nun yüklü olduğundan emin olun. Ardından, projenize dinamik veri görselleştirme için tasarlanmış 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, projenize gerekli tüm referansları ekler.

LiveCharts ile İlk Grafiğiniz

İlk grafiğinizin oluşturulması birkaç basit adım içerir. İlk olarak, uygulamanızın kullanıcı arayüzüne bir grafik kontrolü ekleyin. WPF kullanıyorsanız, bunu XAML'de veya C# dilinde programatik olarak yapabilirsiniz.

İşte XAML'de basit bir örnek:

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

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

C# kodunuzda, grafik için veriyi hazırlayın. Temel bir çizgi grafiği için bir SeriesCollection'a ihtiyacınız olacak. Bu koleksiyonu LineSeries ile doldurabilir, Values özelliğine veri noktalarınızı 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çacığı, basit bir çizgi grafik oluşturur. Bir dizi değeri Kartezyen bir grafikte gösterir. Grafiğinizin verilerinizle bağlandığından emin olmak için pencerenizin veya kontrolünüzün DataContext değerini ayarlamayı unutmayın.

Bu adımları izleyerek, temel bir grafiği çalışır hale getireceksiniz. Bu sadece başlangıç. LiveCharts, çok daha karmaşık ve etkileşimli veri görselleştirmelerine olanak tanır.

Veri Bağlamayı ve Güncellemeleri Anlama

Veri bağlama, LiveCharts içinde temel bir kavramdır. Bu, grafiklerinizin, verilerinizdeki değişiklikleri otomatik olarak yansıtmasını sağlar. Bu özellik, özellikle dinamik veri kaynakları ile uğraşan uygulamalar için faydalıdır.

Bir hisse senedi fiyatlarını izleyen bir uygulamayı düşünün. Yeni veriler geldiğinde, grafiklerinizin güncellenmesini istersiniz. LiveCharts ile yapmanız gereken tek şey veri kaynağını güncellemektir ve grafik tam olarak bu değişiklikleri algılar ve uygun şekilde güncellenir.

İşte bir tabloyu bir veri kaynağına nasıl bağlayabileceğiniz:

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ürlerine Dalış

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

• Çizgi Serisi: Zamana göre eğilimleri göstermek için idealdir.
• Pasta Grafiği: Bir veri kümesindeki oranları göstermek için en iyisidir.
• Çubuk Grafik: 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çacığı, iki veri serisi ile temel bir pasta grafiği kurar. Çizgi grafik örneği gibi, PieSeries özelliğini Values özelliğine bağlar.

LiveCharts ayrıca grafiklerinizin görünümü ve davranışı üzerinde esneklik ve kontrol imkanı sunar. Renklerden etiketlere, animasyonlardan etkileşime kadar neredeyse her yönü özelleştirebilirsiniz. Bu, grafiklerinizi uygulamanızın görünüm ve hissine mükemmel uyacak şekilde özelleştirmenizi mümkün kılar.

Neden IronPDF?

IronPDF'nin HTML'den PDF'ye Dönüştürme Yetenekleri, özellikle HTML'yi PDF'ye dönüştürme kabiliyeti konusunda diğer PDF kütüphanelerinin zayıf kaldığı yerlerde başarılıdır. Bu özellik, LiveCharts ile çalışırken özellikle yararlıdır, çünkü grafiklerinizi HTML kanvaslara dönüştürebilir ve bu kanvasları PDF belgelerine dönüştürebilirsiniz. IronPDF, CSS3, JavaScript ve HTML5'in tam desteğini sunarak grafiklerinizin PDF çıktısında istenildiği gibi görünmesini sağlar.

LiveCharts ile IronPDF

İşte LiveCharts ile bir grafik oluşturma, onu dışa aktarma ve ardından IronPDF kullanarak bu grafiği içeren bir PDF raporu oluşturma sürecini açıklayan ayrıntılı bir kod örneği. Bu örnek, LiveCharts ve IronPDF ile çalışmaya ilişkin temel bir anlayışa sahip olduğunuzu varsayar.

İlk olarak, NuGet üzerinden LiveCharts ve IronPDF paketlerini projenizde yüklendiğinden emin olun.

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

LiveCharts kullanarak basit bir çizgi grafiği oluşturarak başlayalım. Basitlik adına, bu örnek, grafiğin oluşturulması ve daha sonra PDF'mize dahil edilecek bir görüntü olarak kaydedilmesi konusunda odaklanacaktır.

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: HTML Şablonunu Oluşturun ve Grafiği Ekleyin

Şimdi, az önce kaydettiğimiz grafiği bir görüntü olarak gömerek 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ürme

Son olarak, grafik görseli de dahil olmak üzere HTML içeriğimizi bir PDF belgesine dönüştürmek için IronPDF'i 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 dizgesinde "chart.png" adresini uygulamanızın yürütülebilir dosyası ile aynı dizinde değilse, grafik görüntünüzün doğru yolu ile değiştirdiğinizden emin olun.

Bu örnek, süreci açıklamak için temel bir senaryo kapsar. Belirli gereksinimlerinize bağlı olarak, özellikle grafikleriniz için nasıl görüntüler kaynakladığınızı ele alırken ve bunları işlerken, kodda düzenleme yapmanız gerekebilir.

Gelişmiş Teknikler ve İpuçları

Entegrasyonu daha da geliştirmek için:

• Performansı Optimize Et: Büyük veri setleri veya karmaşık grafikler için, hızlı yükleme süreleri ve sorunsuz bir çalışma sağlamak için hem LiveCharts hem de IronPDF'nin performansını optimize etmeyi düşünün.
• Etkileşimli PDF'ler: PDF'ler statik olmasına rağmen, gezinmeyi geliştirmek için köprüler veya yer imleri ekleyerek raporları daha kullanıcı dostu hale getirebilirsiniz.
• Özel Stil Oluşturma: Raporların kurumsal markalaşmanıza veya tasarım yönergelerinize uygun olmasını sağlamak için HTML şablonlarınız içinde CSS kullanın.