Livecharts C#（開発者向けの動作方法）

ライブチャート は、.NET 開発者向けのライブラリです。 LiveChartsは、C#アプリケーションで動的で美しいチャートを作成するのに役立ちます。 これは、データが変更されるとチャートが自動的にリフレッシュされることを意味します。 LiveChartsは従来のアプリケーションだけのためのものではありません。 それはWindows Presentation Foundationをサポートしています (WPF). これにより、デスクトップアプリケーションにとって多用途なツールとなります。

主要機能と利点

データビジュアライゼーションのニーズに対応する答えをお探しですか？ LiveChartsは包括的なソリューションを提供します。 LiveChartsは幅広い機能を提供します。 以下は主なポイントです：

• 自動アニメーション：チャートは自動的にアニメーションし、追加のコードを必要とせずにスムーズに更新されるため、データの可視化がより魅力的になります。
• WPFサポート: LiveChartsをWPFアプリケーションで使用できます。 これにより、リッチなユーザーインターフェイスが実現します。
• 高パフォーマンス: 特に大規模なデータセットに対して、パフォーマンス、速度、効率を向上させるよう設計されています。
• 柔軟性: 簡単で柔軟性があり、インタラクティブで最初から使いやすく、プロジェクトのニーズに合わせた複雑なカスタマイズも可能です。
• インタラクティブチャート: ユーザーはチャートとインタラクションできます。 これにより、データ探索が直感的になります。

• 幅広いチャートタイプ: どのようなデータの可視化ニーズにも、LiveChartsにはそれに適したチャートタイプがあります。

  LiveChartsは、複雑なデータをインタラクティブで魅力的なビジュアル表現に変換します。 その使いやすさと柔軟性により、開発者にとって強力なツールとなります。 強力なLiveChartsの機能を使用することで、開発者は複雑なデータをインタラクティブで魅力的な視覚表現に変換することができます。 私たちはLiveChartsの機能とその統合について探っていきます IronPDFライブラリ.

LiveChartsの使い始め

開発環境を設定してLiveChartsを使用するのは簡単で、ソースコードにアクセスすることでカスタマイズと理解が向上します。 このセクションでは、初期のステップを案内し、最初のグラフを作成する手順をサポートします。

環境の設定

LiveChartsを使用するには、Visual Studioがインストールされていることを確認してください。 次に、動的データビジュアライゼーションのために設計された LiveCharts パッケージ（ギアードパッケージ）をプロジェクトに追加します。 これをNuGetパッケージマネージャー経由で行うことができます。 LiveChartsを検索して最新バージョンをインストールします。 このプロセスは、プロジェクトに必要なすべての参照を追加します。

LiveChartsで初めてのチャート作成

初めてのチャートを作成するには、いくつかの簡単な手順が必要です。 まず、アプリケーションのUIにチャートコントロールを追加します。 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}"/>

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

このコードスニペットは、シンプルな折れ線グラフを作成します。 それは直交座標系チャートに一連の値を表示します。 ウィンドウやコントロールの 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

グラフタイプの詳細

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

このコードスニペットは、2つのデータシリーズで基本的な円グラフを設定します。 線グラフの例のように、PieSeriesをValuesプロパティにバインドします。

LiveChartsは、チャートの外観や動作に対する柔軟性と制御も提供します。 色やラベルからアニメーションやインタラクティブ性に至るまで、ほぼすべての側面をカスタマイズできます。 これにより、チャートをアプリケーションの外観や操作感に完璧に合わせることが可能になります。

IronPDFの紹介

LiveCharts と IronPDF を統合することで、ダイナミックなデータ視覚化と静的なレポート生成のギャップを埋めることができます。 IronPDFは、開発者がプログラムによってPDFドキュメントを作成、操作、変換するための強力なC#ライブラリです。

LiveChartsと組み合わせることで、インタラクティブなチャートを含むPDFレポートの作成が可能になります。 このセクションではIronPDFを紹介し、プロジェクトに設定する方法を案内します。

なぜIronPDFか？

IronPDF 他のPDFライブラリが不足している部分で優れた能力を発揮します。特に、そのレンダリング能力において卓越しています。 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

ステップ 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>"

ステップ 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

htmlContent 文字列の "chart.png" を、アプリケーションの実行ファイルと同じディレクトリにない場合は、チャート画像の正しいパスに置き換えてください。

この例は、プロセスを説明するための基本的なシナリオをカバーしています。 特定の要件に応じて、特にチャート用の画像の取り扱いやソースに関してはコードを調整する必要があるかもしれません。

高度な技術とヒント

統合をさらに強化するために:

• パフォーマンスの最適化: 大規模なデータセットや複雑なチャートの場合、LiveChartsとIronPDFの両方のパフォーマンスを最適化して、迅速な読み込み時間とスムーズな操作を確保することを検討してください。

• インタラクティブなPDF: PDFは静的であるにもかかわらず、ハイパーリンクやブックマークを追加することでナビゲーションが向上し、レポートがよりユーザーフレンドリーになります。

• カスタムスタイリング: レポートが企業のブランディングやデザインガイドラインに一致するように、HTMLテンプレート内でCSSを使用します。

結論

結論として、LiveChartsとIronPDFの統合は、動的で視覚的に魅力的なチャートを作成し、プロフェッショナルにスタイルされたPDFレポートに組み込むことを目指す.NET開発者にとって強力な組み合わせを提供します。 このシナジーはデータのプレゼンテーションを強化するだけでなく、動的データセットから静的レポートを生成することでアプリケーションのユーティリティを拡張します。

IronPDFのHTMLをPDFに変換する能力は、CSS3、JavaScript、HTML5の完全なサポートを伴って、画面上のチャートを印刷されたページにシームレスに移行させることを保証します。 この機能に興味がある方には、IronPDFが提供する 無料試用 $749から始まり、.NETアプリケーションで高品質なレポート生成のためのコスト効率の良いソリューションを提供します。