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

from ironpdf import *

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]
                ]
            }
            });
        </script>
    </body>
</html>
"""

# Instantiate Renderer
renderer = ChromePdfRenderer()

# Enable JavaScript in our RenderingOptions
renderer.RenderingOptions.EnableJavaScript = True
renderer.RenderingOptions.WaitFor.RenderDelay(1000)
renderer.RenderingOptions.CssMediaType = PdfCssMediaType.Print

pdf = renderer.RenderHtmlAsPdf(htmlWithJs)

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

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

IronPDF for Pythonは、D3.jsやC3.jsなどのインタラクティブなJavaScriptチャートライブラリを直接PDFにレンダリングすることができ、高品質のチャート画像を生成します。追加の画像変換ステップは不要です。

開始方法

必要なCDNスクリプトタグを含む、自己完結型のHTML文字列でチャートを作成してください。 WaitFor.RenderDelayをたっぷりと追加して、グラフライブラリの描画が完了する前にPDFがキャプチャされないようにします。印刷専用のスタイルを適用するためにPrintにオプションで設定します。

コードの理解

EnableJavaScript：グラフを生成するD3とC3スクリプトの実行が必要です。
WaitFor.RenderDelay(1000)：ページロード後1000ミリ秒待機します。チャートライブラリは非同期レンダリングを行うため、単純なDOM操作と比べてより長い遅延が必要です。
@media print CSSルールをアクティブにします。
RenderHtmlAsPdf(htmlWithJs)：レンダリングされたグラフを含む完全なHTMLをPDFドキュメントとしてレンダリングします。