.NET 幫助

Livecharts C#（它如何為開發者工作）

發佈 2024年4月29日

LiveCharts是專為 .NET 開發者設計的程式庫。 LiveCharts 有助於在 C# 應用程式中創建動態且美麗的圖表。這意味著當您的數據變更時，圖表會自動刷新。 LiveCharts 不僅適用於傳統應用程式；它支持 Windows Presentation Foundation(WPF)，使其成為桌面應用程式的多功能工具。

主要功能和優勢

尋找解決您的數據可視化需求的方法嗎？ LiveCharts 提供具有廣泛功能的綜合解決方案。以下是一些重點：

自動動畫：圖表會自動動畫化，無需額外程式碼即可平滑更新，使您的數據視覺化更加引人入勝。
支援 WPF：您可以在 WPF 應用程式中使用 LiveCharts，以實現豐富的使用者介面。
高效能：專為提升效能、速度和效率而設計，特別是處理大型數據集時。
靈活性：從一開始就簡單、靈活、互動且易於使用，同時也允許根據您的專案需求進行複雜的自訂調整。
互動式圖表：使用者可以與圖表互動，增強數據探索。
多樣化的圖表類型：無論您的資料視覺化需求是什麼，LiveCharts 都有適合的圖表類型。
LiveCharts 將複雜數據轉換為互動且引人入勝的視覺表示。它的易用性和靈活性使其成為開發人員的強大工具。使用功能強大的LiveCharts，開發人員可以將複雜的數據轉換為互動且引人入勝的視覺呈現效果。我們將探索LiveCharts的功能及其與IronPDF 庫.

開始使用 LiveCharts

設置您的開發環境以使用LiveCharts非常簡單，並且訪問其源代碼可以提升自定義和理解能力。本節將引導您完成初始步驟，並幫助您創建您的第一個圖表。

設定您的環境

若要使用LiveCharts，請確保已安裝Visual Studio。然後，將 LiveCharts 套件（一個專為動態數據視覺化設計的 geared 套件）添加到您的項目中。您可以通過 NuGet 套件管理器進行此操作。搜尋 LiveCharts 並安裝最新版本。此過程會將所有必要的參考添加到您的專案中。

使用 LiveCharts 創建您的第一個圖表

製作您的第一個圖表需要幾個簡單的步驟。首先，將圖表控制項添加到應用程式的使用者介面中。如果您使用 WPF，您可以在 XAML 中或透過 C# 程式設計來完成此操作。

以下是在 XAML 中的基本範例：

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

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

'INSTANT VB TODO TASK: The following line uses invalid syntax:
'<lvc:CartesianChart Series="{Binding MySeries}"/>

VB C#

在您的C#程式碼中，準備圖表數據。要繪製基本折線圖，您需要一個SeriesCollection。您可以使用 LineSeries 來填充此集合，將 Values 設定為您的數據點。

public SeriesCollection MySeries { get; set; }
public MainWindow()
{
    InitializeComponent();
    MySeries = new SeriesCollection
    {
        new LineSeries
        {
            Values = new ChartValues<double> { 4, 6, 5, 2, 7 }
        }
    };
    DataContext = this;
}

public SeriesCollection MySeries { get; set; }
public MainWindow()
{
    InitializeComponent();
    MySeries = new SeriesCollection
    {
        new LineSeries
        {
            Values = new ChartValues<double> { 4, 6, 5, 2, 7 }
        }
    };
    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()
	MySeries = New SeriesCollection
		From {
			New LineSeries With {
				.Values = New ChartValues(Of Double) From {4, 6, 5, 2, 7}
			}
		}
	DataContext = Me
End Sub

VB C#

此代碼片段建立一個簡單的折線圖。它在笛卡爾圖上顯示一系列數值。請記得設置窗口或控制項的 DataContext，以確保圖表綁定到您的數據。

按照這些步驟操作，您將擁有一個基本的圖表在運行。這只是開始。 LiveCharts 允許更加複雜和互動的數據可視化。

探索 LiveCharts 功能

LiveCharts 不僅僅是用於顯示靜態資料。它的真正強大之處在於它能夠即時更新、對數據變更做出反應，並提供多種圖表類型。此部分深入探討這些功能，並提供範例以幫助您掌握這些概念。

理解資料繫結與更新

資料繫結是 LiveCharts 的核心概念。它允許您的圖表自動反映數據的變化。此功能對於處理動態數據來源的應用程序特別有用。

考慮一個跟蹤股票價格的應用程式。隨著新數據的進入，您希望圖表更新。使用 LiveCharts，您只需更新資料來源。該圖表會偵測這些變化並相應更新。

以下是將圖表綁定到資料來源的方法：

var myValues = new ChartValues<double> { 3, 4, 6, 3, 2 };
var lineSeries = new LineSeries
{
    Values = myValues
};
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
};
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}
mySeries.Add(lineSeries)
' When data changes
myValues.Add(5) ' The chart updates automatically

VB C#

Livecharts C#（開發者運作方式）：圖 1

探索圖表類型

LiveCharts 支援各種圖表類型，每種類型都適合不同的數據視覺化需求。以下是一些範例：

線系列：展示時間趨勢的理想選擇。
圓餅圖：最適合展示資料集中的比例。
長條圖：用於比較不同類別之間的數量。
要建立圓餅圖，您需要使用 PieSeries 類別。以下是一個快速範例：

public SeriesCollection MyPieSeries { get; set; }
public MainWindow()
{
    InitializeComponent();
    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"
        }
    };
    DataContext = this;
}

public SeriesCollection MyPieSeries { get; set; }
public MainWindow()
{
    InitializeComponent();
    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"
        }
    };
    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()
	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"
			}
		}
	DataContext = Me
End Sub

VB C#

此代码片段设置了一个包含两组数据序列的基本饼图。與折線圖範例類似，它將 PieSeries 綁定到 Values 屬性。

Livecharts C#（它如何為開發者工作）：圖2

LiveCharts 也提供靈活性和控制，以調整圖表的外觀和行為。您幾乎可以自訂每個方面，從顏色和標籤到動畫和互動性。這使得可以根據您的應用程式外觀和感覺完美地調整您的圖表。

IronPDF 介紹

將LiveCharts與IronPDF整合，彌合了動態資料視覺化和靜態報告生成之間的鴻溝。 IronPDF是一個強大的C#庫，允許開發人員以程式方式創建、操作和轉換PDF文件。

將其與 LiveCharts 結合可以創建包含互動式圖表的 PDF 報告。本節介紹IronPDF並指導您如何在專案中設定它。

為什麼選擇IronPDF？

IronPDF 的 HTML 至 PDF 轉換功能當其他 PDF 庫無法達到要求時，IronPDF 尤其在將 HTML 渲染為 PDF 的能力上表現出色。這個功能在使用 LiveCharts 時特別有用，因為您可以將圖表渲染到 HTML 畫布，然後將這些畫布轉換為 PDF 文件。 IronPDF 支援完整的 CSS3、JavaScript 和 HTML5，確保您的圖表在 PDF 輸出中如預期般顯示。

搭配 IronPDF 的 LiveCharts

以下是一個詳細的程式碼範例，說明了使用 LiveCharts 創建圖表、導出圖表，然後使用 IronPDF 生成包含該圖表的 PDF 報告的過程。此範例假設您對使用 LiveCharts 和 IronPDF 有基本的了解。

首先，確保您已經透過 NuGet 在您的專案中安裝了 LiveCharts 和 IronPDF 套件。

步驟 1：使用 LiveCharts 生成圖表

讓我們開始使用LiveCharts創建一個簡單的折線圖。為了簡化，這個範例將專注於生成圖表並將其儲存為圖像，稍後將此圖像包含在我們的 PDF 中。

private void GenerateChartButton_Click(object sender, RoutedEventArgs e)
{
    CreateAndSaveChartImage();
}
public void CreateAndSaveChartImage()
{
    var seriesCollection = new SeriesCollection
{
    new LineSeries
    {
        Values = new ChartValues<double> { 4, 6, 5, 2, 7 },
        Title = "Sample Series"
        // Make sure to configure the series properties like color, point geometry, etc.
    }
};
    var chart = new CartesianChart
    {
        Series = seriesCollection,
        Width = 400,
        Height = 300,
        Background = Brushes.White
    };
    // Add chart to the UI
    ChartContainer.Child = chart;
    chart.Update(true, true); // Force chart redraw
    SaveChartToImage(chart);
}
private void SaveChartToImage(CartesianChart chart)
{
    // Ensure the chart layout is updated.
    chart.Measure(new Size(chart.Width, chart.Height));
    chart.Arrange(new Rect(0, 0, chart.Width, chart.Height));
    var renderTargetBitmap = new RenderTargetBitmap(
        (int)chart.ActualWidth,
        (int)chart.ActualHeight,
        96, // dpiX value
        96, // dpiY value
        PixelFormats.Pbgra32); // Pixel format
    renderTargetBitmap.Render(chart); // Render the chart to the bitmap
    var encoder = new PngBitmapEncoder();
    encoder.Frames.Add(BitmapFrame.Create(renderTargetBitmap));
    // Define the path where the chart will be saved
    string path = "chart.png";
    using (var stream = File.Create(path))
    {
        encoder.Save(stream);
    }
    MessageBox.Show($"Chart saved as {path}");
}

private void GenerateChartButton_Click(object sender, RoutedEventArgs e)
{
    CreateAndSaveChartImage();
}
public void CreateAndSaveChartImage()
{
    var seriesCollection = new SeriesCollection
{
    new LineSeries
    {
        Values = new ChartValues<double> { 4, 6, 5, 2, 7 },
        Title = "Sample Series"
        // Make sure to configure the series properties like color, point geometry, etc.
    }
};
    var chart = new CartesianChart
    {
        Series = seriesCollection,
        Width = 400,
        Height = 300,
        Background = Brushes.White
    };
    // Add chart to the UI
    ChartContainer.Child = chart;
    chart.Update(true, true); // Force chart redraw
    SaveChartToImage(chart);
}
private void SaveChartToImage(CartesianChart chart)
{
    // Ensure the chart layout is updated.
    chart.Measure(new Size(chart.Width, chart.Height));
    chart.Arrange(new Rect(0, 0, chart.Width, chart.Height));
    var renderTargetBitmap = new RenderTargetBitmap(
        (int)chart.ActualWidth,
        (int)chart.ActualHeight,
        96, // dpiX value
        96, // dpiY value
        PixelFormats.Pbgra32); // Pixel format
    renderTargetBitmap.Render(chart); // Render the chart to the bitmap
    var encoder = new PngBitmapEncoder();
    encoder.Frames.Add(BitmapFrame.Create(renderTargetBitmap));
    // Define the path where the chart will be saved
    string path = "chart.png";
    using (var stream = File.Create(path))
    {
        encoder.Save(stream);
    }
    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()
	Dim seriesCollection As New SeriesCollection
		From {
			New LineSeries With {
				.Values = New ChartValues(Of Double) From {4, 6, 5, 2, 7},
				.Title = "Sample Series"
			}
		}
	Dim chart = New CartesianChart With {
		.Series = seriesCollection,
		.Width = 400,
		.Height = 300,
		.Background = Brushes.White
	}
	' Add chart to the UI
	ChartContainer.Child = chart
	chart.Update(True, True) ' Force chart redraw
	SaveChartToImage(chart)
End Sub
Private Sub SaveChartToImage(ByVal chart As CartesianChart)
	' Ensure the chart layout is updated.
	chart.Measure(New Size(chart.Width, chart.Height))
	chart.Arrange(New Rect(0, 0, chart.Width, chart.Height))
	Dim renderTargetBitmap As New RenderTargetBitmap(CInt(Math.Truncate(chart.ActualWidth)), CInt(Math.Truncate(chart.ActualHeight)), 96, 96, PixelFormats.Pbgra32) ' Pixel format
	renderTargetBitmap.Render(chart) ' Render the chart to the bitmap
	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"
	Using stream = File.Create(path)
		encoder.Save(stream)
	End Using
	MessageBox.Show($"Chart saved as {path}")
End Sub

VB C#

Livecharts C#（開發者如何運作）：圖 3

步驟 2：建立 HTML 樣板並插入圖表

現在，我們將準備 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>";

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

Dim htmlContent As String = "
<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>"

VB C#

步驟 3：使用 IronPDF 將 HTML 轉換為 PDF

最後，我們將使用 IronPDF 將 HTML 內容（包括嵌入的圖表圖像）轉換為 PDF 文件。

using IronPdf;
public void CreatePdfReport(string htmlContent)
{
    var renderer = new ChromePdfRenderer();
    var pdf = renderer.RenderHtmlAsPdf(htmlContent);
    pdf.SaveAs("Report.pdf");
}

using IronPdf;
public void CreatePdfReport(string htmlContent)
{
    var renderer = new ChromePdfRenderer();
    var pdf = renderer.RenderHtmlAsPdf(htmlContent);
    pdf.SaveAs("Report.pdf");
}

Imports IronPdf
Public Sub CreatePdfReport(ByVal htmlContent As String)
	Dim renderer = New ChromePdfRenderer()
	Dim pdf = renderer.RenderHtmlAsPdf(htmlContent)
	pdf.SaveAs("Report.pdf")
End Sub

VB C#

確保將 "chart.png" 在 htmlContent 字串中替換為您的圖表圖像的正確路徑，如果它不在與您的應用程式可執行文件相同的目錄中。

此範例涵蓋了一個基本情境來說明該過程。根據您的具體需求，您可能需要調整程式碼，特別是在處理和獲取圖表圖像的方式上。

Livecharts C#（適用於開發人員的工作原理）：圖4

進階技術與提示

為了進一步加強整合：

優化效能：對於大型數據集或複雜圖表，考慮優化 LiveCharts 和 IronPDF 的效能，以確保快速加載和順暢運行。
互動式 PDF：雖然 PDF 是靜態的，但添加超連結或書籤可以改善導航，使報告更加用戶友好。
自訂樣式：在您的 HTML 模板中使用 CSS，以確保報告符合您的企業品牌或設計準則。

結論

Livecharts C#（開發人員如何使用）：圖 5

總之，將LiveCharts與IronPDF結合使用，為.NET開發人員提供了一個強大的組合，使其能夠創建動態且視覺吸引力的圖表，並將其整合到專業風格的PDF報告中。這種協同作用不僅增強了數據的呈現，還透過從動態數據集生成靜態報告來擴展應用程式的實用性。

IronPDF 能夠將 HTML 渲染成 PDF，完全支援 CSS3、JavaScript 和 HTML5，確保您的圖表能夠從螢幕無縫轉換到列印頁面。對於有興趣探索此功能的人，IronPDF 提供一個IronPDF 免費試用，起價 $749提供一個具成本效益的解決方案，用於在 .NET 應用程式中生成高品質報告。

< 上一頁
Masstransit C#（它如何為開發者工作）

下一個 >
MS Graph .NET（它對開發人員的運作方式）