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

環境を設定する

LiveCharts を使用するには、Visual Studio がインストールされているか確認してください。 次に、動的データ視覚化用に設計された LiveCharts パッケージをプロジェクトに追加します。 NuGet パッケージマネージャーを介してこれを行うことができます。 LiveCharts を検索し、最新バージョンをインストールします。 このプロセスは、必要なすべての参照をプロジェクトに追加します。

LiveCharts で最初のチャートを作成

最初のチャートを作成するには、いくつかの簡単なステップが必要です。 まず、アプリケーションの UI にチャートコントロールを追加します。 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 はさまざまなチャートタイプをサポートしており、それぞれ異なるデータ視覚化ニーズに適しています。 以下はその例のいくつかです:

*ライン シリーズ:*時間の経過に伴う傾向を表示するのに最適です。 円グラフ:**データセット内の割合を表示するのに最適です。 *棒グラフ:異なるカテゴリ間で数量を比較するのに役立ちます。

円グラフを作成するには、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;
}

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

LiveCharts では、チャートの外観と動作に関する柔軟性と制御も提供します。 色やラベルから、アニメーションやインタラクティビティまでほぼすべての側面をカスタマイズできます。 これにより、アプリケーションの外観と雰囲気に完璧にフィットするようにチャートを調整することが可能です。

なぜIronPDFなのか？

IronPDF の HTML から PDF の変換機能 は、特に HTML を PDF にレンダリングする能力という点で、他の 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}");
}

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

ステップ 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 とIronPDFの両方のパフォーマンスを最適化することを検討してください。 インタラクティブ PDF:** PDF は静的ですが、ハイパーリンクやブックマークを追加するとナビゲーションが改善され、レポートがよりユーザーフレンドリーになります。 *カスタム スタイル: HTML テンプレート内で CSS を使用して、レポートが企業のブランドやデザイン ガイドラインと一致するようにします。