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

pip install ironpdf

pip install ironpdf

PDF 형식으로 차트 표시

IronPDF for Python은 D3.js 및 C3.js와 같은 인터랙티브 JavaScript 차트 라이브러리를 직접 PDF로 렌더링할 수 있으며, 추가적인 이미지 변환 단계 없이 고품질 차트 이미지를 생성합니다.

시작하기

필요한 CDN 스크립트 태그를 포함하는 독립형 HTML 문자열로 차트를 작성하십시오. EnableJavaScript = True을 설정하고 PDF가 캡처되기 전에 차트 라이브러리가 그리기를 완료했는지 확인하기 위해 넉넉한 WaitFor.RenderDelay를 추가하십시오. 선택적으로 CssMediaType을(를) Print으로 설정하여 인쇄 전용 스타일을 적용할 수 있습니다.

코드 이해하기

EnableJavaScript: 차트를 생성하는 D3 및 C3 스크립트를 실행하는 데 필요합니다. WaitFor.RenderDelay(1000): 페이지 로드 후 1000밀리초 대기합니다. 차트 라이브러리는 비동기적 렌더링을 수행하므로 단순한 DOM 조작보다 더 긴 지연이 필요합니다.

CssMediaType = PdfCssMediaType.Print: 일반적으로 상호 작용 제어를 제거하고 PDF에서 더 깔끔한 차트 레이아웃을 생성하는 @media print CSS 규칙을 활성화합니다. RenderHtmlAsPdf(htmlWithJs): 완벽하게 렌더링된 HTML, 즉 렌더링된 차트를 포함하여 PDF 문서로 변환합니다.