Livecharts C#（開發者使用指南）

設定您的環境

若要使用 LiveCharts，請確保已安裝 Visual Studio。 然後，將專為動態資料視覺化而設計的 LiveCharts 套件新增至您的專案中。 您可以透過 NuGet 套件管理器完成此操作。 搜尋LiveCharts並安裝最新版本。 此過程會將所有必要的引用添加到您的專案中。

您在 LiveCharts 上的第一張排行榜

建立您的第一張圖表只需幾個簡單的步驟。 首先，在應用程式的使用者介面中新增圖表控制項。 如果您使用的是 WPF，則可以在 XAML 中執行此操作，也可以使用 C# 以程式設計方式執行此操作。

以下是一個 XAML 基本範例：

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

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

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

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

這段程式碼創造了一個簡單的折線圖。 它在笛卡爾座標系中顯示一系列數值。 請記住設定視窗或控制項的DataContext ，以確保圖表綁定到您的資料。

按照這些步驟，你就能建立並運行一個基本的圖表。 這只是個開始。 LiveCharts 可以實現更複雜、更具互動性的資料視覺化。

了解資料綁定和更新

資料綁定是 LiveCharts 的核心概念。 它可以讓圖表自動反映數據的變化。 此功能對於處理動態資料來源的應用程式尤其有用。

設想一個追蹤股票價格的應用程式。 隨著新數據的到來，您希望圖表能夠更新。 使用 LiveCharts，您只需更新資料來源，圖表就會偵測到這些變更並相應地更新。

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

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

Livecharts C#（開發者使用指南）：圖 1

深入了解圖表類型

LiveCharts 支援多種圖表類型，每種類型適用於不同類型的資料視覺化需求。 以下是一些例子：

*線條系列：*非常適合展示一段時間內的趨勢。 圓餅圖：**最適合顯示資料集中的比例。 *長條圖：可用於比較不同類別之間的數量。

要建立圓餅圖，您可以使用PieSeries類別。 舉個簡單的例子：

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

這段程式碼片段創建了一個包含兩個資料系列的基本圓餅圖。 與折線圖範例類似，它將PieSeries綁定到Values屬性。

Livecharts C#（開發者使用指南）：圖 2

LiveCharts 也提供了對圖表外觀和行為的靈活性和控制權。 從顏色和標籤到動畫和互動性，幾乎所有方面都可以自訂。 這樣一來，您可以根據應用程式的外觀和風格自訂圖表，使其完美契合。

為什麼選擇 IronPDF？

IronPDF 的 HTML 轉 PDF 轉換功能在其他 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()
{
    // 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}");
}

Livecharts C#（開發者使用指南）：圖 3

步驟二：建立 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>";

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

最後，我們將使用 IronPDF 將我們的 HTML 內容（包括嵌入的圖表圖像）轉換為 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");
}

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

本範例涵蓋了一個基本場景，用於說明該過程。 根據您的具體需求，您可能需要調整程式碼，尤其是在處理和取得圖表影像方面。

Livecharts C#（開發者使用指南）：圖 4

高級技巧和提示

為了進一步加強整合：

*最佳化效能：*對於大型資料集或複雜圖表，請考慮最佳化 LiveCharts 和 IronPDF 的效能，以確保快速載入和流暢運行。 互動式 PDF：**雖然 PDF 是靜態的，但添加超連結或書籤可以改善導航，使報告更易於使用。 *自訂樣式：在 HTML 範本中使用 CSS，以確保報表符合您的企業品牌或設計指南。