1. IronPDF
  2. IronPDF 部落格
  3. .NET 幫助
  4. livecharts-csharp
.NET 幫助

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

發佈 2024年4月29日
分享:

LiveCharts 是供 .NET 開發人員使用的庫。LiveCharts 幫助在 C# 應用程式中創建動態且美觀的圖表。這意味著當您的數據變更時，您的圖表會自動刷新。LiveCharts 不僅僅適用於傳統應用程式。它支援 Windows Presentation Foundation (WPF)這使它成為一個多用途的桌面應用工具。

主要特點和效益

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

  • 自動動畫：圖表會自動動畫，平滑地更新，無需額外代碼，使您的數據可視化更具吸引力。
  • 支持 WPF：您可以在 WPF 應用程序中使用 LiveCharts，這允許豐富的用戶界面。
  • 高性能：專為提高性能、速度和效率而設計，特別是處理大型數據集時。
  • 靈活性：它從一開始就簡單、靈活、互動且易於使用，但也允許根據您的項目需求進行複雜的自定義。
  • 交互式圖表：用戶可以與圖表互動，這使得數據探索變得直觀。
  • 多種類型圖表：無論您的數據可視化需求是什麼，LiveCharts 都提供相應的圖表類型。

LiveCharts 將複雜的數據轉化為互動且引人入勝的視覺表現。其易用性和靈活性使其成為開發者的強大工具。使用功能強大的 LiveCharts，開發者可以將複雜的數據轉化為互動且引人入勝的視覺表現。我們將探討 LiveCharts 的功能及其整合。 IronPDF 庫.

開始使用 LiveCharts

設定您的開發環境以使用 LiveCharts 非常簡單，訪問其源代碼可以增強定制性和理解。此部分將引導您完成初始步驟，幫助您創建您的第一個圖表。

設置您的環境

要使用 LiveCharts，請確保您已安裝 Visual Studio。然後，將專為動態數據可視化設計的 LiveCharts 套件添加到您的項目中。您可以通過 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 擅長於其他PDF庫無法達成的地方，特別是在其渲染能力上 HTML轉PDF此功能特別適用於使用LiveCharts時，因為您可以將您的圖表渲染到HTML畫布，然後將這些畫布轉換成PDF文件。IronPDF支持完整的CSS3、JavaScript和HTML5，確保您的圖表在PDF輸出中看起來與預期一致。

LiveCharts 與 IronPDF

以下是一個詳細的代碼範例，說明如何使用 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#

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

此範例涵蓋了一個基本情境，以說明這個過程。根據您的具體需求，您可能需要調整代碼，特別是關於如何處理和取得圖表的圖像。

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

高級技巧和提示

為了進一步提高整合性：

  • 優化性能：對於大型數據集或複雜圖表，考慮優化LiveCharts和IronPDF的性能，以確保快速加載時間和流暢操作。
  • 互動式PDF：雖然PDF是靜態的，但添加超連結或書籤可以改善導航，使報告更加使用者友好。
  • 自定義樣式：在HTML模板中使用CSS，以確保報告符合您的公司品牌或設計指南。

結論

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

總之，將LiveCharts與IronPDF整合，為.NET開發人員提供了一個強大的組合，這樣可以製作動態且視覺吸引力的圖表，並將其納入專業風格的PDF報告中。這種協同作用不僅增強了數據的展示效果，還通過動態數據集生成靜態報告，擴展了應用程序的實用性。

IronPDF具備將HTML呈現為PDF的能力，並且完全支持CSS3、JavaScript和HTML5，確保您的圖表從螢幕順利過渡到印刷頁面。對那些有興趣探索這一功能的人，IronPDF提供了一個 免費試用 起價為 $749，為 .NET 應用程序提供高效且成本效益的高品質報告生成解決方案。

< 上一頁
Masstransit C#（它如何為開發者工作）
下一個 >
MS Graph .NET（它對開發人員的運作方式）
從NuGet 免費用於開發

安裝與 NuGet nuget.org/packages/IronPdf

PM > Install-Package IronPdf

報告問題

準備開始了嗎？ 版本: 2024.10 剛剛發布

免費 NuGet 下載 總下載次數： 10,993,239 查看許可證 >

免費獲取

30天試用序號 立即。

15天試用金鑰 立即。

bullet_checked不需要信用卡或帳戶註冊
試用表格已提交
成功。

您的試用金鑰應該在郵件中。
如果不是，請聯繫
support@ironsoftware.com

bullet_test在生产环境中测试
無浮水印
子彈日曆30天完整
功能性產品
bullet_support24/5 技術支援
試用期間支援

感謝您！

您的授權密鑰已發送到提供的電子郵件地址。聯絡我們

24小時升級優惠：

Save 50% 在一
專業 升級

去 專業 涵蓋10位開發人員
和無限專案。

小時

:

分鐘

:

秒钟

升級到專業版

升級

專業

$600 美元

$299 美元

  • 10 位開發人員
  • 10個地點
  • 10個專案
今天 唯一

5 個 .NET 產品只需 2 個價格

IronPDF IronOCR IronXL IronBarcode IronWebscraper

總套件價值：

$7,192 美元

升級價格

今天
唯一

$499 美元

24小時後

$1,098 美元