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

import {PdfDocument, WaitForType, CssMediaType} from "@ironsoftware/ironpdf";

(async () => {
    const 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>`;

    // Configure rendering options
    const options = {
        enableJavaScript: true,
        waitFor: {
            type: WaitForType.JavaScript,
            maxWaitTime: 1000, // 1000 milliseconds delay
        },
        cssMediaType: CssMediaType.Screen,
    };

    // Render HTML content to a PDF
    const pdf = await PdfDocument.fromHtml(htmlWithJs, { renderOptions: options })

    await pdf.saveAs("js-chart.pdf");
})();

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

IronPDFを使用してJavaScriptでチャートを読み込む場合、JavaScriptの実行に十分な時間を確保することが重要です。上記のコードでは、enableJavaScript プロパティを使用してJavaScriptの実行を有効にしました。

waitForプロパティは、JavaScriptが実行されるのを待つためにレンダリングプロセスを遅延させるために使用されます。この特定の構成では、WaitForType.JavaScript を使用して、スクリプト内で window.ironpdf.notifyRender 関数が呼び出されるまで、または最大待機時間に達するまで待機します。

さらに、CSSメディアオプションにより、HTMLコンテンツの表示とレイアウトが画面の設定に従うことが保証されます。

準備はできましたか？バージョン: 2024.9 新発売

View Licenses >

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

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

関連ドキュメントリンク

準備はできましたか？バージョン: 2024.9 新発売

ライブ環境でテストする

完全に機能する製品

24/5 テクニカルサポート

無料で取得 30日間の試用キー即座に。

試用フォームが送信されました
成功しました.

世界中の何百万人ものエンジニアに信頼されています

ライブ環境でテストする

完全に機能する製品

24/5 テクニカルサポート

無料で取得 30日間の試用キー即座に。

試用フォームが送信されました
成功しました.

世界中の何百万人ものエンジニアに信頼されています

IronPDFはIRONの一部ですスイート

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

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

関連ドキュメントリンク

準備はできましたか？ バージョン: 2024.9 新発売

無料で手に入れましょう

試用フォームが送信されました成功しました.

試用フォームが送信されました成功しました.

試用フォームが送信されました成功しました.

試用フォームが送信されました成功しました.

ライブ環境でテストする

完全に機能する製品

24/5 テクニカルサポート

無料で取得 30日間の試用キー 即座に。

試用フォームが送信されました成功しました.

世界中の何百万人ものエンジニアに信頼されています

ライブ環境でテストする

完全に機能する製品

24/5 テクニカルサポート

無料で取得 30日間の試用キー 即座に。

試用フォームが送信されました成功しました.

世界中の何百万人ものエンジニアに信頼されています

IronPDFはIRONの一部ですスイート

準備はできましたか？バージョン: 2024.9 新発売

試用フォームが送信されました
成功しました.

試用フォームが送信されました
成功しました.

試用フォームが送信されました
成功しました.

試用フォームが送信されました
成功しました.

無料で取得 30日間の試用キー即座に。

試用フォームが送信されました
成功しました.

無料で取得 30日間の試用キー即座に。

試用フォームが送信されました
成功しました.