Rendering Charts and Graphs in PDFs

import com.ironsoftware.ironpdf.PdfDocument;
import com.ironsoftware.ironpdf.render.ChromePdfRenderOptions;
import com.ironsoftware.ironpdf.render.CssMediaType;
import java.io.IOException;
import java.nio.file.Paths;

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

ChromePdfRenderOptions renderingOptions = new ChromePdfRenderOptions();
renderingOptions.setEnableJavaScript(true);
renderingOptions.setWaitFor(new WaitFor(1000));
renderingOptions.setCssMediaType(CssMediaType.PRINT);

PdfDocument pdf = PdfDocument.renderHtmlAsPdf(htmlWithJs, renderingOptions);

// Save the PDF
try {
    pdf.saveAs(Paths.get("assets/js_chart.pdf"));
} catch(IOException exception) {
    exception.printStackTrace();
}

Rendering Charts and Graphs in PDFs

IronPDF 能夠渲染包含圖表、圖形以及其他採用現代 JavaScript 技術建構的元素之網頁。

IronPDF 支援 WebGL，使其能夠利用電腦的硬體繪圖功能來處理基於 Web Canvas 建構的元素。

IronPDF 支援所有第三方圖表函式庫，包括：

C3.js
D3.js
Highcharts

setEnableJavaScript 物件上的 ChromePdfRenderOptions 方法，可讓開發人員啟用網頁內外部所引用的 JavaScript 處理功能。此屬性必須設定為 true，才能讓 IronPDF 處理網頁上渲染圖表與圖形所需的 JavaScript。

setRenderDelay 會將 IronPDF 設定為在載入 DOM 後，延遲一段指定時間（以毫秒為單位）才開始解析網頁的 JavaScript。此方法有助於確保 IronPDF 的 HTML 轉 PDF 轉換器能擷取網頁內容，即使該內容是在瀏覽器完成初始載入後數秒才顯示的。這對於執行時間較長的非同步 JavaScript 程式碼而言尤為重要。

請參閱 JavaScript 圖表轉 PDF 程式碼範例，以了解 ChromePdfRenderOptions 類別中可用的其他方法。