.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 パッケージ(ギアードパッケージ)をプロジェクトに追加します。 これをNuGetパッケージマネージャー経由で行うことができます。 LiveChartsを検索して、最新バージョンをインストールしてください。 このプロセスは、プロジェクトに必要なすべての参照を追加します。

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

初めてのチャートを作成するには、いくつかの簡単な手順が必要です。 まず、アプリケーションのUIにチャートコントロールを追加します。 WPFを使用している場合、XAMLでこれを行うか、またはC#でプログラム的に実行できます。

以下はXAMLの基本的な例です:

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

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

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

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

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

Livecharts C#(開発者向けの仕組み):図2

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

IronPDFの紹介

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

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

なぜIronPDFか?

IronPDFのHTMLからPDFへの変換機能は、他の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}");
}

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

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

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

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

Livecharts C# (開発者向けの動作について):図4

高度な技術とヒント

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

  • パフォーマンスの最適化: 大規模なデータセットや複雑なチャートの場合、LiveChartsとIronPDFの両方のパフォーマンスを最適化して、読み込み時間の短縮とスムーズな動作を確保することを検討してください。
  • インタラクティブPDF: PDFは静的ですが、ハイパーリンクやブックマークを追加することでナビゲーションが改善され、レポートがよりユーザーフレンドリーになります。
  • カスタムスタイリング: HTMLテンプレート内でCSSを使用して、レポートが企業のブランディングやデザインガイドラインに合うようにします。

結論

Livecharts C#(開発者向けの仕組み):図5

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

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

リーガン・パン
ソフトウェアエンジニア
レーガンはリーディング大学で電子工学の学士号を取得しました。Iron Softwareに入社する前の仕事では、一つのタスクに集中して取り組んでいました。Iron Softwareでは、営業、技術サポート、製品開発、マーケティングのいずれにおいても広範な業務に携わることが最も楽しいと感じています。彼は、Iron Softwareライブラリを開発者がどのように使用しているかを理解し、その知識を使ってドキュメントを継続的に改善し、製品を開発することを楽しんでいます。
< 以前
Masstransit C#(開発者のための機能説明)
次へ >
MS Graph .NET(開発者向けの仕組み)