PDFでチャートをレンダリング

VB C#

using IronPdf;

const string htmlWithJs =
    @"<!DOCTYPE html>
    <html>
        <head>
            <meta charset='utf-8' />
            <title>C3 Bar Chart</title>
        </head>
        <body>
            <div id='chart' style='width: 950px;'></div>
            <script src='https://d3js.org/d3.v4.js'></script>
            <!-- Load c3.css -->
            <link href='https://cdnjs.cloudflare.com/ajax/libs/c3/0.5.4/c3.css' rel='stylesheet'>
            <!-- Load d3.js and c3.js -->
            <script src='https://cdnjs.cloudflare.com/ajax/libs/c3/0.5.4/c3.js'></script>
            <script>
                Function.prototype.bind = Function.prototype.bind || function (thisp) {
                    var fn = this;
                    return function() {
                        return fn.apply(thisp, arguments);
                    };
                };
                var chart = c3.generate({
                bindto: '#chart',
                data: {
                    columns: [
                        ['data1', 30, 200, 100, 400, 150, 250],
                        ['data2', 50, 20, 10, 40, 15, 25]
                    ]
                }
                });
            // Set delay
            setTimeout(function() {
                window.ironpdf.notifyRender();
            }, 1000);
            </script>
        </body>
    </html>";

// Instantiate Renderer
var renderer = new ChromePdfRenderer();

// Enable JavaScript in our RenderingOptions
renderer.RenderingOptions.EnableJavaScript = true;
renderer.RenderingOptions.WaitFor.JavaScript();
renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Print;

var pdf = renderer.RenderHtmlAsPdf(htmlWithJs);

// Export to a file or Stream
pdf.SaveAs("js-chart.pdf");

IRON VB CONVERTER ERROR developers@ironsoftware.com

Install-Package IronPdf

PDFでチャートをレンダリング

強力なHTMLからPDFへの変換機能に加えて、IronPDFはJavaScriptレンダリングの完全なサポートを提供します。これには、キャンバスとチャートのレンダリングのサポートが含まれます。このJavaScriptの完全なサポートにより、開発者は3Dチャートや多角形を含む完全にレンダリングされたチャートを備えた高品質のPDFを作成できます。

サポートされているチャートの一部には以下が含まれます:

C3.js

D3.js (ディースリー・ジェイエス)

Note: For clarity in Japanese, including a phonetic representation in parentheses follows common practice.

ハイチャート

PDFにチャートをレンダリングする手順


var renderer = new ChromePdfRenderer
```();
- `renderer.RenderingOptions.EnableJavaScript = true;`
- renderer.RenderingOptions.WaitFor.JavaScript();

 renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Print;

 - ```java
var pdf = renderer.RenderHtmlAsPdf
```(htmlWithJs);

 まず初めに、PDFドキュメントを作成するために使用するHTMLコンテンツを作成する必要があります。 このHTMLには、C3ライブラリを使用してバー チャートを生成するためのインラインJavaScriptが含まれています。 setTimeout関数は、1秒後に`window.ironpdf.notifyRender`が確実に実行されるようにします。()` が呼び出されると、JavaScript の実行が完了した後にページのレンダリングを進めるようにIronPDFに信号が送られます。

 これが読みやすいPDFドキュメントにどのようにレンダリングされるかを見てみましょう。 まず、新しい`ChromePdfRenderer`インスタンスを作成します。これはIronPDFが使用する強力なレンダリングエンジンにアクセスするために使用され、HTMLページで高度なJavaScriptをレンダリングすることを可能にします。

 次に、`RenderingOptions` クラスを使用して設定する3つの異なるオプションがあります。 最初の `EnableJavaScript = true` は、HTMLページをレンダリングする際に、例のHTML文書内のJavaScriptが実行されることを保証します。 `WaitFor.JavaScript()` を使用して、すべてのJavaScriptが実行されるまでレンダリングプロセスを一時停止し、チャートが適切にレンダリングされるようにします。 3番目のオプション、`CssMediaType = IronPdf.Rendering.PdfCssMediaType.Print`は、CSSメディアタイプを印刷に設定し、PDFレンダリング用にスタイルを最適化します。

 次のステップは、以前に作成したHTMLドキュメントをPDFファイルにレンダリングすることです。これは、`RenderHtmlAsPdf` メソッドを使用して行われます。このメソッドは `htmlWithJs` 変数を取り込み、HTMLとJavaScriptを新しいPDFドキュメントに変換します。

 最後に、PDFドキュメントを`SaveAs`メソッドを使用して保存できます。 これで、HTMLとJavaScriptを使用して作成された完全にレンダリングされたチャートを含む新しいPDFドキュメントが作成されます。

 [こちらをクリックして、例、サンプルコード、ファイルを含むハウツーガイドを表示してください >](https://ironpdf.com/how-to/javascript-to-pdf/#charting-with-javascript-ironpdf)


var renderer = new ChromePdfRenderer
```();
- `renderer.RenderingOptions.EnableJavaScript = true;`
- renderer.RenderingOptions.WaitFor.JavaScript();

 renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Print;

 - ```java
var pdf = renderer.RenderHtmlAsPdf
```(htmlWithJs);

 まず初めに、PDFドキュメントを作成するために使用するHTMLコンテンツを作成する必要があります。 このHTMLには、C3ライブラリを使用してバー チャートを生成するためのインラインJavaScriptが含まれています。 setTimeout関数は、1秒後に`window.ironpdf.notifyRender`が確実に実行されるようにします。()` が呼び出されると、JavaScript の実行が完了した後にページのレンダリングを進めるようにIronPDFに信号が送られます。

 これが読みやすいPDFドキュメントにどのようにレンダリングされるかを見てみましょう。 まず、新しい`ChromePdfRenderer`インスタンスを作成します。これはIronPDFが使用する強力なレンダリングエンジンにアクセスするために使用され、HTMLページで高度なJavaScriptをレンダリングすることを可能にします。

 次に、`RenderingOptions` クラスを使用して設定する3つの異なるオプションがあります。 最初の `EnableJavaScript = true` は、HTMLページをレンダリングする際に、例のHTML文書内のJavaScriptが実行されることを保証します。 `WaitFor.JavaScript()` を使用して、すべてのJavaScriptが実行されるまでレンダリングプロセスを一時停止し、チャートが適切にレンダリングされるようにします。 3番目のオプション、`CssMediaType = IronPdf.Rendering.PdfCssMediaType.Print`は、CSSメディアタイプを印刷に設定し、PDFレンダリング用にスタイルを最適化します。

 次のステップは、以前に作成したHTMLドキュメントをPDFファイルにレンダリングすることです。これは、`RenderHtmlAsPdf` メソッドを使用して行われます。このメソッドは `htmlWithJs` 変数を取り込み、HTMLとJavaScriptを新しいPDFドキュメントに変換します。

 最後に、PDFドキュメントを`SaveAs`メソッドを使用して保存できます。 これで、HTMLとJavaScriptを使用して作成された完全にレンダリングされたチャートを含む新しいPDFドキュメントが作成されます。

 [こちらをクリックして、例、サンプルコード、ファイルを含むハウツーガイドを表示してください >](https://ironpdf.com/how-to/javascript-to-pdf/#charting-with-javascript-ironpdf)

JAVASCRIPT

GitHubで見る

コード

https://github.com/iron-software/IronPdf.Examples/tree/main/examples/js-charts-to-pdf

ZIPをダウンロード