DEV Community: paohaijiao

Timeline Chart for Credit Event History

paohaijiao — Sat, 07 Nov 2026 12:38:21 +0000

Timeline Chart for Credit Event History

jquick-pdf by example — demo #15 of 184. Every article in this series ships one complete, runnable demo: a template file and a Java class. No snippets, no omissions.

A vertical timeline of every credit event attached to a borrower file.

This document belongs to the Credit report — chart series set.

What you'll build

A PDF written to D:/test/creditreport/15_timeline.pdf
A template file (report/credit_report_15_timeline.txt) with 1 bound placeholder
A detail grid of 6 rows × 6 columns, laid out with width:100% so it fills the text area
One self-contained Java class (JQuickCreditReport15TimelineTest) that binds the data and renders the file

Bound placeholders

${svg}

Prerequisites

Java 8+ and one dependency — jquick-pdf is built on Apache PDFBox, not iText:

<dependency>
    <groupId>io.github.paohaijiao</groupId>
    <artifactId>jquick-pdfx</artifactId>
    <version>4.2.0</version>
</dependency>

Coordinates: io.github.paohaijiao:jquick-pdfx:4.2.0.

Step 1 — the template file

JPdfX is jquick-pdf's HTML-like template language. It lives in its own file (src/test/resources/report/credit_report_15_timeline.txt) instead of a Java string, so designers can edit it without touching code.

<pdf>
<body>
  <div style="backgroundColor:#4E342E; borderRadius:4px; padding:16px; marginBottom:12px">
    <h1 style="textAlignment:center; color:white; fontSize:21; bold:true; marginBottom:8px">'企业信用评级报告'</h1>
    <p style="textAlignment:center; color:#efebe9; fontSize:10; margin:2px">'报告编号: CR-2023-08975 | 评估日期: 2023年11月15日'</p>
    <p style="textAlignment:center; color:#efebe9; fontSize:10; margin:2px">'评估机构: 四川省企业信用评估中心'</p>
  </div>

  <div style="marginBottom:14px">
    <h2 style="color:#4E342E; fontSize:14; bold:true; marginBottom:8px">'四川省泡海椒科技有限公司'</h2>
    <div style="display:flex; justifyContent:space-between; marginBottom:8px">
      <div style="width:190px; padding:8px; borderLeft:3px solid #8D6E63; backgroundColor:#efebe9">
        <p style="fontSize:9; color:#6D4C41; marginBottom:2px">'统一信用代码'</p>
        <p style="fontSize:11; bold:true; color:#4E342E">'91110108MA01XX1234'</p>
      </div>
      <div style="width:190px; padding:8px; borderLeft:3px solid #8D6E63; backgroundColor:#efebe9">
        <p style="fontSize:9; color:#6D4C41; marginBottom:2px">'成立日期'</p>
        <p style="fontSize:11; bold:true; color:#4E342E">'2018年5月20日'</p>
      </div>
      <div style="width:190px; padding:8px; borderLeft:3px solid #8D6E63; backgroundColor:#efebe9">
        <p style="fontSize:9; color:#6D4C41; marginBottom:2px">'注册资本'</p>
        <p style="fontSize:11; bold:true; color:#4E342E">'1000万元人民币'</p>
      </div>
    </div>
    <div style="display:flex; justifyContent:space-between">
      <div style="width:190px; padding:8px; borderLeft:3px solid #8D6E63; backgroundColor:#efebe9">
        <p style="fontSize:9; color:#6D4C41; marginBottom:2px">'法定代表人'</p>
        <p style="fontSize:11; bold:true; color:#4E342E">'泡海椒'</p>
      </div>
      <div style="width:190px; padding:8px; borderLeft:3px solid #8D6E63; backgroundColor:#efebe9">
        <p style="fontSize:9; color:#6D4C41; marginBottom:2px">'所属行业'</p>
        <p style="fontSize:11; bold:true; color:#4E342E">'软件和信息技术服务业'</p>
      </div>
      <div style="width:190px; padding:8px; borderLeft:3px solid #8D6E63; backgroundColor:#efebe9">
        <p style="fontSize:9; color:#6D4C41; marginBottom:2px">'企业规模'</p>
        <p style="fontSize:11; bold:true; color:#4E342E">'中型（150-200人）'</p>
      </div>
    </div>
  </div>

  <div style="marginBottom:14px">
    <h2 style="color:#6D4C41; fontSize:13; bold:true; marginBottom:10px">'历年财务数据（单位：万元）'</h2>
    <table style="width:600px; fontSize:10">
      <tr>
        <th style="backgroundColor:#6D4C41; color:white; padding:6px; textAlignment:center">'财务指标'</th>
        <th style="backgroundColor:#6D4C41; color:white; padding:6px; textAlignment:center">'2020年'</th>
        <th style="backgroundColor:#6D4C41; color:white; padding:6px; textAlignment:center">'2021年'</th>
        <th style="backgroundColor:#6D4C41; color:white; padding:6px; textAlignment:center">'2022年'</th>
        <th style="backgroundColor:#6D4C41; color:white; padding:6px; textAlignment:center">'2023年'</th>
        <th style="backgroundColor:#6D4C41; color:white; padding:6px; textAlignment:center">'增长率'</th>
      </tr>
      <tr>
        <td style="padding:5px; bold:true; borderBottom:1px solid #d7ccc8">'营业收入'</td>
        <td style="padding:5px; textAlignment:right; borderBottom:1px solid #d7ccc8">'8,560'</td>
        <td style="padding:5px; textAlignment:right; borderBottom:1px solid #d7ccc8">'12,340'</td>
        <td style="padding:5px; textAlignment:right; borderBottom:1px solid #d7ccc8">'18,920'</td>
        <td style="padding:5px; textAlignment:right; borderBottom:1px solid #d7ccc8">'25,680'</td>
        <td style="padding:5px; textAlignment:right; borderBottom:1px solid #d7ccc8; color:#2e7d32; bold:true">'+44.2%'</td>
      </tr>
      <tr>
        <td style="padding:5px; bold:true; backgroundColor:#f7f4f3; borderBottom:1px solid #d7ccc8">'净利润'</td>
        <td style="padding:5px; textAlignment:right; backgroundColor:#f7f4f3; borderBottom:1px solid #d7ccc8">'1,240'</td>
        <td style="padding:5px; textAlignment:right; backgroundColor:#f7f4f3; borderBottom:1px solid #d7ccc8">'2,150'</td>
        <td style="padding:5px; textAlignment:right; backgroundColor:#f7f4f3; borderBottom:1px solid #d7ccc8">'3,890'</td>
        <td style="padding:5px; textAlignment:right; backgroundColor:#f7f4f3; borderBottom:1px solid #d7ccc8">'5,420'</td>
        <td style="padding:5px; textAlignment:right; backgroundColor:#f7f4f3; borderBottom:1px solid #d7ccc8; color:#2e7d32; bold:true">'+63.8%'</td>
      </tr>
      <tr>
        <td style="padding:5px; bold:true; borderBottom:1px solid #d7ccc8">'总资产'</td>
        <td style="padding:5px; textAlignment:right; borderBottom:1px solid #d7ccc8">'15,800'</td>
        <td style="padding:5px; textAlignment:right; borderBottom:1px solid #d7ccc8">'22,450'</td>
        <td style="padding:5px; textAlignment:right; borderBottom:1px solid #d7ccc8">'31,200'</td>
        <td style="padding:5px; textAlignment:right; borderBottom:1px solid #d7ccc8">'42,800'</td>
        <td style="padding:5px; textAlignment:right; borderBottom:1px solid #d7ccc8; color:#2e7d32; bold:true">'+39.5%'</td>
      </tr>
      <tr>
        <td style="padding:5px; bold:true; backgroundColor:#f7f4f3; borderBottom:1px solid #d7ccc8">'净资产'</td>
        <td style="padding:5px; textAlignment:right; backgroundColor:#f7f4f3; borderBottom:1px solid #d7ccc8">'9,200'</td>
        <td style="padding:5px; textAlignment:right; backgroundColor:#f7f4f3; borderBottom:1px solid #d7ccc8">'13,800'</td>
        <td style="padding:5px; textAlignment:right; backgroundColor:#f7f4f3; borderBottom:1px solid #d7ccc8">'19,500'</td>
        <td style="padding:5px; textAlignment:right; backgroundColor:#f7f4f3; borderBottom:1px solid #d7ccc8">'26,400'</td>
        <td style="padding:5px; textAlignment:right; backgroundColor:#f7f4f3; borderBottom:1px solid #d7ccc8; color:#2e7d32; bold:true">'+42.1%'</td>
      </tr>
      <tr>
        <td style="padding:5px; bold:true; borderBottom:1px solid #d7ccc8">'毛利率'</td>
        <td style="padding:5px; textAlignment:right; borderBottom:1px solid #d7ccc8">'42.5%'</td>
        <td style="padding:5px; textAlignment:right; borderBottom:1px solid #d7ccc8">'45.8%'</td>
        <td style="padding:5px; textAlignment:right; borderBottom:1px solid #d7ccc8">'48.2%'</td>
        <td style="padding:5px; textAlignment:right; borderBottom:1px solid #d7ccc8">'51.6%'</td>
        <td style="padding:5px; textAlignment:right; borderBottom:1px solid #d7ccc8; color:#2e7d32; bold:true">'+9.1%'</td>
      </tr>
    </table>
  </div>

  <div style="marginBottom:14px">
    <h2 style="color:#6D4C41; fontSize:13; bold:true; marginBottom:10px">'关键经营指标'</h2>
    <div style="display:flex; marginBottom:10px">
      <div style="width:24px; paddingTop:4px">
        <div style="width:12px; height:12px; borderRadius:6px; backgroundColor:#8D6E63"></div>
      </div>
      <div style="width:560px; fontSize:11">
        <span style="bold:true; color:#4E342E">'营收增长率: '</span>
        '连续三年保持40%以上增长，2023年达到25,680万元'
      </div>
    </div>
    <div style="display:flex; marginBottom:10px">
      <div style="width:24px; paddingTop:4px">
        <div style="width:12px; height:12px; borderRadius:6px; backgroundColor:#8D6E63"></div>
      </div>
      <div style="width:560px; fontSize:11">
        <span style="bold:true; color:#4E342E">'利润率提升: '</span>
        '净利率从14.5%提升至21.1%，盈利能力显著增强'
      </div>
    </div>
    <div style="display:flex; marginBottom:10px">
      <div style="width:24px; paddingTop:4px">
        <div style="width:12px; height:12px; borderRadius:6px; backgroundColor:#8D6E63"></div>
      </div>
      <div style="width:560px; fontSize:11">
        <span style="bold:true; color:#4E342E">'研发投入: '</span>
        '研发费用年均增长38.9%，占营收比例达13.3%'
      </div>
    </div>
    <div style="display:flex; marginBottom:10px">
      <div style="width:24px; paddingTop:4px">
        <div style="width:12px; height:12px; borderRadius:6px; backgroundColor:#8D6E63"></div>
      </div>
      <div style="width:560px; fontSize:11">
        <span style="bold:true; color:#4E342E">'人才结构: '</span>
        '技术研发人员占比42%，硕士以上学历占35%'
      </div>
    </div>
    <div style="display:flex; marginBottom:10px">
      <div style="width:24px; paddingTop:4px">
        <div style="width:12px; height:12px; borderRadius:6px; backgroundColor:#8D6E63"></div>
      </div>
      <div style="width:560px; fontSize:11">
        <span style="bold:true; color:#4E342E">'客户质量: '</span>
        '服务15家上市公司，客户续约率92%，大客户满意度4.8/5.0'
      </div>
    </div>
    <div style="display:flex; marginBottom:10px">
      <div style="width:24px; paddingTop:4px">
        <div style="width:12px; height:12px; borderRadius:6px; backgroundColor:#8D6E63"></div>
      </div>
      <div style="width:560px; fontSize:11">
        <span style="bold:true; color:#4E342E">'资产质量: '</span>
        '资产负债率维持在38%左右，流动比率2.8，偿债能力良好'
      </div>
    </div>
  </div>

  <div style="marginBottom:14px">
    <h2 style="color:#6D4C41; fontSize:13; bold:true; marginBottom:10px">'信用里程碑时间线'</h2>
    <div style="textAlignment:center">
      <svg style="width:440px;height:400px">${svg}</svg>
    </div>
    <div style="display:flex; flexWrap:wrap; justifyContent:center; marginTop:10px">
      <div style="width:200px; textAlignment:center; fontSize:10">
        <span style="bold:true; color:#4E342E">'财务状况(90分): '</span>
        '营收稳定增长'
      </div>
      <div style="width:200px; textAlignment:center; fontSize:10">
        <span style="bold:true; color:#4E342E">'经营能力(95分): '</span>
        '客户留存率高'
      </div>
      <div style="width:200px; textAlignment:center; fontSize:10">
        <span style="bold:true; color:#4E342E">'偿债能力(85分): '</span>
        '负债率合理'
      </div>
      <div style="width:200px; textAlignment:center; fontSize:10">
        <span style="bold:true; color:#4E342E">'发展潜力(92分): '</span>
        '研发投入增加'
      </div>
    </div>
  </div>

  <div style="marginBottom:14px; background:linear-gradient(135deg, #efebe9 0%, #d7ccc8 100%); borderRadius:4px; padding:16px; borderLeft:4px solid #8D6E63">
    <h2 style="color:#4E342E; fontSize:13; bold:true; marginBottom:8px">'综合评价'</h2>
    <p style="textAlignment:justify; fontSize:11">
      '四川省泡海椒科技有限公司作为国家级高新技术企业和专精特新"小巨人"企业，在云计算和大数据领域表现出色。公司财务状况健康，经营能力突出，技术创新能力强，具备良好的发展潜力。信用评级为AAA级，展望稳定。'
    </p>
  </div>

  <div style="textAlignment:center; marginTop:12px">
    <p style="fontSize:9; color:#a1887f">'本报告依据公开信息和专业评估模型生成，仅供参考 | 报告生成时间: 2025年09月06日'</p>
    <p style="fontSize:9; color:#a1887f">'© 2023 企业信用评估中心 版权所有 | 认证编号: CE-2023-001'</p>
  </div>
</body>
</pdf>

Step 2 — the Java class

jquick-pdfx/src/test/java/com/github/paohaijiao/biz/report/JQuickCreditReport15TimelineTest.java

/*
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
 * Copyright (c) [2025-2099] Martin (goudingcheng@gmail.com)
 */
package com.github.paohaijiao.biz.report;

import com.github.paohaijiao.JOption;
import com.github.paohaijiao.combol.JTimeLineData;
import com.github.paohaijiao.config.JPdfConfig;
import com.github.paohaijiao.demo.constant.JQuickConstant;
import com.github.paohaijiao.enums.JChartType;
import com.github.paohaijiao.executor.JQuickPdfFactory;
import com.github.paohaijiao.factory.JChartRendererFactory;
import org.junit.Test;

import java.awt.Color;
import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

/**
 * 统一信用报告 —— 风格 15：时间线（棕褐）
 *
 * <p>以 {@code report/credit_report_15_timeline.txt} 为模板，把时间线渲染成 SVG 后
 * 绑定到模板中的 {@code ${svg}} 占位符，输出到 {@code D:\test\creditreport\15_timeline.pdf}。</p>
 *
 * @author Martin
 * @version 1.0.0
 */
public class JQuickCreditReport15TimelineTest {

    public static final String path = JQuickConstant.path;

    @Test
    public void report15Timeline() throws IOException {
        JTimeLineData data = new JTimeLineData();
        List<JTimeLineData.FlowNode> nodes = new ArrayList<>();
        nodes.add(new JTimeLineData.FlowNode("2018年", "企业成立|注册资本1000万元", new Color(78, 52, 46), new Color(78, 52, 46)));
        nodes.add(new JTimeLineData.FlowNode("2020年", "首轮融资|营收突破8000万元", new Color(109, 76, 65), new Color(109, 76, 65)));
        nodes.add(new JTimeLineData.FlowNode("2021年", "高新技术企业认定|研发投入占比12%", new Color(141, 110, 99), new Color(141, 110, 99)));
        nodes.add(new JTimeLineData.FlowNode("2022年", "专精特新小巨人|客户续约率92%", new Color(161, 136, 127), new Color(161, 136, 127)));
        nodes.add(new JTimeLineData.FlowNode("2023年", "信用评级AAA|营收25680万元", new Color(188, 170, 164), new Color(188, 170, 164)));
        data.setNodes(nodes);
        data.setMainTitle("CREDIT MILESTONE TIMELINE");
        data.setSubtitle("2018-2023 信用建设关键里程碑");
        data.setFooterText("数据来源：企业信用评估中心 | 更新日期：2024年1月");
        data.setHeight(1300);
        data.setBoxWidth(200);
        data.setBoxHeight(90);
        data.setStartX(100);
        data.setEndX(100);
        JOption option = new JOption();
        option.setData(data);

        String svg = JChartRendererFactory.renderChart(JChartType.TimeLine, option);

        File dir = new File(path + "creditreport");
        if (!dir.exists()) {
            dir.mkdirs();
        }
        FileOutputStream fileOutputStream = new FileOutputStream(path + "creditreport/15_timeline.pdf");
        JPdfConfig config = new JPdfConfig();
        // 开启 flex 行布局：图表与其右侧的指标说明面板在宽度允许时并排，而不是换行堆叠。
        config.getLayoutConfig().setFlexLayout(true);
        JQuickPdfFactory factory = new JQuickPdfFactory(config);
        factory.bind("svg", svg);
        byte[] bytes = factory.executeResource("report/credit_report_15_timeline.txt");
        fileOutputStream.write(bytes);
        fileOutputStream.close();
    }
}

Step 3 — run it

The class is a JUnit test, so run it with Maven:

mvn -pl jquick-pdfx test -Dtest=JQuickCreditReport15TimelineTest

…or call the test method from a main wrapper if you want a plain entry point:

public static void main(String[] args) throws Exception {
    new JQuickCreditReport15TimelineTest().report15Timeline();
}

Output: D:/test/creditreport/15_timeline.pdf

How it works

Binding a chart SVG into the template

The chart is not a bitmap — JChartRendererFactory.renderChart(...) returns an SVG string, and the template embeds it with a single <svg> element bound to ${svg}. That means the chart stays vector-sharp at any zoom level, and it participates in normal flow layout instead of being stamped on top of the page.

Declare only the width on <svg>; the height is derived from the chart's aspect ratio, so the chart never stretches vertically.
Open config.getLayoutConfig().setFlexLayout(true) if the template centers the chart with display:flex.
Bind the SVG string with factory.bind("svg", svg) — bind() is pure data injection and never re-parses markup.

String svg = JChartRendererFactory.renderChart(JChartType.LINE, option);
JQuickPdfFactory factory = new JQuickPdfFactory(config);
factory.bind("svg", svg);
byte[] bytes = factory.executeResource(TEMPLATE);

Flex layout: what it does and does not do

display:flex is opt-in: without config.getLayoutConfig().setFlexLayout(true) the children stack vertically. Even with it enabled, children whose fixed widths sum beyond the text area wrap to the next line — so a two-column layout must budget its pixels.

Enable flex on JPdfConfig before creating the factory.
Use fixed px widths that sum to less than the text width (~483px on A4 with 40pt margins).
Nested div two-column layouts are unreliable here — a full-width single column is safer.

JPdfConfig config = new JPdfConfig();
config.getLayoutConfig().setFlexLayout(true);

Template syntax cheat sheet

Syntax	Meaning
`<image src='D:/.../x.png'>`	Embed an image. `src` is a raw path — it is not evaluated as an expression.
`<svg style="width:479pt">${svg}</svg>`	Embed a vector chart produced by `JChartRendererFactory`.
`// comment`	Line comment. Keep `<!-- ... -->` comments short — long ones can blank the render.
`<p style="fontSize:9pt; bold:true">`	Inline styles use camelCase keys, CSS-like values.
`<lineSeparator style="color:#2E5B8A; thickness:1.5f">`	Horizontal rule with colour and thickness.

Gotchas worth remembering

<image src="..."> never evaluates ${...}; write a literal path.
A <td> holds text only — nested <p>, <image> or <table> is dropped.
There is no colspan; emit one <td> per column and use '—' as filler.
setFontSize takes a float (8.5f); setMargins takes List<Integer>.

Output

Wrap up

You now have a template file, a Java class and a PDF — all three reproducible from a clean clone. Swap the placeholder blocks for real data (or for real seal images) and the layout does not move.

Series navigation: ← #14 Bubble Chart: Loan Exposure, Rate and Delinquency in One View　·　#16 Monthly Revenue and Net Profit: A Dual-Line Chart PDF →

Full index: README.md　·　Source: jquick-pdf

Appendix — files in this demo

Role	Path
Java class	`jquick-pdfx/src/test/java/com/github/paohaijiao/biz/report/JQuickCreditReport15TimelineTest.java`
Template	`jquick-pdfx/src/test/resources/report/credit_report_15_timeline.txt`
Output PDF	`D:/test/creditreport/15_timeline.pdf`
Preview image	`images/15.png`

Bubble Chart: Loan Exposure, Rate and Delinquency in One View

paohaijiao — Thu, 05 Nov 2026 11:36:50 +0000

jquick-pdf by example — demo #14 of 184. Every article in this series ships one complete, runnable demo: a template file and a Java class. No snippets, no omissions.

Three dimensions on a flat page — exposure on X, rate on Y, delinquency as bubble size.

This document belongs to the Credit report — chart series set.

What you'll build

A PDF written to D:/test/creditreport/14_bubble.pdf
A template file (report/credit_report_14_bubble.txt) with 1 bound placeholder
A detail grid of 13 rows × 6 columns, laid out with width:100% so it fills the text area
One self-contained Java class (JQuickCreditReport14BubbleTest) that binds the data and renders the file

Bound placeholders

${svg}

Prerequisites

Java 8+ and one dependency — jquick-pdf is built on Apache PDFBox, not iText:

<dependency>
    <groupId>io.github.paohaijiao</groupId>
    <artifactId>jquick-pdfx</artifactId>
    <version>4.2.0</version>
</dependency>

Coordinates: io.github.paohaijiao:jquick-pdfx:4.2.0.

Step 1 — the template file

JPdfX is jquick-pdf's HTML-like template language. It lives in its own file (src/test/resources/report/credit_report_14_bubble.txt) instead of a Java string, so designers can edit it without touching code.

<pdf>
<body>
  <div style="background:linear-gradient(135deg, #01579B 0%, #03A9F4 100%); borderRadius:8px; padding:18px; marginBottom:12px">
    <h1 style="textAlignment:center; color:white; fontSize:21; bold:true; marginBottom:8px">'企业信用评级报告'</h1>
    <p style="textAlignment:center; color:#e1f5fe; fontSize:10; margin:2px">'报告编号: CR-2023-08975  |  评估日期: 2023年11月15日'</p>
    <p style="textAlignment:center; color:#e1f5fe; fontSize:10; margin:2px">'评估机构: 四川省企业信用评估中心'</p>
  </div>

  <div style="marginBottom:14px">
    <table style="width:600px; fontSize:10">
      <tr>
        <th style="width:150px; padding:6px; backgroundColor:#0288D1; color:white; textAlignment:center">'企业名称'</th>
        <th style="padding:6px; backgroundColor:#0288D1; color:white; textAlignment:left">'四川省泡海椒科技有限公司'</th>
      </tr>
      <tr>
        <td style="width:150px; padding:6px; backgroundColor:#e1f5fe; bold:true">'统一信用代码'</td>
        <td style="padding:6px">'91110108MA01XX1234'</td>
      </tr>
      <tr>
        <td style="padding:6px; backgroundColor:#e1f5fe; bold:true">'成立日期'</td>
        <td style="padding:6px">'2018年5月20日'</td>
      </tr>
      <tr>
        <td style="padding:6px; backgroundColor:#e1f5fe; bold:true">'注册资本'</td>
        <td style="padding:6px">'1000万元人民币'</td>
      </tr>
      <tr>
        <td style="padding:6px; backgroundColor:#e1f5fe; bold:true">'法定代表人'</td>
        <td style="padding:6px">'泡海椒'</td>
      </tr>
      <tr>
        <td style="padding:6px; backgroundColor:#e1f5fe; bold:true">'所属行业'</td>
        <td style="padding:6px">'软件和信息技术服务业'</td>
      </tr>
      <tr>
        <td style="padding:6px; backgroundColor:#e1f5fe; bold:true">'企业规模'</td>
        <td style="padding:6px">'中型（150-200人）'</td>
      </tr>
    </table>
  </div>

  <div style="marginBottom:14px">
    <h2 style="color:#01579B; fontSize:13; bold:true; marginBottom:10px">'历年财务数据（单位：万元）'</h2>
    <table style="width:600px; fontSize:10">
      <tr>
        <th style="backgroundColor:#0288D1; color:white; padding:6px; textAlignment:center">'财务指标'</th>
        <th style="backgroundColor:#0288D1; color:white; padding:6px; textAlignment:center">'2020年'</th>
        <th style="backgroundColor:#0288D1; color:white; padding:6px; textAlignment:center">'2021年'</th>
        <th style="backgroundColor:#0288D1; color:white; padding:6px; textAlignment:center">'2022年'</th>
        <th style="backgroundColor:#0288D1; color:white; padding:6px; textAlignment:center">'2023年'</th>
        <th style="backgroundColor:#0288D1; color:white; padding:6px; textAlignment:center">'增长率'</th>
      </tr>
      <tr>
        <td style="padding:5px; bold:true; borderBottom:1px solid #b3e5fc">'营业收入'</td>
        <td style="padding:5px; textAlignment:right; borderBottom:1px solid #b3e5fc">'8,560'</td>
        <td style="padding:5px; textAlignment:right; borderBottom:1px solid #b3e5fc">'12,340'</td>
        <td style="padding:5px; textAlignment:right; borderBottom:1px solid #b3e5fc">'18,920'</td>
        <td style="padding:5px; textAlignment:right; borderBottom:1px solid #b3e5fc">'25,680'</td>
        <td style="padding:5px; textAlignment:right; borderBottom:1px solid #b3e5fc; color:#2e7d32; bold:true">'+44.2%'</td>
      </tr>
      <tr>
        <td style="padding:5px; bold:true; backgroundColor:#f2fafd; borderBottom:1px solid #b3e5fc">'净利润'</td>
        <td style="padding:5px; textAlignment:right; backgroundColor:#f2fafd; borderBottom:1px solid #b3e5fc">'1,240'</td>
        <td style="padding:5px; textAlignment:right; backgroundColor:#f2fafd; borderBottom:1px solid #b3e5fc">'2,150'</td>
        <td style="padding:5px; textAlignment:right; backgroundColor:#f2fafd; borderBottom:1px solid #b3e5fc">'3,890'</td>
        <td style="padding:5px; textAlignment:right; backgroundColor:#f2fafd; borderBottom:1px solid #b3e5fc">'5,420'</td>
        <td style="padding:5px; textAlignment:right; backgroundColor:#f2fafd; borderBottom:1px solid #b3e5fc; color:#2e7d32; bold:true">'+63.8%'</td>
      </tr>
      <tr>
        <td style="padding:5px; bold:true; borderBottom:1px solid #b3e5fc">'总资产'</td>
        <td style="padding:5px; textAlignment:right; borderBottom:1px solid #b3e5fc">'15,800'</td>
        <td style="padding:5px; textAlignment:right; borderBottom:1px solid #b3e5fc">'22,450'</td>
        <td style="padding:5px; textAlignment:right; borderBottom:1px solid #b3e5fc">'31,200'</td>
        <td style="padding:5px; textAlignment:right; borderBottom:1px solid #b3e5fc">'42,800'</td>
        <td style="padding:5px; textAlignment:right; borderBottom:1px solid #b3e5fc; color:#2e7d32; bold:true">'+39.5%'</td>
      </tr>
      <tr>
        <td style="padding:5px; bold:true; backgroundColor:#f2fafd; borderBottom:1px solid #b3e5fc">'净资产'</td>
        <td style="padding:5px; textAlignment:right; backgroundColor:#f2fafd; borderBottom:1px solid #b3e5fc">'9,200'</td>
        <td style="padding:5px; textAlignment:right; backgroundColor:#f2fafd; borderBottom:1px solid #b3e5fc">'13,800'</td>
        <td style="padding:5px; textAlignment:right; backgroundColor:#f2fafd; borderBottom:1px solid #b3e5fc">'19,500'</td>
        <td style="padding:5px; textAlignment:right; backgroundColor:#f2fafd; borderBottom:1px solid #b3e5fc">'26,400'</td>
        <td style="padding:5px; textAlignment:right; backgroundColor:#f2fafd; borderBottom:1px solid #b3e5fc; color:#2e7d32; bold:true">'+42.1%'</td>
      </tr>
      <tr>
        <td style="padding:5px; bold:true; borderBottom:1px solid #b3e5fc">'毛利率'</td>
        <td style="padding:5px; textAlignment:right; borderBottom:1px solid #b3e5fc">'42.5%'</td>
        <td style="padding:5px; textAlignment:right; borderBottom:1px solid #b3e5fc">'45.8%'</td>
        <td style="padding:5px; textAlignment:right; borderBottom:1px solid #b3e5fc">'48.2%'</td>
        <td style="padding:5px; textAlignment:right; borderBottom:1px solid #b3e5fc">'51.6%'</td>
        <td style="padding:5px; textAlignment:right; borderBottom:1px solid #b3e5fc; color:#2e7d32; bold:true">'+9.1%'</td>
      </tr>
    </table>
  </div>

  <div style="marginBottom:14px">
    <h2 style="color:#01579B; fontSize:13; bold:true; marginBottom:10px">'关键经营指标'</h2>
    <div style="display:flex; marginBottom:9px">
      <div style="width:22px; paddingTop:3px">
        <div style="width:10px; height:10px; borderRadius:5px; backgroundColor:#03A9F4"></div>
      </div>
      <div style="width:560px; fontSize:11">
        <span style="bold:true; color:#01579B">'营收增长率: '</span>
        '连续三年保持40%以上增长，2023年达到25,680万元'
      </div>
    </div>
    <div style="display:flex; marginBottom:9px">
      <div style="width:22px; paddingTop:3px">
        <div style="width:10px; height:10px; borderRadius:5px; backgroundColor:#03A9F4"></div>
      </div>
      <div style="width:560px; fontSize:11">
        <span style="bold:true; color:#01579B">'利润率提升: '</span>
        '净利率从14.5%提升至21.1%，盈利能力显著增强'
      </div>
    </div>
    <div style="display:flex; marginBottom:9px">
      <div style="width:22px; paddingTop:3px">
        <div style="width:10px; height:10px; borderRadius:5px; backgroundColor:#03A9F4"></div>
      </div>
      <div style="width:560px; fontSize:11">
        <span style="bold:true; color:#01579B">'研发投入: '</span>
        '研发费用年均增长38.9%，占营收比例达13.3%'
      </div>
    </div>
    <div style="display:flex; marginBottom:9px">
      <div style="width:22px; paddingTop:3px">
        <div style="width:10px; height:10px; borderRadius:5px; backgroundColor:#03A9F4"></div>
      </div>
      <div style="width:560px; fontSize:11">
        <span style="bold:true; color:#01579B">'人才结构: '</span>
        '技术研发人员占比42%，硕士以上学历占35%'
      </div>
    </div>
    <div style="display:flex; marginBottom:9px">
      <div style="width:22px; paddingTop:3px">
        <div style="width:10px; height:10px; borderRadius:5px; backgroundColor:#03A9F4"></div>
      </div>
      <div style="width:560px; fontSize:11">
        <span style="bold:true; color:#01579B">'客户质量: '</span>
        '服务15家上市公司，客户续约率92%，大客户满意度4.8/5.0'
      </div>
    </div>
    <div style="display:flex; marginBottom:9px">
      <div style="width:22px; paddingTop:3px">
        <div style="width:10px; height:10px; borderRadius:5px; backgroundColor:#03A9F4"></div>
      </div>
      <div style="width:560px; fontSize:11">
        <span style="bold:true; color:#01579B">'资产质量: '</span>
        '资产负债率维持在38%左右，流动比率2.8，偿债能力良好'
      </div>
    </div>
  </div>

  <div style="marginBottom:14px">
    <h2 style="color:#01579B; fontSize:13; bold:true; marginBottom:10px">'风险气泡分布图'</h2>
    <div style="display:flex; justifyContent:space-between">
      <svg style="width:390px;height:400px">${svg}</svg>
      <div style="width:300px; backgroundColor:#e1f5fe; borderRadius:6px; padding:12px">
        <h3 style="color:#01579B; fontSize:12; bold:true; marginBottom:8px">'评级指标说明'</h3>
        <div style="fontSize:10; marginBottom:6px">
          <span style="bold:true; color:#0288D1">'财务状况(90分): '</span>
          '营收稳定增长'
        </div>
        <div style="fontSize:10; marginBottom:6px">
          <span style="bold:true; color:#0288D1">'经营能力(95分): '</span>
          '客户留存率高'
        </div>
        <div style="fontSize:10; marginBottom:6px">
          <span style="bold:true; color:#0288D1">'偿债能力(85分): '</span>
          '负债率合理'
        </div>
        <div style="fontSize:10; marginBottom:6px">
          <span style="bold:true; color:#0288D1">'发展潜力(92分): '</span>
          '研发投入增加'
        </div>
      </div>
    </div>
  </div>

  <div style="marginBottom:14px; backgroundColor:#e1f5fe; borderRadius:8px; padding:16px; borderLeft:4px solid #0288D1">
    <h2 style="color:#01579B; fontSize:13; bold:true; marginBottom:8px">'综合评价'</h2>
    <p style="textAlignment:justify; fontSize:11">
      '四川省泡海椒科技有限公司作为国家级高新技术企业和专精特新"小巨人"企业，在云计算和大数据领域表现出色。公司财务状况健康，经营能力突出，技术创新能力强，具备良好的发展潜力。信用评级为AAA级，展望稳定。'
    </p>
  </div>

  <div style="textAlignment:center; marginTop:12px">
    <p style="fontSize:9; color:#4fc3f7">'本报告依据公开信息和专业评估模型生成，仅供参考 | 报告生成时间: 2025年09月06日'</p>
    <p style="fontSize:9; color:#4fc3f7">'© 2023 企业信用评估中心 版权所有 | 认证编号: CE-2023-001'</p>
  </div>
</body>
</pdf>

Step 2 — the Java class

jquick-pdfx/src/test/java/com/github/paohaijiao/biz/report/JQuickCreditReport14BubbleTest.java

/*
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
 * Copyright (c) [2025-2099] Martin (goudingcheng@gmail.com)
 */
package com.github.paohaijiao.biz.report;

import com.github.paohaijiao.JOption;
import com.github.paohaijiao.bubble.CategoryAxis;
import com.github.paohaijiao.bubble.ScatterSeries;
import com.github.paohaijiao.bubble.ValueAxis;
import com.github.paohaijiao.config.JPdfConfig;
import com.github.paohaijiao.demo.constant.JQuickConstant;
import com.github.paohaijiao.enums.JChartType;
import com.github.paohaijiao.executor.JQuickPdfFactory;
import com.github.paohaijiao.factory.JChartRendererFactory;
import org.junit.Test;

import java.awt.Color;
import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

/**
 * 统一信用报告 —— 风格 14：气泡图（浅蓝）
 *
 * <p>以 {@code report/credit_report_14_bubble.txt} 为模板，把气泡图渲染成 SVG 后
 * 绑定到模板中的 {@code ${svg}} 占位符，输出到 {@code D:\test\creditreport\14_bubble.pdf}。</p>
 *
 * @author Martin
 * @version 1.0.0
 */
public class JQuickCreditReport14BubbleTest {

    public static final String path = JQuickConstant.path;

    @Test
    public void report14Bubble() throws IOException {
        JOption option = new JOption();
        option.title().text("风险气泡分布").subtext("气泡大小代表风险敞口，颜色代表风险等级");
        option.legend("低风险", "中风险", "高风险");
        option.xAxis(new CategoryAxis().name("账龄（月）"));
        option.yAxis(new ValueAxis().name("逾期率（%）"));
        ScatterSeries series = new ScatterSeries("风险敞口");
        List<Map<String, Object>> seriesData = new ArrayList<>();
        seriesData.add(bubblePoint("客户A", "3", 1.2, 120, "低风险"));
        seriesData.add(bubblePoint("客户B", "6", 3.5, 260, "中风险"));
        seriesData.add(bubblePoint("客户C", "9", 6.8, 410, "高风险"));
        seriesData.add(bubblePoint("客户D", "4", 2.1, 180, "低风险"));
        seriesData.add(bubblePoint("客户E", "12", 9.4, 560, "高风险"));
        seriesData.add(bubblePoint("客户F", "8", 5.2, 330, "中风险"));
        series.data(seriesData.toArray());
        option.series(series);

        String svg = JChartRendererFactory.renderChart(JChartType.Bubble, option);

        File dir = new File(path + "creditreport");
        if (!dir.exists()) {
            dir.mkdirs();
        }
        FileOutputStream fileOutputStream = new FileOutputStream(path + "creditreport/14_bubble.pdf");
        JPdfConfig config = new JPdfConfig();
        // 开启 flex 行布局：图表与其右侧的指标说明面板在宽度允许时并排，而不是换行堆叠。
        config.getLayoutConfig().setFlexLayout(true);
        JQuickPdfFactory factory = new JQuickPdfFactory(config);
        factory.bind("svg", svg);
        byte[] bytes = factory.executeResource("report/credit_report_14_bubble.txt");
        fileOutputStream.write(bytes);
        fileOutputStream.close();
    }

    private static Map<String, Object> bubblePoint(String name, String x, double y, double size, String category) {
        Map<String, Object> point = new HashMap<>();
        point.put("x", x);
        point.put("y", y);
        point.put("size", size);
        point.put("category", category);
        point.put("name", name);
        point.put("color", bubbleColor(category));
        return point;
    }

    private static Color bubbleColor(String category) {
        if ("低风险".equals(category)) {
            return new Color(2, 136, 209, 180);
        }
        if ("中风险".equals(category)) {
            return new Color(255, 167, 38, 180);
        }
        return new Color(229, 57, 53, 180);
    }
}

Step 3 — run it

The class is a JUnit test, so run it with Maven:

mvn -pl jquick-pdfx test -Dtest=JQuickCreditReport14BubbleTest

…or call the test method from a main wrapper if you want a plain entry point:

public static void main(String[] args) throws Exception {
    new JQuickCreditReport14BubbleTest().report14Bubble();
}

Output: D:/test/creditreport/14_bubble.pdf

How it works

Binding a chart SVG into the template

Declare only the width on <svg>; the height is derived from the chart's aspect ratio, so the chart never stretches vertically.
Open config.getLayoutConfig().setFlexLayout(true) if the template centers the chart with display:flex.
Bind the SVG string with factory.bind("svg", svg) — bind() is pure data injection and never re-parses markup.

String svg = JChartRendererFactory.renderChart(JChartType.LINE, option);
JQuickPdfFactory factory = new JQuickPdfFactory(config);
factory.bind("svg", svg);
byte[] bytes = factory.executeResource(TEMPLATE);

CJK font configuration

CJK text needs a font that actually contains the glyphs. The engine ships with a Chinese font and lets you switch it through JFontConfig; if a glyph is missing the character is silently dropped or drawn as a box, and the failure looks like a data problem rather than a font problem.

Set the font once on JPdfConfig.getFontConfig() before rendering.
Chart SVG text is a separate pipeline — register the same family on JOption or chart labels fall back to Helvetica.
Prefer the full-width ￥ over ¥; the latter is often absent from CJK faces.

JPdfConfig config = new JPdfConfig();
config.getFontConfig().setDefaultFontName("Noto Sans CJK SC");

Template syntax cheat sheet

Syntax	Meaning
`factory.bind("k", v)`	Injects plain text into the context; markup inside a value is dropped.
`'literal text'`	A single-quoted string is a literal — whatever is inside is printed verbatim.
`${var}`	An expression. It must sit outside the quotes: `'No: '${docNo}`.
`<table style="width:100%">`	Spans the full text area; give explicit widths only to the leading columns.
`<areaBreak></areaBreak>`	Force the next block onto a fresh page (CSS page-break is not supported).

Gotchas worth remembering

Use the full-width ￥, not ¥, or the character may render as ?.
Compute money with BigDecimal, round once, and derive 大写 from the rounded value.
Flex children whose fixed widths exceed the text area wrap instead of sitting side by side.
${var} must sit outside single quotes — 'No: ${docNo}' prints the placeholder literally.

Output

Wrap up

You now have a template file, a Java class and a PDF — all three reproducible from a clean clone. Swap the placeholder blocks for real data (or for real seal images) and the layout does not move.

Series navigation: ← #13 Treemap for Asset Allocation Structure　·　#15 Timeline Chart for Credit Event History →

Full index: README.md　·　Source: jquick-pdf

Appendix — files in this demo

Role	Path
Java class	`jquick-pdfx/src/test/java/com/github/paohaijiao/biz/report/JQuickCreditReport14BubbleTest.java`
Template	`jquick-pdfx/src/test/resources/report/credit_report_14_bubble.txt`
Output PDF	`D:/test/creditreport/14_bubble.pdf`
Preview image	`images/14.png`

Sunburst Chart: Drilling Into Merchant Industry Mix

paohaijiao — Wed, 04 Nov 2026 10:53:02 +0000

Sunburst Chart: Drilling Into Merchant Industry Mix

jquick-pdf by example — demo #12 of 184. Every article in this series ships one complete, runnable demo: a template file and a Java class. No snippets, no omissions.

Two rings — industry category on the inner ring, sub-category on the outer — for acquiring volume.

This document belongs to the Credit report — chart series set.

What you'll build

A PDF written to D:/test/creditreport/12_sunburst.pdf
A template file (report/credit_report_12_sunburst.txt) with 1 bound placeholder
A detail grid of 13 rows × 6 columns, laid out with width:100% so it fills the text area
One self-contained Java class (JQuickCreditReport12SunburstTest) that binds the data and renders the file

Bound placeholders

${svg}

Prerequisites

Java 8+ and one dependency — jquick-pdf is built on Apache PDFBox, not iText:

<dependency>
    <groupId>io.github.paohaijiao</groupId>
    <artifactId>jquick-pdfx</artifactId>
    <version>4.2.0</version>
</dependency>

Coordinates: io.github.paohaijiao:jquick-pdfx:4.2.0.

Step 1 — the template file

JPdfX is jquick-pdf's HTML-like template language. It lives in its own file (src/test/resources/report/credit_report_12_sunburst.txt) instead of a Java string, so designers can edit it without touching code.

<pdf>
<body>
  <div style="marginBottom:12px">
    <div style="height:10px; backgroundColor:#FF6F00; borderRadius:5px"></div>
    <h1 style="textAlignment:center; color:#FF6F00; fontSize:22; bold:true; marginTop:12px; marginBottom:6px">'企业信用评级报告'</h1>
    <p style="textAlignment:center; color:#6d4c41; fontSize:11; margin:2px">'评估机构: 四川省企业信用评估中心'</p>
    <p style="textAlignment:center; color:#8d6e63; fontSize:10; margin:2px">'报告编号: CR-2023-08975 | 评估日期: 2023年11月15日'</p>
  </div>

  <div style="marginBottom:14px">
    <table style="width:600px; fontSize:10">
      <tr>
        <th style="width:150px; padding:6px; backgroundColor:#FFA000; color:white; borderRadius:8px; textAlignment:center">'企业名称'</th>
        <th style="padding:6px; backgroundColor:#FFA000; color:white; borderRadius:8px; textAlignment:left">'四川省泡海椒科技有限公司'</th>
      </tr>
      <tr>
        <td style="width:150px; padding:6px; backgroundColor:#fff8e1; bold:true">'统一信用代码'</td>
        <td style="padding:6px">'91110108MA01XX1234'</td>
      </tr>
      <tr>
        <td style="padding:6px; backgroundColor:#fff8e1; bold:true">'成立日期'</td>
        <td style="padding:6px">'2018年5月20日'</td>
      </tr>
      <tr>
        <td style="padding:6px; backgroundColor:#fff8e1; bold:true">'注册资本'</td>
        <td style="padding:6px">'1000万元人民币'</td>
      </tr>
      <tr>
        <td style="padding:6px; backgroundColor:#fff8e1; bold:true">'法定代表人'</td>
        <td style="padding:6px">'泡海椒'</td>
      </tr>
      <tr>
        <td style="padding:6px; backgroundColor:#fff8e1; bold:true">'所属行业'</td>
        <td style="padding:6px">'软件和信息技术服务业'</td>
      </tr>
      <tr>
        <td style="padding:6px; backgroundColor:#fff8e1; bold:true">'企业规模'</td>
        <td style="padding:6px">'中型（150-200人）'</td>
      </tr>
    </table>
  </div>

  <div style="marginBottom:14px">
    <h2 style="color:#E65100; fontSize:13; bold:true; marginBottom:10px">'历年财务数据（单位：万元）'</h2>
    <table style="width:600px; fontSize:10">
      <tr>
        <th style="backgroundColor:#FFA000; color:white; padding:6px; textAlignment:center">'财务指标'</th>
        <th style="backgroundColor:#FFA000; color:white; padding:6px; textAlignment:center">'2020年'</th>
        <th style="backgroundColor:#FFA000; color:white; padding:6px; textAlignment:center">'2021年'</th>
        <th style="backgroundColor:#FFA000; color:white; padding:6px; textAlignment:center">'2022年'</th>
        <th style="backgroundColor:#FFA000; color:white; padding:6px; textAlignment:center">'2023年'</th>
        <th style="backgroundColor:#FFA000; color:white; padding:6px; textAlignment:center">'增长率'</th>
      </tr>
      <tr>
        <td style="padding:5px; bold:true; borderBottom:1px solid #ffecb3">'营业收入'</td>
        <td style="padding:5px; textAlignment:right; borderBottom:1px solid #ffecb3">'8,560'</td>
        <td style="padding:5px; textAlignment:right; borderBottom:1px solid #ffecb3">'12,340'</td>
        <td style="padding:5px; textAlignment:right; borderBottom:1px solid #ffecb3">'18,920'</td>
        <td style="padding:5px; textAlignment:right; borderBottom:1px solid #ffecb3">'25,680'</td>
        <td style="padding:5px; textAlignment:right; borderBottom:1px solid #ffecb3; color:#2e7d32; bold:true">'+44.2%'</td>
      </tr>
      <tr>
        <td style="padding:5px; bold:true; borderBottom:1px solid #ffecb3">'净利润'</td>
        <td style="padding:5px; textAlignment:right; borderBottom:1px solid #ffecb3">'1,240'</td>
        <td style="padding:5px; textAlignment:right; borderBottom:1px solid #ffecb3">'2,150'</td>
        <td style="padding:5px; textAlignment:right; borderBottom:1px solid #ffecb3">'3,890'</td>
        <td style="padding:5px; textAlignment:right; borderBottom:1px solid #ffecb3">'5,420'</td>
        <td style="padding:5px; textAlignment:right; borderBottom:1px solid #ffecb3; color:#2e7d32; bold:true">'+63.8%'</td>
      </tr>
      <tr>
        <td style="padding:5px; bold:true; borderBottom:1px solid #ffecb3">'总资产'</td>
        <td style="padding:5px; textAlignment:right; borderBottom:1px solid #ffecb3">'15,800'</td>
        <td style="padding:5px; textAlignment:right; borderBottom:1px solid #ffecb3">'22,450'</td>
        <td style="padding:5px; textAlignment:right; borderBottom:1px solid #ffecb3">'31,200'</td>
        <td style="padding:5px; textAlignment:right; borderBottom:1px solid #ffecb3">'42,800'</td>
        <td style="padding:5px; textAlignment:right; borderBottom:1px solid #ffecb3; color:#2e7d32; bold:true">'+39.5%'</td>
      </tr>
      <tr>
        <td style="padding:5px; bold:true; borderBottom:1px solid #ffecb3">'净资产'</td>
        <td style="padding:5px; textAlignment:right; borderBottom:1px solid #ffecb3">'9,200'</td>
        <td style="padding:5px; textAlignment:right; borderBottom:1px solid #ffecb3">'13,800'</td>
        <td style="padding:5px; textAlignment:right; borderBottom:1px solid #ffecb3">'19,500'</td>
        <td style="padding:5px; textAlignment:right; borderBottom:1px solid #ffecb3">'26,400'</td>
        <td style="padding:5px; textAlignment:right; borderBottom:1px solid #ffecb3; color:#2e7d32; bold:true">'+42.1%'</td>
      </tr>
      <tr>
        <td style="padding:6px; bold:true; borderTop:2px solid #FF6F00; backgroundColor:#fff8e1">'毛利率'</td>
        <td style="padding:6px; textAlignment:right; bold:true; borderTop:2px solid #FF6F00; backgroundColor:#fff8e1">'42.5%'</td>
        <td style="padding:6px; textAlignment:right; bold:true; borderTop:2px solid #FF6F00; backgroundColor:#fff8e1">'45.8%'</td>
        <td style="padding:6px; textAlignment:right; bold:true; borderTop:2px solid #FF6F00; backgroundColor:#fff8e1">'48.2%'</td>
        <td style="padding:6px; textAlignment:right; bold:true; borderTop:2px solid #FF6F00; backgroundColor:#fff8e1">'51.6%'</td>
        <td style="padding:6px; textAlignment:right; bold:true; borderTop:2px solid #FF6F00; backgroundColor:#fff8e1; color:#E65100">'+9.1%'</td>
      </tr>
    </table>
  </div>

  <div style="marginBottom:14px">
    <h2 style="color:#E65100; fontSize:13; bold:true; marginBottom:10px">'关键经营指标'</h2>
    <div style="display:flex; marginBottom:10px">
      <div style="width:130px; padding:6px; backgroundColor:#FFA000; color:white; borderRadius:12px; textAlignment:center; fontSize:10; bold:true">'营收增长'</div>
      <div style="width:450px; paddingLeft:12px; fontSize:11">'连续三年保持40%以上增长，2023年达到25,680万元'</div>
    </div>
    <div style="display:flex; marginBottom:10px">
      <div style="width:130px; padding:6px; backgroundColor:#FFA000; color:white; borderRadius:12px; textAlignment:center; fontSize:10; bold:true">'盈利提升'</div>
      <div style="width:450px; paddingLeft:12px; fontSize:11">'净利率从14.5%提升至21.1%，盈利能力显著增强'</div>
    </div>
    <div style="display:flex; marginBottom:10px">
      <div style="width:130px; padding:6px; backgroundColor:#FFA000; color:white; borderRadius:12px; textAlignment:center; fontSize:10; bold:true">'研发投入'</div>
      <div style="width:450px; paddingLeft:12px; fontSize:11">'研发费用年均增长38.9%，占营收比例达13.3%'</div>
    </div>
    <div style="display:flex; marginBottom:10px">
      <div style="width:130px; padding:6px; backgroundColor:#FFA000; color:white; borderRadius:12px; textAlignment:center; fontSize:10; bold:true">'人才结构'</div>
      <div style="width:450px; paddingLeft:12px; fontSize:11">'技术研发人员占比42%，硕士以上学历占35%'</div>
    </div>
    <div style="display:flex; marginBottom:10px">
      <div style="width:130px; padding:6px; backgroundColor:#FFA000; color:white; borderRadius:12px; textAlignment:center; fontSize:10; bold:true">'客户质量'</div>
      <div style="width:450px; paddingLeft:12px; fontSize:11">'服务15家上市公司，客户续约率92%，大客户满意度4.8/5.0'</div>
    </div>
    <div style="display:flex; marginBottom:10px">
      <div style="width:130px; padding:6px; backgroundColor:#FFA000; color:white; borderRadius:12px; textAlignment:center; fontSize:10; bold:true">'资产质量'</div>
      <div style="width:450px; paddingLeft:12px; fontSize:11">'资产负债率维持在38%左右，流动比率2.8，偿债能力良好'</div>
    </div>
  </div>

  <div style="marginBottom:14px">
    <h2 style="color:#E65100; fontSize:13; bold:true; marginBottom:10px">'业务结构旭日图'</h2>
    <div style="display:flex; justifyContent:space-between">
      <div style="width:290px; border:1px solid #FFC107; borderRadius:8px; padding:12px">
        <h3 style="color:#E65100; fontSize:12; bold:true; marginBottom:8px">'评级指标说明'</h3>
        <div style="fontSize:10; marginBottom:6px">
          <span style="bold:true; color:#E65100">'财务状况(90分): '</span>
          '营收稳定增长'
        </div>
        <div style="fontSize:10; marginBottom:6px">
          <span style="bold:true; color:#E65100">'经营能力(95分): '</span>
          '客户留存率高'
        </div>
        <div style="fontSize:10; marginBottom:6px">
          <span style="bold:true; color:#E65100">'偿债能力(85分): '</span>
          '负债率合理'
        </div>
        <div style="fontSize:10; marginBottom:6px">
          <span style="bold:true; color:#E65100">'发展潜力(92分): '</span>
          '研发投入增加'
        </div>
      </div>
      <svg style="width:400px;height:400px">${svg}</svg>
    </div>
  </div>

  <div style="marginBottom:14px; background:linear-gradient(135deg, #fff8e1 0%, #ffecb3 100%); borderRadius:8px; padding:16px; borderLeft:4px solid #FFC107">
    <h2 style="color:#E65100; fontSize:13; bold:true; marginBottom:8px">'综合评价'</h2>
    <p style="textAlignment:justify; fontSize:11">
      '四川省泡海椒科技有限公司作为国家级高新技术企业和专精特新"小巨人"企业，在云计算和大数据领域表现出色。公司财务状况健康，经营能力突出，技术创新能力强，具备良好的发展潜力。信用评级为AAA级，展望稳定。'
    </p>
  </div>

  <div style="textAlignment:center; marginTop:12px">
    <p style="fontSize:9; color:#8d6e63">'本报告依据公开信息和专业评估模型生成，仅供参考 | 报告生成时间: 2025年09月06日'</p>
    <p style="fontSize:9; color:#8d6e63">'© 2023 企业信用评估中心 版权所有 | 认证编号: CE-2023-001'</p>
  </div>
</body>
</pdf>

Step 2 — the Java class

jquick-pdfx/src/test/java/com/github/paohaijiao/biz/report/JQuickCreditReport12SunburstTest.java

/*
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
 * Copyright (c) [2025-2099] Martin (goudingcheng@gmail.com)
 */
package com.github.paohaijiao.biz.report;

import com.github.paohaijiao.JOption;
import com.github.paohaijiao.config.JPdfConfig;
import com.github.paohaijiao.data.JSunburstData;
import com.github.paohaijiao.demo.constant.JQuickConstant;
import com.github.paohaijiao.enums.JChartType;
import com.github.paohaijiao.executor.JQuickPdfFactory;
import com.github.paohaijiao.factory.JChartRendererFactory;
import org.junit.Test;

import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;

/**
 * 统一信用报告 —— 风格 12：旭日图（琥珀）
 *
 * <p>以 {@code report/credit_report_12_sunburst.txt} 为模板，把旭日图渲染成 SVG 后
 * 绑定到模板中的 {@code ${svg}} 占位符，输出到 {@code D:\test\creditreport\12_sunburst.pdf}。</p>
 *
 * @author Martin
 * @version 1.0.0
 */
public class JQuickCreditReport12SunburstTest {

    public static final String path = JQuickConstant.path;

    @Test
    public void report12Sunburst() throws IOException {
        JSunburstData root = new JSunburstData("业务总览", 1.0);
        JSunburstData product = new JSunburstData("软件产品", 0.40);
        JSunburstData service = new JSunburstData("技术服务", 0.25);
        JSunburstData cloud = new JSunburstData("云服务", 0.20);
        JSunburstData other = new JSunburstData("其他业务", 0.15);
        product.addChild(new JSunburstData("企业管理软件", 0.6));
        product.addChild(new JSunburstData("行业解决方案", 0.4));
        service.addChild(new JSunburstData("实施服务", 0.5));
        service.addChild(new JSunburstData("运维服务", 0.5));
        cloud.addChild(new JSunburstData("公有云", 0.7));
        cloud.addChild(new JSunburstData("私有云", 0.3));
        other.addChild(new JSunburstData("培训", 0.5));
        other.addChild(new JSunburstData("硬件", 0.5));
        root.addChild(product);
        root.addChild(service);
        root.addChild(cloud);
        root.addChild(other);
        JOption option = new JOption();
        option.setSunburstData(root);
        option.title("业务结构旭日图");

        String svg = JChartRendererFactory.renderChart(JChartType.SUNBURST, option);

        File dir = new File(path + "creditreport");
        if (!dir.exists()) {
            dir.mkdirs();
        }
        FileOutputStream fileOutputStream = new FileOutputStream(path + "creditreport/12_sunburst.pdf");
        JPdfConfig config = new JPdfConfig();
        // 开启 flex 行布局：图表与其右侧的指标说明面板在宽度允许时并排，而不是换行堆叠。
        config.getLayoutConfig().setFlexLayout(true);
        JQuickPdfFactory factory = new JQuickPdfFactory(config);
        factory.bind("svg", svg);
        byte[] bytes = factory.executeResource("report/credit_report_12_sunburst.txt");
        fileOutputStream.write(bytes);
        fileOutputStream.close();
    }
}

Step 3 — run it

The class is a JUnit test, so run it with Maven:

mvn -pl jquick-pdfx test -Dtest=JQuickCreditReport12SunburstTest

…or call the test method from a main wrapper if you want a plain entry point:

public static void main(String[] args) throws Exception {
    new JQuickCreditReport12SunburstTest().report12Sunburst();
}

Output: D:/test/creditreport/12_sunburst.pdf

How it works

Binding a chart SVG into the template

Declare only the width on <svg>; the height is derived from the chart's aspect ratio, so the chart never stretches vertically.
Open config.getLayoutConfig().setFlexLayout(true) if the template centers the chart with display:flex.
Bind the SVG string with factory.bind("svg", svg) — bind() is pure data injection and never re-parses markup.

String svg = JChartRendererFactory.renderChart(JChartType.LINE, option);
JQuickPdfFactory factory = new JQuickPdfFactory(config);
factory.bind("svg", svg);
byte[] bytes = factory.executeResource(TEMPLATE);

Flex layout: what it does and does not do

Enable flex on JPdfConfig before creating the factory.
Use fixed px widths that sum to less than the text width (~483px on A4 with 40pt margins).
Nested div two-column layouts are unreliable here — a full-width single column is safer.

JPdfConfig config = new JPdfConfig();
config.getLayoutConfig().setFlexLayout(true);

Template syntax cheat sheet

Syntax	Meaning
`${var}`	An expression. It must sit outside the quotes: `'No: '${docNo}`.
`<table style="width:100%">`	Spans the full text area; give explicit widths only to the leading columns.
`<areaBreak></areaBreak>`	Force the next block onto a fresh page (CSS page-break is not supported).
`<image src='D:/.../x.png'>`	Embed an image. `src` is a raw path — it is not evaluated as an expression.
`<svg style="width:479pt">${svg}</svg>`	Embed a vector chart produced by `JChartRendererFactory`.

Gotchas worth remembering

Flex children whose fixed widths exceed the text area wrap instead of sitting side by side.
${var} must sit outside single quotes — 'No: ${docNo}' prints the placeholder literally.
<image src="..."> never evaluates ${...}; write a literal path.
A <td> holds text only — nested <p>, <image> or <table> is dropped.

Output

Wrap up

You now have a template file, a Java class and a PDF — all three reproducible from a clean clone. Swap the placeholder blocks for real data (or for real seal images) and the layout does not move.

Series navigation: ← #11 Correlation Matrix of Operating KPIs　·　#13 Treemap for Asset Allocation Structure →

Full index: README.md　·　Source: jquick-pdf

Appendix — files in this demo

Role	Path
Java class	`jquick-pdfx/src/test/java/com/github/paohaijiao/biz/report/JQuickCreditReport12SunburstTest.java`
Template	`jquick-pdfx/src/test/resources/report/credit_report_12_sunburst.txt`
Output PDF	`D:/test/creditreport/12_sunburst.pdf`
Preview image	`images/12.png`

Correlation Matrix of Operating KPIs

paohaijiao — Tue, 03 Nov 2026 11:14:38 +0000

jquick-pdf by example — demo #11 of 184. Every article in this series ships one complete, runnable demo: a template file and a Java class. No snippets, no omissions.

A symmetric matrix showing which operating indicators move together.

This document belongs to the Credit report — chart series set. Like every demo in the series it has its own colour scheme and layout combination, derived deterministically from the demo number — so the look is stable across runs and two neighbouring documents never look alike.

What you'll build

A PDF written to D:/test/creditreport/11_matrix.pdf
A template file (report/credit_report_11_matrix.txt) with 1 bound placeholder
A detail grid of 18 rows × 6 columns, laid out with width:100% so it fills the text area
One self-contained Java class (JQuickCreditReport11MatrixTest) that binds the data and renders the file

Bound placeholders

${svg}

Prerequisites

Java 8+ and one dependency — jquick-pdf is built on Apache PDFBox, not iText:

<dependency>
    <groupId>io.github.paohaijiao</groupId>
    <artifactId>jquick-pdfx</artifactId>
    <version>4.2.0</version>
</dependency>

Coordinates: io.github.paohaijiao:jquick-pdfx:4.2.0.

Step 1 — the template file

JPdfX is jquick-pdf's HTML-like template language. It lives in its own file (src/test/resources/report/credit_report_11_matrix.txt) instead of a Java string, so designers can edit it without touching code.

<pdf>
<body>
  <div style="backgroundColor:#1A237E; borderRadius:6px; padding:16px; marginBottom:12px">
    <h1 style="textAlignment:center; color:white; fontSize:21; bold:true; marginBottom:8px">'企业信用评级报告'</h1>
    <p style="textAlignment:center; color:white; fontSize:10; margin:2px">'报告编号: CR-2023-08975 | 评估日期: 2023年11月15日'</p>
    <p style="textAlignment:center; color:white; fontSize:10; margin:2px">'评估机构: 四川省企业信用评估中心'</p>
  </div>

  <div style="marginBottom:14px">
    <h2 style="color:#1A237E; fontSize:14; bold:true; marginBottom:8px">'四川省泡海椒科技有限公司'</h2>
    <table style="width:600px; fontSize:10">
      <tr>
        <td style="width:150px; padding:6px; backgroundColor:#e8eaf6; bold:true; border:1px solid #9fa8da">'统一信用代码'</td>
        <td style="width:150px; padding:6px; border:1px solid #9fa8da">'91110108MA01XX1234'</td>
        <td style="width:150px; padding:6px; backgroundColor:#e8eaf6; bold:true; border:1px solid #9fa8da">'成立日期'</td>
        <td style="width:150px; padding:6px; border:1px solid #9fa8da">'2018年5月20日'</td>
      </tr>
      <tr>
        <td style="padding:6px; backgroundColor:#e8eaf6; bold:true; border:1px solid #9fa8da">'注册资本'</td>
        <td style="padding:6px; border:1px solid #9fa8da">'1000万元人民币'</td>
        <td style="padding:6px; backgroundColor:#e8eaf6; bold:true; border:1px solid #9fa8da">'法定代表人'</td>
        <td style="padding:6px; border:1px solid #9fa8da">'泡海椒'</td>
      </tr>
      <tr>
        <td style="padding:6px; backgroundColor:#e8eaf6; bold:true; border:1px solid #9fa8da">'所属行业'</td>
        <td style="padding:6px; border:1px solid #9fa8da">'软件和信息技术服务业'</td>
        <td style="padding:6px; backgroundColor:#e8eaf6; bold:true; border:1px solid #9fa8da">'企业规模'</td>
        <td style="padding:6px; border:1px solid #9fa8da">'中型（150-200人）'</td>
      </tr>
    </table>
  </div>

  <div style="marginBottom:14px">
    <h2 style="color:#1A237E; fontSize:13; bold:true; marginBottom:10px">'历年财务数据（单位：万元）'</h2>
    <table style="width:600px; fontSize:10">
      <tr>
        <th style="backgroundColor:#303F9F; color:white; padding:6px; textAlignment:center; border:1px solid #c5cae9">'财务指标'</th>
        <th style="backgroundColor:#303F9F; color:white; padding:6px; textAlignment:center; border:1px solid #c5cae9">'2020年'</th>
        <th style="backgroundColor:#303F9F; color:white; padding:6px; textAlignment:center; border:1px solid #c5cae9">'2021年'</th>
        <th style="backgroundColor:#303F9F; color:white; padding:6px; textAlignment:center; border:1px solid #c5cae9">'2022年'</th>
        <th style="backgroundColor:#303F9F; color:white; padding:6px; textAlignment:center; border:1px solid #c5cae9">'2023年'</th>
        <th style="backgroundColor:#303F9F; color:white; padding:6px; textAlignment:center; border:1px solid #c5cae9">'增长率'</th>
      </tr>
      <tr>
        <td style="padding:5px; backgroundColor:#e8eaf6; bold:true; border:1px solid #c5cae9">'营业收入'</td>
        <td style="padding:5px; textAlignment:right; border:1px solid #c5cae9">'8,560'</td>
        <td style="padding:5px; textAlignment:right; border:1px solid #c5cae9">'12,340'</td>
        <td style="padding:5px; textAlignment:right; border:1px solid #c5cae9">'18,920'</td>
        <td style="padding:5px; textAlignment:right; border:1px solid #c5cae9">'25,680'</td>
        <td style="padding:5px; textAlignment:right; border:1px solid #c5cae9; color:#2e7d32; bold:true">'+44.2%'</td>
      </tr>
      <tr>
        <td style="padding:5px; backgroundColor:#e8eaf6; bold:true; border:1px solid #c5cae9">'净利润'</td>
        <td style="padding:5px; textAlignment:right; backgroundColor:#f5f6fb; border:1px solid #c5cae9">'1,240'</td>
        <td style="padding:5px; textAlignment:right; backgroundColor:#f5f6fb; border:1px solid #c5cae9">'2,150'</td>
        <td style="padding:5px; textAlignment:right; backgroundColor:#f5f6fb; border:1px solid #c5cae9">'3,890'</td>
        <td style="padding:5px; textAlignment:right; backgroundColor:#f5f6fb; border:1px solid #c5cae9">'5,420'</td>
        <td style="padding:5px; textAlignment:right; backgroundColor:#f5f6fb; border:1px solid #c5cae9; color:#2e7d32; bold:true">'+63.8%'</td>
      </tr>
      <tr>
        <td style="padding:5px; backgroundColor:#e8eaf6; bold:true; border:1px solid #c5cae9">'总资产'</td>
        <td style="padding:5px; textAlignment:right; border:1px solid #c5cae9">'15,800'</td>
        <td style="padding:5px; textAlignment:right; border:1px solid #c5cae9">'22,450'</td>
        <td style="padding:5px; textAlignment:right; border:1px solid #c5cae9">'31,200'</td>
        <td style="padding:5px; textAlignment:right; border:1px solid #c5cae9">'42,800'</td>
        <td style="padding:5px; textAlignment:right; border:1px solid #c5cae9; color:#2e7d32; bold:true">'+39.5%'</td>
      </tr>
      <tr>
        <td style="padding:5px; backgroundColor:#e8eaf6; bold:true; border:1px solid #c5cae9">'净资产'</td>
        <td style="padding:5px; textAlignment:right; backgroundColor:#f5f6fb; border:1px solid #c5cae9">'9,200'</td>
        <td style="padding:5px; textAlignment:right; backgroundColor:#f5f6fb; border:1px solid #c5cae9">'13,800'</td>
        <td style="padding:5px; textAlignment:right; backgroundColor:#f5f6fb; border:1px solid #c5cae9">'19,500'</td>
        <td style="padding:5px; textAlignment:right; backgroundColor:#f5f6fb; border:1px solid #c5cae9">'26,400'</td>
        <td style="padding:5px; textAlignment:right; backgroundColor:#f5f6fb; border:1px solid #c5cae9; color:#2e7d32; bold:true">'+42.1%'</td>
      </tr>
      <tr>
        <td style="padding:5px; backgroundColor:#e8eaf6; bold:true; border:1px solid #c5cae9">'毛利率'</td>
        <td style="padding:5px; textAlignment:right; border:1px solid #c5cae9">'42.5%'</td>
        <td style="padding:5px; textAlignment:right; border:1px solid #c5cae9">'45.8%'</td>
        <td style="padding:5px; textAlignment:right; border:1px solid #c5cae9">'48.2%'</td>
        <td style="padding:5px; textAlignment:right; border:1px solid #c5cae9">'51.6%'</td>
        <td style="padding:5px; textAlignment:right; border:1px solid #c5cae9; color:#2e7d32; bold:true">'+9.1%'</td>
      </tr>
    </table>
  </div>

  <div style="marginBottom:14px">
    <h2 style="color:#1A237E; fontSize:13; bold:true; marginBottom:10px">'关键经营指标'</h2>
    <table style="width:600px; fontSize:10">
      <tr>
        <th style="width:150px; padding:6px; backgroundColor:#e8eaf6; color:#1A237E; textAlignment:center; border:1px solid #9fa8da">'指标维度'</th>
        <th style="padding:6px; backgroundColor:#e8eaf6; color:#1A237E; textAlignment:center; border:1px solid #9fa8da">'说明'</th>
      </tr>
      <tr>
        <td style="width:150px; padding:6px; backgroundColor:#e8eaf6; bold:true; border:1px solid #c5cae9">'营收增长率'</td>
        <td style="padding:6px; border:1px solid #c5cae9">'连续三年保持40%以上增长，2023年达到25,680万元'</td>
      </tr>
      <tr>
        <td style="padding:6px; backgroundColor:#e8eaf6; bold:true; border:1px solid #c5cae9">'利润率提升'</td>
        <td style="padding:6px; border:1px solid #c5cae9">'净利率从14.5%提升至21.1%，盈利能力显著增强'</td>
      </tr>
      <tr>
        <td style="padding:6px; backgroundColor:#e8eaf6; bold:true; border:1px solid #c5cae9">'研发投入'</td>
        <td style="padding:6px; border:1px solid #c5cae9">'研发费用年均增长38.9%，占营收比例达13.3%'</td>
      </tr>
      <tr>
        <td style="padding:6px; backgroundColor:#e8eaf6; bold:true; border:1px solid #c5cae9">'人才结构'</td>
        <td style="padding:6px; border:1px solid #c5cae9">'技术研发人员占比42%，硕士以上学历占35%'</td>
      </tr>
      <tr>
        <td style="padding:6px; backgroundColor:#e8eaf6; bold:true; border:1px solid #c5cae9">'客户质量'</td>
        <td style="padding:6px; border:1px solid #c5cae9">'服务15家上市公司，客户续约率92%，大客户满意度4.8/5.0'</td>
      </tr>
      <tr>
        <td style="padding:6px; backgroundColor:#e8eaf6; bold:true; border:1px solid #c5cae9">'资产质量'</td>
        <td style="padding:6px; border:1px solid #c5cae9">'资产负债率维持在38%左右，流动比率2.8，偿债能力良好'</td>
      </tr>
    </table>
  </div>

  <div style="marginBottom:14px">
    <h2 style="color:#1A237E; fontSize:13; bold:true; marginBottom:10px">'财务指标相关矩阵'</h2>
    <div style="display:flex; justifyContent:space-between">
      <svg style="width:400px;height:400px">${svg}</svg>
      <div style="width:300px; border:1px solid #3F51B5; padding:12px">
        <h3 style="color:#1A237E; fontSize:12; bold:true; marginBottom:8px">'评级指标说明'</h3>
        <div style="fontSize:10; marginBottom:6px">
          <span style="bold:true; color:#303F9F">'财务状况(90分): '</span>
          '营收稳定增长'
        </div>
        <div style="fontSize:10; marginBottom:6px">
          <span style="bold:true; color:#303F9F">'经营能力(95分): '</span>
          '客户留存率高'
        </div>
        <div style="fontSize:10; marginBottom:6px">
          <span style="bold:true; color:#303F9F">'偿债能力(85分): '</span>
          '负债率合理'
        </div>
        <div style="fontSize:10; marginBottom:6px">
          <span style="bold:true; color:#303F9F">'发展潜力(92分): '</span>
          '研发投入增加'
        </div>
      </div>
    </div>
  </div>

  <div style="marginBottom:14px">
    <table style="width:600px; fontSize:10">
      <tr>
        <th style="width:150px; padding:6px; backgroundColor:#303F9F; color:white; textAlignment:center; border:1px solid #c5cae9">'评价项'</th>
        <th style="padding:6px; backgroundColor:#303F9F; color:white; textAlignment:center; border:1px solid #c5cae9">'评级结论'</th>
      </tr>
      <tr>
        <td style="width:150px; padding:8px; backgroundColor:#e8eaf6; bold:true; verticalAlignment:middle; border:1px solid #c5cae9">'综合评价'</td>
        <td style="padding:8px; fontSize:11; border:1px solid #c5cae9">'四川省泡海椒科技有限公司作为国家级高新技术企业和专精特新"小巨人"企业，在云计算和大数据领域表现出色。公司财务状况健康，经营能力突出，技术创新能力强，具备良好的发展潜力。信用评级为AAA级，展望稳定。'</td>
      </tr>
    </table>
  </div>

  <div style="textAlignment:center; marginTop:12px">
    <lineSeparator style="strokeColor:#3F51B5"></lineSeparator>
    <p style="fontSize:9; color:#5c6bc0; marginTop:8px">'本报告依据公开信息和专业评估模型生成，仅供参考 | 报告生成时间: 2025年09月06日'</p>
    <p style="fontSize:9; color:#5c6bc0">'© 2023 企业信用评估中心 版权所有 | 认证编号: CE-2023-001'</p>
  </div>
</body>
</pdf>

Step 2 — the Java class

jquick-pdfx/src/test/java/com/github/paohaijiao/biz/report/JQuickCreditReport11MatrixTest.java

/*
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
 * Copyright (c) [2025-2099] Martin (goudingcheng@gmail.com)
 */
package com.github.paohaijiao.biz.report;

import com.github.paohaijiao.JOption;
import com.github.paohaijiao.config.JPdfConfig;
import com.github.paohaijiao.demo.constant.JQuickConstant;
import com.github.paohaijiao.enums.JChartType;
import com.github.paohaijiao.executor.JQuickPdfFactory;
import com.github.paohaijiao.factory.JChartRendererFactory;
import com.github.paohaijiao.matrix.JCorrelationMatrixOption;
import org.junit.Test;

import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;

/**
 * 统一信用报告 —— 风格 11：相关矩阵（靛蓝）
 *
 * <p>以 {@code report/credit_report_11_matrix.txt} 为模板，把相关矩阵渲染成 SVG 后
 * 绑定到模板中的 {@code ${svg}} 占位符，输出到 {@code D:\test\creditreport\11_matrix.pdf}。</p>
 *
 * @author Martin
 * @version 1.0.0
 */
public class JQuickCreditReport11MatrixTest {

    public static final String path = JQuickConstant.path;

    @Test
    public void report11Matrix() throws IOException {
        double[][] correlationData = new double[][]{
                {1.00, 0.63, 0.30, -0.62, -0.54, 0.42},
                {0.63, 1.00, 0.55, -0.41, -0.36, 0.38},
                {0.30, 0.55, 1.00, -0.28, -0.24, 0.31},
                {-0.62, -0.41, -0.28, 1.00, 0.72, -0.46},
                {-0.54, -0.36, -0.24, 0.72, 1.00, -0.39},
                {0.42, 0.38, 0.31, -0.46, -0.39, 1.00}
        };
        JCorrelationMatrixOption matrixOption = JCorrelationMatrixOption.builder()
                .title("财务指标相关矩阵", "各财务指标之间的相关性分析")
                .dataset(correlationData)
                .build();
        matrixOption.dataset().dimensions(new String[]{"营业收入", "净利润", "总资产", "资产负债率", "流动比率", "研发投入"});
        JOption option = new JOption();
        option.setCorrelationMatrixOption(matrixOption);

        String svg = JChartRendererFactory.renderChart(JChartType.CorrectionMatrix, option);

        File dir = new File(path + "creditreport");
        if (!dir.exists()) {
            dir.mkdirs();
        }
        FileOutputStream fileOutputStream = new FileOutputStream(path + "creditreport/11_matrix.pdf");
        JPdfConfig config = new JPdfConfig();
        // 开启 flex 行布局：图表与其右侧的指标说明面板在宽度允许时并排，而不是换行堆叠。
        config.getLayoutConfig().setFlexLayout(true);
        JQuickPdfFactory factory = new JQuickPdfFactory(config);
        factory.bind("svg", svg);
        byte[] bytes = factory.executeResource("report/credit_report_11_matrix.txt");
        fileOutputStream.write(bytes);
        fileOutputStream.close();
    }
}

Step 3 — run it

The class is a JUnit test, so run it with Maven:

mvn -pl jquick-pdfx test -Dtest=JQuickCreditReport11MatrixTest

…or call the test method from a main wrapper if you want a plain entry point:

public static void main(String[] args) throws Exception {
    new JQuickCreditReport11MatrixTest().report11Matrix();
}

Output: D:/test/creditreport/11_matrix.pdf

How it works

Binding a chart SVG into the template

Declare only the width on <svg>; the height is derived from the chart's aspect ratio, so the chart never stretches vertically.
Open config.getLayoutConfig().setFlexLayout(true) if the template centers the chart with display:flex.
Bind the SVG string with factory.bind("svg", svg) — bind() is pure data injection and never re-parses markup.

String svg = JChartRendererFactory.renderChart(JChartType.LINE, option);
JQuickPdfFactory factory = new JQuickPdfFactory(config);
factory.bind("svg", svg);
byte[] bytes = factory.executeResource(TEMPLATE);

CJK font configuration

Set the font once on JPdfConfig.getFontConfig() before rendering.
Chart SVG text is a separate pipeline — register the same family on JOption or chart labels fall back to Helvetica.
Prefer the full-width ￥ over ¥; the latter is often absent from CJK faces.

JPdfConfig config = new JPdfConfig();
config.getFontConfig().setDefaultFontName("Noto Sans CJK SC");

Template syntax cheat sheet

Syntax	Meaning
`<p style="fontSize:9pt; bold:true">`	Inline styles use camelCase keys, CSS-like values.
`<lineSeparator style="color:#2E5B8A; thickness:1.5f">`	Horizontal rule with colour and thickness.
`<list style="listStyleType:decimal"><li>`	Ordered or unordered list items.
`<td style="padding:4px; border:1px solid #C3CDD8">`	Cell styling. A `<td>` holds text only — no nested blocks.
`factory.bind("k", v)`	Injects plain text into the context; markup inside a value is dropped.

Gotchas worth remembering

The footer format accepts exactly one %d.
Keep  comments short — long ones can silently blank the render.
Use the full-width ￥, not ¥, or the character may render as ?.
Compute money with BigDecimal, round once, and derive 大写 from the rounded value.

Output

Wrap up

You now have a template file, a Java class and a PDF — all three reproducible from a clean clone. Swap the placeholder blocks for real data (or for real seal images) and the layout does not move.

Series navigation: ← #10 Heatmap of Monthly Revenue Across Regions　·　#12 Sunburst Chart: Drilling Into Merchant Industry Mix →

Full index: README.md　·　Source: jquick-pdf

Appendix — files in this demo

Role	Path
Java class	`jquick-pdfx/src/test/java/com/github/paohaijiao/biz/report/JQuickCreditReport11MatrixTest.java`
Template	`jquick-pdfx/src/test/resources/report/credit_report_11_matrix.txt`
Output PDF	`D:/test/creditreport/11_matrix.pdf`
Preview image	`images/11.png`

Heatmap of Monthly Revenue Across Regions

paohaijiao — Mon, 02 Nov 2026 12:06:39 +0000

jquick-pdf by example — demo #10 of 184. Every article in this series ships one complete, runnable demo: a template file and a Java class. No snippets, no omissions.

Twelve months by eight regions, coloured by revenue band — the fastest way to spot seasonality.

What you'll build

A PDF written to D:/test/creditreport/10_heatmap.pdf
A template file (report/credit_report_10_heatmap.txt) with 1 bound placeholder
A detail grid of 12 rows × 6 columns, laid out with width:100% so it fills the text area
One self-contained Java class (JQuickCreditReport10HeatmapTest) that binds the data and renders the file

Bound placeholders

${svg}

Prerequisites

Java 8+ and one dependency — jquick-pdf is built on Apache PDFBox, not iText:

<dependency>
    <groupId>io.github.paohaijiao</groupId>
    <artifactId>jquick-pdfx</artifactId>
    <version>4.2.0</version>
</dependency>

Coordinates: io.github.paohaijiao:jquick-pdfx:4.2.0.

Step 1 — the template file

JPdfX is jquick-pdf's HTML-like template language. It lives in its own file (src/test/resources/report/credit_report_10_heatmap.txt) instead of a Java string, so designers can edit it without touching code.

<pdf>
<body>
  <div style="background:linear-gradient(135deg, #311B92 0%, #673AB7 100%); borderRadius:8px; paddings:16px; marginBottom:18px">
    <h1 style="fontSize:21; color:white; textAlignment:center; bold:true; marginBottom:12px">'企业信用评级报告'</h1>
    <div style="display:flex; justifyContent:space-around">
      <div style="width:180px; textAlignment:center">
        <div style="fontSize:8; color:#d1c4e9; textAlignment:center; marginBottom:3px">'报告编号'</div>
        <div style="fontSize:10; color:white; textAlignment:center">'CR-2023-08975'</div>
      </div>
      <div style="width:180px; textAlignment:center">
        <div style="fontSize:8; color:#d1c4e9; textAlignment:center; marginBottom:3px">'评估日期'</div>
        <div style="fontSize:10; color:white; textAlignment:center">'2023年11月15日'</div>
      </div>
      <div style="width:180px; textAlignment:center">
        <div style="fontSize:8; color:#d1c4e9; textAlignment:center; marginBottom:3px">'评估机构'</div>
        <div style="fontSize:10; color:white; textAlignment:center">'四川省企业信用评估中心'</div>
      </div>
    </div>
  </div>

  <div style="marginBottom:18px">
    <h2 style="fontSize:14; color:#311B92; bold:true; marginBottom:10px">'四川省泡海椒科技有限公司'</h2>
    <table style="width:600px; fontSize:10">
      <tr>
        <th style="backgroundColor:#512DA8; color:white; bold:true; padding:6px; textAlignment:left; width:160px">'统一信用代码'</th>
        <td style="padding:6px; textAlignment:left; width:440px">'91110108MA01XX1234'</td>
      </tr>
      <tr>
        <th style="backgroundColor:#ede7f6; color:#311B92; bold:true; padding:6px; textAlignment:left">'成立日期'</th>
        <td style="padding:6px; textAlignment:left">'2018年5月20日'</td>
      </tr>
      <tr>
        <th style="backgroundColor:#ede7f6; color:#311B92; bold:true; padding:6px; textAlignment:left">'注册资本'</th>
        <td style="padding:6px; textAlignment:left">'1000万元人民币'</td>
      </tr>
      <tr>
        <th style="backgroundColor:#ede7f6; color:#311B92; bold:true; padding:6px; textAlignment:left">'法定代表人'</th>
        <td style="padding:6px; textAlignment:left">'泡海椒'</td>
      </tr>
      <tr>
        <th style="backgroundColor:#ede7f6; color:#311B92; bold:true; padding:6px; textAlignment:left">'所属行业'</th>
        <td style="padding:6px; textAlignment:left">'软件和信息技术服务业'</td>
      </tr>
      <tr>
        <th style="backgroundColor:#ede7f6; color:#311B92; bold:true; padding:6px; textAlignment:left">'企业规模'</th>
        <td style="padding:6px; textAlignment:left">'中型（150-200人）'</td>
      </tr>
    </table>
  </div>

  <div style="marginBottom:18px">
    <h2 style="fontSize:13; color:#311B92; bold:true; marginBottom:10px">'历年财务数据（单位：万元）'</h2>
    <table style="width:600px; fontSize:10">
      <tr>
        <th style="backgroundColor:#512DA8; color:white; bold:true; padding:6px; textAlignment:left">'财务指标'</th>
        <th style="backgroundColor:#512DA8; color:white; bold:true; padding:6px; textAlignment:right">'2020年'</th>
        <th style="backgroundColor:#512DA8; color:white; bold:true; padding:6px; textAlignment:right">'2021年'</th>
        <th style="backgroundColor:#512DA8; color:white; bold:true; padding:6px; textAlignment:right">'2022年'</th>
        <th style="backgroundColor:#512DA8; color:white; bold:true; padding:6px; textAlignment:right">'2023年'</th>
        <th style="backgroundColor:#512DA8; color:white; bold:true; padding:6px; textAlignment:right">'增长率'</th>
      </tr>
      <tr>
        <td style="padding:6px; textAlignment:left; borderBottom:1px solid #ede7f6; bold:true">'营业收入'</td>
        <td style="padding:6px; textAlignment:right; borderBottom:1px solid #ede7f6">'8,560'</td>
        <td style="padding:6px; textAlignment:right; borderBottom:1px solid #ede7f6">'12,340'</td>
        <td style="padding:6px; textAlignment:right; borderBottom:1px solid #ede7f6">'18,920'</td>
        <td style="padding:6px; textAlignment:right; borderBottom:1px solid #ede7f6">'25,680'</td>
        <td style="padding:6px; textAlignment:right; borderBottom:1px solid #ede7f6; color:#512DA8; bold:true">'+44.2%'</td>
      </tr>
      <tr>
        <td style="padding:6px; textAlignment:left; borderBottom:1px solid #ede7f6; bold:true; backgroundColor:#f6f4fb">'净利润'</td>
        <td style="padding:6px; textAlignment:right; borderBottom:1px solid #ede7f6; backgroundColor:#f6f4fb">'1,240'</td>
        <td style="padding:6px; textAlignment:right; borderBottom:1px solid #ede7f6; backgroundColor:#f6f4fb">'2,150'</td>
        <td style="padding:6px; textAlignment:right; borderBottom:1px solid #ede7f6; backgroundColor:#f6f4fb">'3,890'</td>
        <td style="padding:6px; textAlignment:right; borderBottom:1px solid #ede7f6; backgroundColor:#f6f4fb">'5,420'</td>
        <td style="padding:6px; textAlignment:right; borderBottom:1px solid #ede7f6; backgroundColor:#f6f4fb; color:#512DA8; bold:true">'+63.8%'</td>
      </tr>
      <tr>
        <td style="padding:6px; textAlignment:left; borderBottom:1px solid #ede7f6; bold:true">'总资产'</td>
        <td style="padding:6px; textAlignment:right; borderBottom:1px solid #ede7f6">'15,800'</td>
        <td style="padding:6px; textAlignment:right; borderBottom:1px solid #ede7f6">'22,450'</td>
        <td style="padding:6px; textAlignment:right; borderBottom:1px solid #ede7f6">'31,200'</td>
        <td style="padding:6px; textAlignment:right; borderBottom:1px solid #ede7f6">'42,800'</td>
        <td style="padding:6px; textAlignment:right; borderBottom:1px solid #ede7f6; color:#512DA8; bold:true">'+39.5%'</td>
      </tr>
      <tr>
        <td style="padding:6px; textAlignment:left; borderBottom:1px solid #ede7f6; bold:true; backgroundColor:#f6f4fb">'净资产'</td>
        <td style="padding:6px; textAlignment:right; borderBottom:1px solid #ede7f6; backgroundColor:#f6f4fb">'9,200'</td>
        <td style="padding:6px; textAlignment:right; borderBottom:1px solid #ede7f6; backgroundColor:#f6f4fb">'13,800'</td>
        <td style="padding:6px; textAlignment:right; borderBottom:1px solid #ede7f6; backgroundColor:#f6f4fb">'19,500'</td>
        <td style="padding:6px; textAlignment:right; borderBottom:1px solid #ede7f6; backgroundColor:#f6f4fb">'26,400'</td>
        <td style="padding:6px; textAlignment:right; borderBottom:1px solid #ede7f6; backgroundColor:#f6f4fb; color:#512DA8; bold:true">'+42.1%'</td>
      </tr>
      <tr>
        <td style="padding:6px; textAlignment:left; borderBottom:1px solid #ede7f6; bold:true">'毛利率'</td>
        <td style="padding:6px; textAlignment:right; borderBottom:1px solid #ede7f6">'42.5%'</td>
        <td style="padding:6px; textAlignment:right; borderBottom:1px solid #ede7f6">'45.8%'</td>
        <td style="padding:6px; textAlignment:right; borderBottom:1px solid #ede7f6">'48.2%'</td>
        <td style="padding:6px; textAlignment:right; borderBottom:1px solid #ede7f6">'51.6%'</td>
        <td style="padding:6px; textAlignment:right; borderBottom:1px solid #ede7f6; color:#512DA8; bold:true">'+9.1%'</td>
      </tr>
    </table>
  </div>

  <div style="marginBottom:18px">
    <h2 style="fontSize:13; color:#311B92; bold:true; marginBottom:10px">'关键经营指标'</h2>
    <div style="display:flex; justifyContent:space-between">
      <div style="width:190px; padding:10px; border:1px solid #673AB7; borderRadius:6px; fontSize:10">
        '营收增长率:连续三年保持40%以上增长，2023年达到25,680万元。'
        '利润率提升:净利率从14.5%提升至21.1%，盈利能力显著增强。'
      </div>
      <div style="width:190px; padding:10px; border:1px solid #673AB7; borderRadius:6px; fontSize:10">
        '研发投入:研发费用年均增长38.9%，占营收比例达13.3%。'
        '人才结构:技术研发人员占比42%，硕士以上学历占35%。'
      </div>
      <div style="width:190px; padding:10px; border:1px solid #673AB7; borderRadius:6px; fontSize:10">
        '客户质量:服务15家上市公司，客户续约率92%，大客户满意度4.8/5.0。'
        '资产质量:资产负债率维持在38%左右，流动比率2.8，偿债能力良好。'
      </div>
    </div>
  </div>

  <div style="marginBottom:18px">
    <h2 style="fontSize:13; color:#311B92; bold:true; textAlignment:center; marginBottom:10px">'月度经营热力图'</h2>
    <div style="textAlignment:center">
      <svg style="width:450px;height:400px">${svg}</svg>
    </div>
    <div style="marginTop:10px">
      <h3 style="fontSize:12; color:#311B92; bold:true; textAlignment:center; marginBottom:8px">'评级指标说明'</h3>
      <div style="display:flex; justifyContent:space-between">
        <div style="width:290px">
          <div style="fontSize:10; marginBottom:6px">
            <span style="color:#512DA8; bold:true">'● 财务状况(90分): '</span>
            '营收稳定增长'
          </div>
          <div style="fontSize:10; marginBottom:6px">
            <span style="color:#2ecc71; bold:true">'● 经营能力(95分): '</span>
            '客户留存率高'
          </div>
        </div>
        <div style="width:290px">
          <div style="fontSize:10; marginBottom:6px">
            <span style="color:#e74c3c; bold:true">'● 偿债能力(85分): '</span>
            '负债率合理'
          </div>
          <div style="fontSize:10; marginBottom:6px">
            <span style="color:#f39c12; bold:true">'● 发展潜力(92分): '</span>
            '研发投入增加'
          </div>
        </div>
      </div>
    </div>
  </div>

  <div style="marginBottom:18px; background:linear-gradient(135deg, #ede7f6 0%, #d1c4e9 100%); borderRadius:10px; padding:16px; borderLeft:4px solid #673AB7">
    <h2 style="fontSize:13; color:#311B92; bold:true; marginBottom:8px">'综合评价'</h2>
    <p style="fontSize:11; textAlignment:left; marginBottom:8px">
      '四川省泡海椒科技有限公司作为国家级高新技术企业和专精特新"小巨人"企业，在云计算和大数据领域表现出色。'
      '公司财务状况健康，经营能力突出，技术创新能力强，具备良好的发展潜力。信用评级为AAA级，展望稳定。'
    </p>
    <p style="fontSize:8; color:#512DA8; textAlignment:right">'认证通过'</p>
  </div>

  <div style="textAlignment:center; marginTop:20px">
    <lineSeparator style="strokeColor:#512DA8"></lineSeparator>
    <p style="fontSize:9; color:#6c757d; textAlignment:center; marginTop:8px">'本报告依据公开信息和专业评估模型生成，仅供参考 | 报告生成时间: 2025年09月06日'</p>
    <p style="fontSize:9; color:#6c757d; textAlignment:center">'© 2023 企业信用评估中心 版权所有 | 认证编号: CE-2023-001'</p>
  </div>
</body>
</pdf>

Step 2 — the Java class

jquick-pdfx/src/test/java/com/github/paohaijiao/biz/report/JQuickCreditReport10HeatmapTest.java

/*
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
 * Copyright (c) [2025-2099] Martin (goudingcheng@gmail.com)
 */
package com.github.paohaijiao.biz.report;

import com.github.paohaijiao.JOption;
import com.github.paohaijiao.axis.JCategoryAxis;
import com.github.paohaijiao.config.JPdfConfig;
import com.github.paohaijiao.demo.constant.JQuickConstant;
import com.github.paohaijiao.enums.JChartType;
import com.github.paohaijiao.executor.JQuickPdfFactory;
import com.github.paohaijiao.factory.JChartRendererFactory;
import com.github.paohaijiao.series.JHeatmap;
import org.junit.Test;

import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;

/**
 * 统一信用报告 —— 风格 10：热力图（深紫）
 *
 * <p>以 {@code report/credit_report_10_heatmap.txt} 为模板，把热力图渲染成 SVG 后
 * 绑定到模板中的 {@code ${svg}} 占位符，输出到 {@code D:\test\creditreport\10_heatmap.pdf}。</p>
 *
 * @author Martin
 * @version 1.0.0
 */
public class JQuickCreditReport10HeatmapTest {

    public static final String path = JQuickConstant.path;

    @Test
    public void report10Heatmap() throws IOException {
        JOption option = new JOption();
        option.title("月度经营热力图", "各业务线月度营收（万元）");
        option.xAxis(new JCategoryAxis().data("1月", "2月", "3月", "4月", "5月", "6月"));
        option.yAxis(new JCategoryAxis().data("软件产品", "技术服务", "云服务", "其他业务"));
        JHeatmap heatmap = new JHeatmap();
        heatmap.data(
                new Object[]{0, 0, 860}, new Object[]{0, 1, 1020}, new Object[]{0, 2, 1180},
                new Object[]{0, 3, 1340}, new Object[]{0, 4, 1520}, new Object[]{0, 5, 1680},
                new Object[]{1, 0, 520}, new Object[]{1, 1, 640}, new Object[]{1, 2, 780},
                new Object[]{1, 3, 890}, new Object[]{1, 4, 1010}, new Object[]{1, 5, 1160},
                new Object[]{2, 0, 380}, new Object[]{2, 1, 460}, new Object[]{2, 2, 540},
                new Object[]{2, 3, 620}, new Object[]{2, 4, 710}, new Object[]{2, 5, 820},
                new Object[]{3, 0, 260}, new Object[]{3, 1, 310}, new Object[]{3, 2, 360},
                new Object[]{3, 3, 420}, new Object[]{3, 4, 470}, new Object[]{3, 5, 540}
        );
        option.series(heatmap);

        String svg = JChartRendererFactory.renderChart(JChartType.HEATMAP, option);

        File dir = new File(path + "creditreport");
        if (!dir.exists()) {
            dir.mkdirs();
        }
        FileOutputStream fileOutputStream = new FileOutputStream(path + "creditreport/10_heatmap.pdf");
        JPdfConfig config = new JPdfConfig();
        // 开启 flex 行布局：图表与其右侧的指标说明面板在宽度允许时并排，而不是换行堆叠。
        config.getLayoutConfig().setFlexLayout(true);
        JQuickPdfFactory factory = new JQuickPdfFactory(config);
        factory.bind("svg", svg);
        byte[] bytes = factory.executeResource("report/credit_report_10_heatmap.txt");
        fileOutputStream.write(bytes);
        fileOutputStream.close();
    }
}

Step 3 — run it

The class is a JUnit test, so run it with Maven:

mvn -pl jquick-pdfx test -Dtest=JQuickCreditReport10HeatmapTest

…or call the test method from a main wrapper if you want a plain entry point:

public static void main(String[] args) throws Exception {
    new JQuickCreditReport10HeatmapTest().report10Heatmap();
}

Output: D:/test/creditreport/10_heatmap.pdf

How it works

Binding a chart SVG into the template

Declare only the width on <svg>; the height is derived from the chart's aspect ratio, so the chart never stretches vertically.
Open config.getLayoutConfig().setFlexLayout(true) if the template centers the chart with display:flex.
Bind the SVG string with factory.bind("svg", svg) — bind() is pure data injection and never re-parses markup.

String svg = JChartRendererFactory.renderChart(JChartType.LINE, option);
JQuickPdfFactory factory = new JQuickPdfFactory(config);
factory.bind("svg", svg);
byte[] bytes = factory.executeResource(TEMPLATE);

Making the table fill the text area

Tables default to content width, which leaves a ragged right margin on a formal document. Setting width:100% on the <table> makes it span the full text area; percentage widths on the first row's cells then distribute the remaining space across columns.

Set width:100% on <table> and give explicit widths only to the leading columns.
Label columns need around 100px so labels like Taxpayer ID do not wrap.
Leave the last column without a width so it absorbs rounding remainder.

<table style="width:100%; fontSize:9pt">
  <tr>
    <td style="width:100px; padding:5px">'Taxpayer ID'</td>
    <td style="padding:5px">${taxNo}</td>
  </tr>
</table>

Template syntax cheat sheet

Syntax	Meaning
`<table style="width:100%">`	Spans the full text area; give explicit widths only to the leading columns.
`<areaBreak></areaBreak>`	Force the next block onto a fresh page (CSS page-break is not supported).
`<image src='D:/.../x.png'>`	Embed an image. `src` is a raw path — it is not evaluated as an expression.
`<svg style="width:479pt">${svg}</svg>`	Embed a vector chart produced by `JChartRendererFactory`.
`// comment`	Line comment. Keep `<!-- ... -->` comments short — long ones can blank the render.

Gotchas worth remembering

<image src="..."> never evaluates ${...}; write a literal path.
A <td> holds text only — nested <p>, <image> or <table> is dropped.
There is no colspan; emit one <td> per column and use '—' as filler.
setFontSize takes a float (8.5f); setMargins takes List<Integer>.

Output

Wrap up

You now have a template file, a Java class and a PDF — all three reproducible from a clean clone. Swap the placeholder blocks for real data (or for real seal images) and the layout does not move.

Series navigation: ← #9 Gauge Chart for the Composite Credit Score　·　#11 Correlation Matrix of Operating KPIs →

Full index: README.md　·　Source: jquick-pdf

Appendix — files in this demo

Role	Path
Java class	`jquick-pdfx/src/test/java/com/github/paohaijiao/biz/report/JQuickCreditReport10HeatmapTest.java`
Template	`jquick-pdfx/src/test/resources/report/credit_report_10_heatmap.txt`
Output PDF	`D:/test/creditreport/10_heatmap.pdf`
Preview image	`images/10.png`

Gauge Chart for the Composite Credit Score

paohaijiao — Sun, 01 Nov 2026 23:16:05 +0000

Gauge Chart for the Composite Credit Score

jquick-pdf by example — demo #9 of 184. Every article in this series ships one complete, runnable demo: a template file and a Java class. No snippets, no omissions.

A single dial that answers one question: how healthy is this borrower, on a 0-100 scale?

What you'll build

A PDF written to D:/test/creditreport/09_guage.pdf
A template file (report/credit_report_09_guage.txt) with 1 bound placeholder
A detail grid of 13 rows × 6 columns, laid out with width:100% so it fills the text area
One self-contained Java class (JQuickCreditReport09GuageTest) that binds the data and renders the file

Bound placeholders

${svg}

Prerequisites

Java 8+ and one dependency — jquick-pdf is built on Apache PDFBox, not iText:

<dependency>
    <groupId>io.github.paohaijiao</groupId>
    <artifactId>jquick-pdfx</artifactId>
    <version>4.2.0</version>
</dependency>

Coordinates: io.github.paohaijiao:jquick-pdfx:4.2.0.

Step 1 — the template file

JPdfX is jquick-pdf's HTML-like template language. It lives in its own file (src/test/resources/report/credit_report_09_guage.txt) instead of a Java string, so designers can edit it without touching code.

<pdf>
<body>
  <div style="textAlignment:center; marginBottom:22px">
    <lineSeparator style="strokeColor:#455A64"></lineSeparator>
    <h1 style="fontSize:24; color:#263238; textAlignment:center; bold:true; marginTop:12px; marginBottom:8px">'企业信用评级报告'</h1>
    <p style="fontSize:9; color:#90a4ae; characterSpacing:1; textAlignment:center; marginBottom:4px">'报告编号: CR-2023-08975  |  评估日期: 2023年11月15日'</p>
    <p style="fontSize:11; color:#263238; textAlignment:center; marginBottom:12px">'评估机构: 四川省企业信用评估中心'</p>
    <lineSeparator style="strokeColor:#455A64"></lineSeparator>
  </div>

  <div style="marginBottom:22px">
    <h2 style="fontSize:14; color:#263238; bold:true; marginBottom:10px">'四川省泡海椒科技有限公司'</h2>
    <table style="width:600px; fontSize:10">
      <tr>
        <th style="backgroundColor:#eceff1; color:#263238; bold:true; padding:7px; textAlignment:left; width:180px">'项目'</th>
        <th style="backgroundColor:#eceff1; color:#263238; bold:true; padding:7px; textAlignment:left; width:420px">'内容'</th>
      </tr>
      <tr>
        <td style="padding:7px; textAlignment:left; bold:true">'统一信用代码'</td>
        <td style="padding:7px; textAlignment:left">'91110108MA01XX1234'</td>
      </tr>
      <tr>
        <td style="padding:7px; textAlignment:left; bold:true">'成立日期'</td>
        <td style="padding:7px; textAlignment:left">'2018年5月20日'</td>
      </tr>
      <tr>
        <td style="padding:7px; textAlignment:left; bold:true">'注册资本'</td>
        <td style="padding:7px; textAlignment:left">'1000万元人民币'</td>
      </tr>
      <tr>
        <td style="padding:7px; textAlignment:left; bold:true">'法定代表人'</td>
        <td style="padding:7px; textAlignment:left">'泡海椒'</td>
      </tr>
      <tr>
        <td style="padding:7px; textAlignment:left; bold:true">'所属行业'</td>
        <td style="padding:7px; textAlignment:left">'软件和信息技术服务业'</td>
      </tr>
      <tr>
        <td style="padding:7px; textAlignment:left; bold:true">'企业规模'</td>
        <td style="padding:7px; textAlignment:left">'中型（150-200人）'</td>
      </tr>
    </table>
  </div>

  <div style="marginBottom:22px">
    <h2 style="fontSize:13; color:#263238; bold:true; marginBottom:10px">'历年财务数据（单位：万元）'</h2>
    <table style="width:600px; fontSize:10">
      <tr>
        <th style="backgroundColor:transparent; color:#263238; bold:true; padding:7px; textAlignment:left; borderBottom:1px solid #263238">'财务指标'</th>
        <th style="backgroundColor:transparent; color:#263238; bold:true; padding:7px; textAlignment:right; borderBottom:1px solid #263238">'2020年'</th>
        <th style="backgroundColor:transparent; color:#263238; bold:true; padding:7px; textAlignment:right; borderBottom:1px solid #263238">'2021年'</th>
        <th style="backgroundColor:transparent; color:#263238; bold:true; padding:7px; textAlignment:right; borderBottom:1px solid #263238">'2022年'</th>
        <th style="backgroundColor:transparent; color:#263238; bold:true; padding:7px; textAlignment:right; borderBottom:1px solid #263238">'2023年'</th>
        <th style="backgroundColor:transparent; color:#263238; bold:true; padding:7px; textAlignment:right; borderBottom:1px solid #263238">'增长率'</th>
      </tr>
      <tr>
        <td style="padding:7px; textAlignment:left; borderBottom:1px solid #eceff1">'营业收入'</td>
        <td style="padding:7px; textAlignment:right; borderBottom:1px solid #eceff1">'8,560'</td>
        <td style="padding:7px; textAlignment:right; borderBottom:1px solid #eceff1">'12,340'</td>
        <td style="padding:7px; textAlignment:right; borderBottom:1px solid #eceff1">'18,920'</td>
        <td style="padding:7px; textAlignment:right; borderBottom:1px solid #eceff1">'25,680'</td>
        <td style="padding:7px; textAlignment:right; borderBottom:1px solid #eceff1">'+44.2%'</td>
      </tr>
      <tr>
        <td style="padding:7px; textAlignment:left; borderBottom:1px solid #eceff1">'净利润'</td>
        <td style="padding:7px; textAlignment:right; borderBottom:1px solid #eceff1">'1,240'</td>
        <td style="padding:7px; textAlignment:right; borderBottom:1px solid #eceff1">'2,150'</td>
        <td style="padding:7px; textAlignment:right; borderBottom:1px solid #eceff1">'3,890'</td>
        <td style="padding:7px; textAlignment:right; borderBottom:1px solid #eceff1">'5,420'</td>
        <td style="padding:7px; textAlignment:right; borderBottom:1px solid #eceff1">'+63.8%'</td>
      </tr>
      <tr>
        <td style="padding:7px; textAlignment:left; borderBottom:1px solid #eceff1">'总资产'</td>
        <td style="padding:7px; textAlignment:right; borderBottom:1px solid #eceff1">'15,800'</td>
        <td style="padding:7px; textAlignment:right; borderBottom:1px solid #eceff1">'22,450'</td>
        <td style="padding:7px; textAlignment:right; borderBottom:1px solid #eceff1">'31,200'</td>
        <td style="padding:7px; textAlignment:right; borderBottom:1px solid #eceff1">'42,800'</td>
        <td style="padding:7px; textAlignment:right; borderBottom:1px solid #eceff1">'+39.5%'</td>
      </tr>
      <tr>
        <td style="padding:7px; textAlignment:left; borderBottom:1px solid #eceff1">'净资产'</td>
        <td style="padding:7px; textAlignment:right; borderBottom:1px solid #eceff1">'9,200'</td>
        <td style="padding:7px; textAlignment:right; borderBottom:1px solid #eceff1">'13,800'</td>
        <td style="padding:7px; textAlignment:right; borderBottom:1px solid #eceff1">'19,500'</td>
        <td style="padding:7px; textAlignment:right; borderBottom:1px solid #eceff1">'26,400'</td>
        <td style="padding:7px; textAlignment:right; borderBottom:1px solid #eceff1">'+42.1%'</td>
      </tr>
      <tr>
        <td style="padding:7px; textAlignment:left; borderBottom:1px solid #eceff1">'毛利率'</td>
        <td style="padding:7px; textAlignment:right; borderBottom:1px solid #eceff1">'42.5%'</td>
        <td style="padding:7px; textAlignment:right; borderBottom:1px solid #eceff1">'45.8%'</td>
        <td style="padding:7px; textAlignment:right; borderBottom:1px solid #eceff1">'48.2%'</td>
        <td style="padding:7px; textAlignment:right; borderBottom:1px solid #eceff1">'51.6%'</td>
        <td style="padding:7px; textAlignment:right; borderBottom:1px solid #eceff1">'+9.1%'</td>
      </tr>
    </table>
  </div>

  <div style="marginBottom:22px">
    <h2 style="fontSize:13; color:#263238; bold:true; marginBottom:12px">'关键经营指标'</h2>
    <div style="display:flex; marginBottom:14px">
      <div style="width:50px; fontSize:16; bold:true; color:#b0bec5">'01'</div>
      <div style="width:540px; fontSize:11">'营收增长率:连续三年保持40%以上增长，2023年达到25,680万元'</div>
    </div>
    <div style="display:flex; marginBottom:14px">
      <div style="width:50px; fontSize:16; bold:true; color:#b0bec5">'02'</div>
      <div style="width:540px; fontSize:11">'利润率提升:净利率从14.5%提升至21.1%，盈利能力显著增强'</div>
    </div>
    <div style="display:flex; marginBottom:14px">
      <div style="width:50px; fontSize:16; bold:true; color:#b0bec5">'03'</div>
      <div style="width:540px; fontSize:11">'研发投入:研发费用年均增长38.9%，占营收比例达13.3%'</div>
    </div>
    <div style="display:flex; marginBottom:14px">
      <div style="width:50px; fontSize:16; bold:true; color:#b0bec5">'04'</div>
      <div style="width:540px; fontSize:11">'人才结构:技术研发人员占比42%，硕士以上学历占35%'</div>
    </div>
    <div style="display:flex; marginBottom:14px">
      <div style="width:50px; fontSize:16; bold:true; color:#b0bec5">'05'</div>
      <div style="width:540px; fontSize:11">'客户质量:服务15家上市公司，客户续约率92%，大客户满意度4.8/5.0'</div>
    </div>
    <div style="display:flex; marginBottom:14px">
      <div style="width:50px; fontSize:16; bold:true; color:#b0bec5">'06'</div>
      <div style="width:540px; fontSize:11">'资产质量:资产负债率维持在38%左右，流动比率2.8，偿债能力良好'</div>
    </div>
  </div>

  <div style="marginBottom:22px">
    <h2 style="fontSize:13; color:#263238; bold:true; marginBottom:12px">'综合评分仪表盘'</h2>
    <div style="display:flex; justifyContent:space-between">
      <svg style="width:400px;height:400px">${svg}</svg>
      <div style="width:300px; padding:12px; backgroundColor:#eceff1; borderRadius:2px">
        <h3 style="fontSize:12; color:#263238; bold:true; marginBottom:8px">'评级指标说明'</h3>
        <div style="fontSize:10; marginBottom:6px">
          <span style="color:#455A64; bold:true">'● 财务状况(90分): '</span>
          '营收稳定增长'
        </div>
        <div style="fontSize:10; marginBottom:6px">
          <span style="color:#2ecc71; bold:true">'● 经营能力(95分): '</span>
          '客户留存率高'
        </div>
        <div style="fontSize:10; marginBottom:6px">
          <span style="color:#e74c3c; bold:true">'● 偿债能力(85分): '</span>
          '负债率合理'
        </div>
        <div style="fontSize:10; marginBottom:6px">
          <span style="color:#f39c12; bold:true">'● 发展潜力(92分): '</span>
          '研发投入增加'
        </div>
      </div>
    </div>
  </div>

  <div style="marginBottom:22px; backgroundColor:#eceff1; borderRadius:2px; padding:20px; textAlignment:center">
    <h2 style="fontSize:13; color:#263238; bold:true; textAlignment:center; marginBottom:8px">'综合评价'</h2>
    <p style="fontSize:11; textAlignment:center; marginBottom:8px">
      '四川省泡海椒科技有限公司作为国家级高新技术企业和专精特新"小巨人"企业，在云计算和大数据领域表现出色。'
      '公司财务状况健康，经营能力突出，技术创新能力强，具备良好的发展潜力。信用评级为AAA级，展望稳定。'
    </p>
    <p style="fontSize:8; color:#90a4ae; textAlignment:center">'认证通过'</p>
  </div>

  <div style="textAlignment:center; marginTop:20px">
    <lineSeparator style="strokeColor:#455A64"></lineSeparator>
    <p style="fontSize:8; color:#b0bec5; textAlignment:center; marginTop:8px">'本报告依据公开信息和专业评估模型生成，仅供参考 | 报告生成时间: 2025年09月06日'</p>
    <p style="fontSize:8; color:#b0bec5; textAlignment:center">'© 2023 企业信用评估中心 版权所有 | 认证编号: CE-2023-001'</p>
  </div>
</body>
</pdf>

Step 2 — the Java class

jquick-pdfx/src/test/java/com/github/paohaijiao/biz/report/JQuickCreditReport09GuageTest.java

/*
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
 * Copyright (c) [2025-2099] Martin (goudingcheng@gmail.com)
 */
package com.github.paohaijiao.biz.report;

import com.github.paohaijiao.JOption;
import com.github.paohaijiao.config.JPdfConfig;
import com.github.paohaijiao.demo.constant.JQuickConstant;
import com.github.paohaijiao.enums.JChartType;
import com.github.paohaijiao.executor.JQuickPdfFactory;
import com.github.paohaijiao.factory.JChartRendererFactory;
import com.github.paohaijiao.guage.GuageConfig;
import com.github.paohaijiao.guage.JGuageOption;
import org.junit.Test;

import java.awt.Color;
import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;

/**
 * 统一信用报告 —— 风格 09：仪表盘（石墨灰）
 *
 * <p>以 {@code report/credit_report_09_guage.txt} 为模板，把仪表盘渲染成 SVG 后
 * 绑定到模板中的 {@code ${svg}} 占位符，输出到 {@code D:\test\creditreport\09_guage.pdf}。</p>
 *
 * @author Martin
 * @version 1.0.0
 */
public class JQuickCreditReport09GuageTest {

    public static final String path = JQuickConstant.path;

    @Test
    @SuppressWarnings("deprecation")
    public void report09Guage() throws IOException {
        GuageConfig scoreConfig = GuageConfig.builder()
                .score(86)
                .pointerColor(new Color(69, 90, 100))
                .backgroundColor(new Color(240, 242, 245))
                .title("CREDIT SCORE")
                .build();
        JGuageOption guageOption = JGuageOption.builder().scoreMeter(scoreConfig).build();
        JOption option = new JOption();
        option.setGuageOption(guageOption);

        String svg = JChartRendererFactory.renderChart(JChartType.Guage, option);

        File dir = new File(path + "creditreport");
        if (!dir.exists()) {
            dir.mkdirs();
        }
        FileOutputStream fileOutputStream = new FileOutputStream(path + "creditreport/09_guage.pdf");
        JPdfConfig config = new JPdfConfig();
        // 开启 flex 行布局：图表与其右侧的指标说明面板在宽度允许时并排，而不是换行堆叠。
        config.getLayoutConfig().setFlexLayout(true);
        JQuickPdfFactory factory = new JQuickPdfFactory(config);
        factory.bind("svg", svg);
        byte[] bytes = factory.executeResource("report/credit_report_09_guage.txt");
        fileOutputStream.write(bytes);
        fileOutputStream.close();
    }
}

Step 3 — run it

The class is a JUnit test, so run it with Maven:

mvn -pl jquick-pdfx test -Dtest=JQuickCreditReport09GuageTest

…or call the test method from a main wrapper if you want a plain entry point:

public static void main(String[] args) throws Exception {
    new JQuickCreditReport09GuageTest().report09Guage();
}

Output: D:/test/creditreport/09_guage.pdf

How it works

Binding a chart SVG into the template

Declare only the width on <svg>; the height is derived from the chart's aspect ratio, so the chart never stretches vertically.
Open config.getLayoutConfig().setFlexLayout(true) if the template centers the chart with display:flex.
Bind the SVG string with factory.bind("svg", svg) — bind() is pure data injection and never re-parses markup.

String svg = JChartRendererFactory.renderChart(JChartType.LINE, option);
JQuickPdfFactory factory = new JQuickPdfFactory(config);
factory.bind("svg", svg);
byte[] bytes = factory.executeResource(TEMPLATE);

Flex layout: what it does and does not do

Enable flex on JPdfConfig before creating the factory.
Use fixed px widths that sum to less than the text width (~483px on A4 with 40pt margins).
Nested div two-column layouts are unreliable here — a full-width single column is safer.

JPdfConfig config = new JPdfConfig();
config.getLayoutConfig().setFlexLayout(true);

Template syntax cheat sheet

Syntax	Meaning
`<list style="listStyleType:decimal"><li>`	Ordered or unordered list items.
`<td style="padding:4px; border:1px solid #C3CDD8">`	Cell styling. A `<td>` holds text only — no nested blocks.
`factory.bind("k", v)`	Injects plain text into the context; markup inside a value is dropped.
`'literal text'`	A single-quoted string is a literal — whatever is inside is printed verbatim.
`${var}`	An expression. It must sit outside the quotes: `'No: '${docNo}`.

Gotchas worth remembering

Keep  comments short — long ones can silently blank the render.
Use the full-width ￥, not ¥, or the character may render as ?.
Compute money with BigDecimal, round once, and derive 大写 from the rounded value.
Flex children whose fixed widths exceed the text area wrap instead of sitting side by side.

Output

Wrap up

You now have a template file, a Java class and a PDF — all three reproducible from a clean clone. Swap the placeholder blocks for real data (or for real seal images) and the layout does not move.

Series navigation: ← #8 Funnel Chart: Where Credit Applications Drop Off　·　#10 Heatmap of Monthly Revenue Across Regions →

Full index: README.md　·　Source: jquick-pdf

Appendix — files in this demo

Role	Path
Java class	`jquick-pdfx/src/test/java/com/github/paohaijiao/biz/report/JQuickCreditReport09GuageTest.java`
Template	`jquick-pdfx/src/test/resources/report/credit_report_09_guage.txt`
Output PDF	`D:/test/creditreport/09_guage.pdf`
Preview image	`images/09.png`

Funnel Chart: Where Credit Applications Drop Off

paohaijiao — Sun, 01 Nov 2026 01:42:55 +0000

jquick-pdf by example — demo #8 of 184. Every article in this series ships one complete, runnable demo: a template file and a Java class. No snippets, no omissions.

From application to disbursement, five stages, each with an absolute count and a conversion rate.

What you'll build

A PDF written to D:/test/creditreport/08_funnel.pdf
A template file (report/credit_report_08_funnel.txt) with 1 bound placeholder
A detail grid of 6 rows × 1 columns, laid out with width:100% so it fills the text area
One self-contained Java class (JQuickCreditReport08FunnelTest) that binds the data and renders the file

Bound placeholders

${svg}

Prerequisites

Java 8+ and one dependency — jquick-pdf is built on Apache PDFBox, not iText:

<dependency>
    <groupId>io.github.paohaijiao</groupId>
    <artifactId>jquick-pdfx</artifactId>
    <version>4.2.0</version>
</dependency>

Coordinates: io.github.paohaijiao:jquick-pdfx:4.2.0.

Step 1 — the template file

JPdfX is jquick-pdf's HTML-like template language. It lives in its own file (src/test/resources/report/credit_report_08_funnel.txt) instead of a Java string, so designers can edit it without touching code.

<pdf>
<body>
  <div style="backgroundColor:#BF360C; color:white; paddings:16px; marginBottom:18px">
    <h1 style="fontSize:21; color:white; textAlignment:center; bold:true; marginBottom:6px">'企业信用评级报告'</h1>
    <p style="fontSize:10; color:#ffe0b2; textAlignment:center; marginBottom:3px">'报告编号: CR-2023-08975  |  评估日期: 2023年11月15日'</p>
    <p style="fontSize:10; color:#ffe0b2; textAlignment:center">'评估机构: 四川省企业信用评估中心'</p>
  </div>

  <div style="marginBottom:18px">
    <h2 style="fontSize:14; color:#BF360C; bold:true; marginBottom:10px">'四川省泡海椒科技有限公司'</h2>
    <table style="width:600px; fontSize:10">
      <tr>
        <th style="backgroundColor:#D84315; color:white; bold:true; padding:6px; textAlignment:left; width:160px">'统一信用代码'</th>
        <td style="padding:6px; textAlignment:left; width:440px">'91110108MA01XX1234'</td>
      </tr>
      <tr>
        <th style="backgroundColor:#fbe9e7; color:#BF360C; bold:true; padding:6px; textAlignment:left">'成立日期'</th>
        <td style="padding:6px; textAlignment:left">'2018年5月20日'</td>
      </tr>
      <tr>
        <th style="backgroundColor:#fbe9e7; color:#BF360C; bold:true; padding:6px; textAlignment:left">'注册资本'</th>
        <td style="padding:6px; textAlignment:left">'1000万元人民币'</td>
      </tr>
      <tr>
        <th style="backgroundColor:#fbe9e7; color:#BF360C; bold:true; padding:6px; textAlignment:left">'法定代表人'</th>
        <td style="padding:6px; textAlignment:left">'泡海椒'</td>
      </tr>
      <tr>
        <th style="backgroundColor:#fbe9e7; color:#BF360C; bold:true; padding:6px; textAlignment:left">'所属行业'</th>
        <td style="padding:6px; textAlignment:left">'软件和信息技术服务业'</td>
      </tr>
      <tr>
        <th style="backgroundColor:#fbe9e7; color:#BF360C; bold:true; padding:6px; textAlignment:left">'企业规模'</th>
        <td style="padding:6px; textAlignment:left">'中型（150-200人）'</td>
      </tr>
    </table>
  </div>

  <div style="marginBottom:18px">
    <h2 style="fontSize:13; color:#BF360C; bold:true; marginBottom:10px">'历年财务数据（单位：万元）'</h2>
    <div style="display:flex; flexWrap:wrap">
      <div style="width:190px; padding:10px; border:1px solid #FF5722; borderRadius:6px; margin:4px">
        <div style="fontSize:11; bold:true; color:#BF360C; marginBottom:6px">'营业收入'</div>
        <div style="fontSize:10; marginBottom:3px">'2020年 8,560'</div>
        <div style="fontSize:10; marginBottom:3px">'2021年 12,340'</div>
        <div style="fontSize:10; marginBottom:3px">'2022年 18,920'</div>
        <div style="fontSize:10">'2023年 25,680'</div>
      </div>
      <div style="width:190px; padding:10px; border:1px solid #FF5722; borderRadius:6px; margin:4px">
        <div style="fontSize:11; bold:true; color:#BF360C; marginBottom:6px">'净利润'</div>
        <div style="fontSize:10; marginBottom:3px">'2020年 1,240'</div>
        <div style="fontSize:10; marginBottom:3px">'2021年 2,150'</div>
        <div style="fontSize:10; marginBottom:3px">'2022年 3,890'</div>
        <div style="fontSize:10">'2023年 5,420'</div>
      </div>
      <div style="width:190px; padding:10px; border:1px solid #FF5722; borderRadius:6px; margin:4px">
        <div style="fontSize:11; bold:true; color:#BF360C; marginBottom:6px">'总资产'</div>
        <div style="fontSize:10; marginBottom:3px">'2020年 15,800'</div>
        <div style="fontSize:10; marginBottom:3px">'2021年 22,450'</div>
        <div style="fontSize:10; marginBottom:3px">'2022年 31,200'</div>
        <div style="fontSize:10">'2023年 42,800'</div>
      </div>
      <div style="width:190px; padding:10px; border:1px solid #FF5722; borderRadius:6px; margin:4px">
        <div style="fontSize:11; bold:true; color:#BF360C; marginBottom:6px">'净资产'</div>
        <div style="fontSize:10; marginBottom:3px">'2020年 9,200'</div>
        <div style="fontSize:10; marginBottom:3px">'2021年 13,800'</div>
        <div style="fontSize:10; marginBottom:3px">'2022年 19,500'</div>
        <div style="fontSize:10">'2023年 26,400'</div>
      </div>
      <div style="width:190px; padding:10px; border:1px solid #FF5722; borderRadius:6px; margin:4px">
        <div style="fontSize:11; bold:true; color:#BF360C; marginBottom:6px">'毛利率'</div>
        <div style="fontSize:10; marginBottom:3px">'2020年 42.5%'</div>
        <div style="fontSize:10; marginBottom:3px">'2021年 45.8%'</div>
        <div style="fontSize:10; marginBottom:3px">'2022年 48.2%'</div>
        <div style="fontSize:10">'2023年 51.6%'</div>
      </div>
    </div>
    <p style="fontSize:9; color:#BF360C; marginTop:8px">'同比增长: 营业收入 +44.2%  |  净利润 +63.8%  |  总资产 +39.5%  |  净资产 +42.1%  |  毛利率 +9.1%'</p>
  </div>

  <div style="marginBottom:18px">
    <h2 style="fontSize:13; color:#BF360C; bold:true; marginBottom:10px">'关键经营指标'</h2>
    <div style="marginBottom:8px; padding:10px; backgroundColor:#fbe9e7; borderLeft:4px solid #D84315; fontSize:11">
      '营收增长率:连续三年保持40%以上增长，2023年达到25,680万元'
    </div>
    <div style="marginBottom:8px; padding:10px; backgroundColor:#fbe9e7; borderLeft:4px solid #D84315; fontSize:11">
      '利润率提升:净利率从14.5%提升至21.1%，盈利能力显著增强'
    </div>
    <div style="marginBottom:8px; padding:10px; backgroundColor:#fbe9e7; borderLeft:4px solid #D84315; fontSize:11">
      '研发投入:研发费用年均增长38.9%，占营收比例达13.3%'
    </div>
    <div style="marginBottom:8px; padding:10px; backgroundColor:#fbe9e7; borderLeft:4px solid #D84315; fontSize:11">
      '人才结构:技术研发人员占比42%，硕士以上学历占35%'
    </div>
    <div style="marginBottom:8px; padding:10px; backgroundColor:#fbe9e7; borderLeft:4px solid #D84315; fontSize:11">
      '客户质量:服务15家上市公司，客户续约率92%，大客户满意度4.8/5.0'
    </div>
    <div style="marginBottom:8px; padding:10px; backgroundColor:#fbe9e7; borderLeft:4px solid #D84315; fontSize:11">
      '资产质量:资产负债率维持在38%左右，流动比率2.8，偿债能力良好'
    </div>
  </div>

  <div style="marginBottom:18px">
    <h2 style="fontSize:13; color:#BF360C; bold:true; textAlignment:center; marginBottom:10px">'客户转化漏斗图'</h2>
    <div style="textAlignment:center">
      <svg style="width:460px;height:400px">${svg}</svg>
    </div>
    <div style="display:flex; justifyContent:center; marginTop:10px">
      <div style="width:140px; padding:8px; fontSize:10">
        <span style="color:#D84315; bold:true">'● 财务状况(90分): '</span>
        '营收稳定增长'
      </div>
      <div style="width:140px; padding:8px; fontSize:10">
        <span style="color:#2ecc71; bold:true">'● 经营能力(95分): '</span>
        '客户留存率高'
      </div>
      <div style="width:140px; padding:8px; fontSize:10">
        <span style="color:#e74c3c; bold:true">'● 偿债能力(85分): '</span>
        '负债率合理'
      </div>
      <div style="width:140px; padding:8px; fontSize:10">
        <span style="color:#f39c12; bold:true">'● 发展潜力(92分): '</span>
        '研发投入增加'
      </div>
    </div>
  </div>

  <div style="marginBottom:18px; background:linear-gradient(135deg, #fbe9e7 0%, #ffccbc 100%); borderLeft:4px solid #FF5722; padding:14px">
    <h2 style="fontSize:13; color:#BF360C; bold:true; marginBottom:8px">'综合评价'</h2>
    <p style="fontSize:11; textAlignment:left; marginBottom:8px">
      '四川省泡海椒科技有限公司作为国家级高新技术企业和专精特新"小巨人"企业，在云计算和大数据领域表现出色。'
      '公司财务状况健康，经营能力突出，技术创新能力强，具备良好的发展潜力。信用评级为AAA级，展望稳定。'
    </p>
    <p style="fontSize:8; color:#d32f2f; textAlignment:right">'认证通过'</p>
  </div>

  <div style="textAlignment:center; marginTop:20px">
    <lineSeparator style="strokeColor:#D84315"></lineSeparator>
    <p style="fontSize:9; color:#6c757d; textAlignment:center; marginTop:8px">'本报告依据公开信息和专业评估模型生成，仅供参考 | 报告生成时间: 2025年09月06日'</p>
    <p style="fontSize:9; color:#6c757d; textAlignment:center">'© 2023 企业信用评估中心 版权所有 | 认证编号: CE-2023-001'</p>
  </div>
</body>
</pdf>

Step 2 — the Java class

jquick-pdfx/src/test/java/com/github/paohaijiao/biz/report/JQuickCreditReport08FunnelTest.java

/*
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
 * Copyright (c) [2025-2099] Martin (goudingcheng@gmail.com)
 */
package com.github.paohaijiao.biz.report;

import com.github.paohaijiao.JOption;
import com.github.paohaijiao.config.JPdfConfig;
import com.github.paohaijiao.demo.constant.JQuickConstant;
import com.github.paohaijiao.enums.JChartType;
import com.github.paohaijiao.executor.JQuickPdfFactory;
import com.github.paohaijiao.factory.JChartRendererFactory;
import com.github.paohaijiao.funnel.*;
import org.junit.Test;

import java.awt.Color;
import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.util.Arrays;
import java.util.Collections;

/**
 * 统一信用报告 —— 风格 08：漏斗图（深橙）
 *
 * <p>以 {@code report/credit_report_08_funnel.txt} 为模板，把漏斗图渲染成 SVG 后
 * 绑定到模板中的 {@code ${svg}} 占位符，输出到 {@code D:\test\creditreport\08_funnel.pdf}。</p>
 *
 * @author Martin
 * @version 1.0.0
 */
public class JQuickCreditReport08FunnelTest {

    public static final String path = JQuickConstant.path;

    @Test
    public void report08Funnel() throws IOException {
        JFunnelOption funnelOption = JFunnelOption.createDefaultFunnel();
        funnelOption = funnelOption
                .title(new Title().text("客户转化漏斗").subtext("2023年度数据"))
                .funnel(new Funnel()
                        .width(600)
                        .topY(80)
                        .bottomY(200)
                        .gap(2)
                        .borderColor(Color.GRAY)
                ).series(Collections.singletonList(
                        new Series()
                                .name("转化")
                                .type("funnel")
                                .data(Arrays.asList(
                                        new DataItem("线索获取", 12000),
                                        new DataItem("商务洽谈", 6000),
                                        new DataItem("方案确认", 2800),
                                        new DataItem("合同签订", 900)
                                ))))
                .colors(
                        new Color(191, 54, 12),
                        new Color(216, 67, 21),
                        new Color(255, 87, 34),
                        new Color(255, 138, 101)
                );
        JOption option = new JOption();
        option.setFunnelOption(funnelOption);

        String svg = JChartRendererFactory.renderChart(JChartType.Funnel, option);

        File dir = new File(path + "creditreport");
        if (!dir.exists()) {
            dir.mkdirs();
        }
        FileOutputStream fileOutputStream = new FileOutputStream(path + "creditreport/08_funnel.pdf");
        JPdfConfig config = new JPdfConfig();
        // 开启 flex 行布局：图表与其右侧的指标说明面板在宽度允许时并排，而不是换行堆叠。
        config.getLayoutConfig().setFlexLayout(true);
        JQuickPdfFactory factory = new JQuickPdfFactory(config);
        factory.bind("svg", svg);
        byte[] bytes = factory.executeResource("report/credit_report_08_funnel.txt");
        fileOutputStream.write(bytes);
        fileOutputStream.close();
    }
}

Step 3 — run it

The class is a JUnit test, so run it with Maven:

mvn -pl jquick-pdfx test -Dtest=JQuickCreditReport08FunnelTest

…or call the test method from a main wrapper if you want a plain entry point:

public static void main(String[] args) throws Exception {
    new JQuickCreditReport08FunnelTest().report08Funnel();
}

Output: D:/test/creditreport/08_funnel.pdf

How it works

Binding a chart SVG into the template

Declare only the width on <svg>; the height is derived from the chart's aspect ratio, so the chart never stretches vertically.
Open config.getLayoutConfig().setFlexLayout(true) if the template centers the chart with display:flex.
Bind the SVG string with factory.bind("svg", svg) — bind() is pure data injection and never re-parses markup.

String svg = JChartRendererFactory.renderChart(JChartType.LINE, option);
JQuickPdfFactory factory = new JQuickPdfFactory(config);
factory.bind("svg", svg);
byte[] bytes = factory.executeResource(TEMPLATE);

Making the table fill the text area

Set width:100% on <table> and give explicit widths only to the leading columns.
Label columns need around 100px so labels like Taxpayer ID do not wrap.
Leave the last column without a width so it absorbs rounding remainder.

<table style="width:100%; fontSize:9pt">
  <tr>
    <td style="width:100px; padding:5px">'Taxpayer ID'</td>
    <td style="padding:5px">${taxNo}</td>
  </tr>
</table>

Template syntax cheat sheet

Syntax	Meaning
`<image src='D:/.../x.png'>`	Embed an image. `src` is a raw path — it is not evaluated as an expression.
`<svg style="width:479pt">${svg}</svg>`	Embed a vector chart produced by `JChartRendererFactory`.
`// comment`	Line comment. Keep `<!-- ... -->` comments short — long ones can blank the render.
`<p style="fontSize:9pt; bold:true">`	Inline styles use camelCase keys, CSS-like values.
`<lineSeparator style="color:#2E5B8A; thickness:1.5f">`	Horizontal rule with colour and thickness.

Gotchas worth remembering

A <td> holds text only — nested <p>, <image> or <table> is dropped.
There is no colspan; emit one <td> per column and use '—' as filler.
setFontSize takes a float (8.5f); setMargins takes List<Integer>.
The footer format accepts exactly one %d.

Output

Wrap up

You now have a template file, a Java class and a PDF — all three reproducible from a clean clone. Swap the placeholder blocks for real data (or for real seal images) and the layout does not move.

Series navigation: ← #7 Donut Chart for Revenue Structure by Business Line　·　#9 Gauge Chart for the Composite Credit Score →

Full index: README.md　·　Source: jquick-pdf

Appendix — files in this demo

Role	Path
Java class	`jquick-pdfx/src/test/java/com/github/paohaijiao/biz/report/JQuickCreditReport08FunnelTest.java`
Template	`jquick-pdfx/src/test/resources/report/credit_report_08_funnel.txt`
Output PDF	`D:/test/creditreport/08_funnel.pdf`
Preview image	`images/08.png`

Donut Chart for Revenue Structure by Business Line

paohaijiao — Sat, 31 Oct 2026 10:24:30 +0000

jquick-pdf by example — demo #7 of 184. Every article in this series ships one complete, runnable demo: a template file and a Java class. No snippets, no omissions.

A donut keeps the centre free for the headline total while showing each line's share.

What you'll build

A PDF written to D:/test/creditreport/07_circle.pdf
A template file (report/credit_report_07_circle.txt) with 1 bound placeholder
A detail grid of 6 rows × 6 columns, laid out with width:100% so it fills the text area
One self-contained Java class (JQuickCreditReport07CircleTest) that binds the data and renders the file

Bound placeholders

${svg}

Prerequisites

Java 8+ and one dependency — jquick-pdf is built on Apache PDFBox, not iText:

<dependency>
    <groupId>io.github.paohaijiao</groupId>
    <artifactId>jquick-pdfx</artifactId>
    <version>4.2.0</version>
</dependency>

Coordinates: io.github.paohaijiao:jquick-pdfx:4.2.0.

Step 1 — the template file

JPdfX is jquick-pdf's HTML-like template language. It lives in its own file (src/test/resources/report/credit_report_07_circle.txt) instead of a Java string, so designers can edit it without touching code.

<pdf>
<body>
  <div style="textAlignment:center; marginBottom:18px">
    <h1 style="fontSize:22; color:#1B5E20; textAlignment:center; bold:true; marginBottom:6px">'企业信用评级报告'</h1>
    <p style="fontSize:10; color:#546e7a; textAlignment:center; marginBottom:8px">'四川省企业信用评估中心  |  报告编号: CR-2023-08975  |  评估日期: 2023年11月15日'</p>
    <lineSeparator style="strokeColor:#2E7D32"></lineSeparator>
  </div>

  <div style="marginBottom:18px">
    <h2 style="fontSize:14; color:#1B5E20; bold:true; textAlignment:center; marginBottom:12px">'四川省泡海椒科技有限公司'</h2>
    <div style="display:flex; justifyContent:space-between">
      <div style="width:140px; padding:10px; backgroundColor:#e8f5e9; borderRadius:6px; textAlignment:center">
        <div style="fontSize:8; color:#2E7D32; textAlignment:center; marginBottom:4px">'统一信用代码'</div>
        <div style="fontSize:10; bold:true; textAlignment:center">'91110108MA01XX1234'</div>
      </div>
      <div style="width:140px; padding:10px; backgroundColor:#e8f5e9; borderRadius:6px; textAlignment:center">
        <div style="fontSize:8; color:#2E7D32; textAlignment:center; marginBottom:4px">'成立日期'</div>
        <div style="fontSize:10; bold:true; textAlignment:center">'2018年5月20日'</div>
      </div>
      <div style="width:140px; padding:10px; backgroundColor:#e8f5e9; borderRadius:6px; textAlignment:center">
        <div style="fontSize:8; color:#2E7D32; textAlignment:center; marginBottom:4px">'注册资本'</div>
        <div style="fontSize:10; bold:true; textAlignment:center">'1000万元人民币'</div>
      </div>
      <div style="width:140px; padding:10px; backgroundColor:#e8f5e9; borderRadius:6px; textAlignment:center">
        <div style="fontSize:8; color:#2E7D32; textAlignment:center; marginBottom:4px">'法定代表人'</div>
        <div style="fontSize:10; bold:true; textAlignment:center">'泡海椒'</div>
      </div>
    </div>
    <p style="fontSize:9; color:#546e7a; textAlignment:center; marginTop:8px">'所属行业: 软件和信息技术服务业  |  企业规模: 中型（150-200人）'</p>
  </div>

  <div style="marginBottom:18px">
    <h2 style="fontSize:13; color:#2E7D32; bold:true; marginBottom:10px">'历年财务数据（单位：万元）'</h2>
    <table style="width:600px; fontSize:10">
      <tr>
        <th style="backgroundColor:#2E7D32; color:white; bold:true; padding:6px; textAlignment:left">'财务指标'</th>
        <th style="backgroundColor:#2E7D32; color:white; bold:true; padding:6px; textAlignment:center">'2020年'</th>
        <th style="backgroundColor:#2E7D32; color:white; bold:true; padding:6px; textAlignment:center">'2021年'</th>
        <th style="backgroundColor:#2E7D32; color:white; bold:true; padding:6px; textAlignment:center">'2022年'</th>
        <th style="backgroundColor:#2E7D32; color:white; bold:true; padding:6px; textAlignment:center">'2023年'</th>
        <th style="backgroundColor:#2E7D32; color:white; bold:true; padding:6px; textAlignment:center">'增长率'</th>
      </tr>
      <tr>
        <td style="padding:6px; textAlignment:left; borderBottom:1px solid #c8e6c9; bold:true">'营业收入'</td>
        <td style="padding:6px; textAlignment:right; borderBottom:1px solid #c8e6c9">'8,560'</td>
        <td style="padding:6px; textAlignment:right; borderBottom:1px solid #c8e6c9">'12,340'</td>
        <td style="padding:6px; textAlignment:right; borderBottom:1px solid #c8e6c9">'18,920'</td>
        <td style="padding:6px; textAlignment:right; borderBottom:1px solid #c8e6c9">'25,680'</td>
        <td style="padding:6px; textAlignment:right; borderBottom:1px solid #c8e6c9; color:#2E7D32; bold:true">'+44.2%'</td>
      </tr>
      <tr>
        <td style="padding:6px; textAlignment:left; borderBottom:1px solid #c8e6c9; bold:true; backgroundColor:#f1f8f1">'净利润'</td>
        <td style="padding:6px; textAlignment:right; borderBottom:1px solid #c8e6c9; backgroundColor:#f1f8f1">'1,240'</td>
        <td style="padding:6px; textAlignment:right; borderBottom:1px solid #c8e6c9; backgroundColor:#f1f8f1">'2,150'</td>
        <td style="padding:6px; textAlignment:right; borderBottom:1px solid #c8e6c9; backgroundColor:#f1f8f1">'3,890'</td>
        <td style="padding:6px; textAlignment:right; borderBottom:1px solid #c8e6c9; backgroundColor:#f1f8f1">'5,420'</td>
        <td style="padding:6px; textAlignment:right; borderBottom:1px solid #c8e6c9; backgroundColor:#f1f8f1; color:#2E7D32; bold:true">'+63.8%'</td>
      </tr>
      <tr>
        <td style="padding:6px; textAlignment:left; borderBottom:1px solid #c8e6c9; bold:true">'总资产'</td>
        <td style="padding:6px; textAlignment:right; borderBottom:1px solid #c8e6c9">'15,800'</td>
        <td style="padding:6px; textAlignment:right; borderBottom:1px solid #c8e6c9">'22,450'</td>
        <td style="padding:6px; textAlignment:right; borderBottom:1px solid #c8e6c9">'31,200'</td>
        <td style="padding:6px; textAlignment:right; borderBottom:1px solid #c8e6c9">'42,800'</td>
        <td style="padding:6px; textAlignment:right; borderBottom:1px solid #c8e6c9; color:#2E7D32; bold:true">'+39.5%'</td>
      </tr>
      <tr>
        <td style="padding:6px; textAlignment:left; borderBottom:1px solid #c8e6c9; bold:true; backgroundColor:#f1f8f1">'净资产'</td>
        <td style="padding:6px; textAlignment:right; borderBottom:1px solid #c8e6c9; backgroundColor:#f1f8f1">'9,200'</td>
        <td style="padding:6px; textAlignment:right; borderBottom:1px solid #c8e6c9; backgroundColor:#f1f8f1">'13,800'</td>
        <td style="padding:6px; textAlignment:right; borderBottom:1px solid #c8e6c9; backgroundColor:#f1f8f1">'19,500'</td>
        <td style="padding:6px; textAlignment:right; borderBottom:1px solid #c8e6c9; backgroundColor:#f1f8f1">'26,400'</td>
        <td style="padding:6px; textAlignment:right; borderBottom:1px solid #c8e6c9; backgroundColor:#f1f8f1; color:#2E7D32; bold:true">'+42.1%'</td>
      </tr>
      <tr>
        <td style="padding:6px; textAlignment:left; borderBottom:1px solid #c8e6c9; bold:true">'毛利率'</td>
        <td style="padding:6px; textAlignment:right; borderBottom:1px solid #c8e6c9">'42.5%'</td>
        <td style="padding:6px; textAlignment:right; borderBottom:1px solid #c8e6c9">'45.8%'</td>
        <td style="padding:6px; textAlignment:right; borderBottom:1px solid #c8e6c9">'48.2%'</td>
        <td style="padding:6px; textAlignment:right; borderBottom:1px solid #c8e6c9">'51.6%'</td>
        <td style="padding:6px; textAlignment:right; borderBottom:1px solid #c8e6c9; color:#2E7D32; bold:true">'+9.1%'</td>
      </tr>
    </table>
  </div>

  <div style="marginBottom:18px">
    <h2 style="fontSize:13; color:#2E7D32; bold:true; marginBottom:10px">'关键经营指标'</h2>
    <div style="display:flex; flexWrap:wrap">
      <div style="width:290px; margin:4px; padding:10px; backgroundColor:#f1f8f1; borderRadius:6px; borderLeft:4px solid #43A047; fontSize:11">
        '营收增长率:连续三年保持40%以上增长，2023年达到25,680万元'
      </div>
      <div style="width:290px; margin:4px; padding:10px; backgroundColor:#f1f8f1; borderRadius:6px; borderLeft:4px solid #43A047; fontSize:11">
        '利润率提升:净利率从14.5%提升至21.1%，盈利能力显著增强'
      </div>
      <div style="width:290px; margin:4px; padding:10px; backgroundColor:#f1f8f1; borderRadius:6px; borderLeft:4px solid #43A047; fontSize:11">
        '研发投入:研发费用年均增长38.9%，占营收比例达13.3%'
      </div>
      <div style="width:290px; margin:4px; padding:10px; backgroundColor:#f1f8f1; borderRadius:6px; borderLeft:4px solid #43A047; fontSize:11">
        '人才结构:技术研发人员占比42%，硕士以上学历占35%'
      </div>
      <div style="width:290px; margin:4px; padding:10px; backgroundColor:#f1f8f1; borderRadius:6px; borderLeft:4px solid #43A047; fontSize:11">
        '客户质量:服务15家上市公司，客户续约率92%，大客户满意度4.8/5.0'
      </div>
      <div style="width:290px; margin:4px; padding:10px; backgroundColor:#f1f8f1; borderRadius:6px; borderLeft:4px solid #43A047; fontSize:11">
        '资产质量:资产负债率维持在38%左右，流动比率2.8，偿债能力良好'
      </div>
    </div>
  </div>

  <div style="marginBottom:18px">
    <h2 style="fontSize:13; color:#2E7D32; bold:true; marginBottom:10px">'营收结构环形图'</h2>
    <div style="display:flex; justifyContent:space-between">
      <div style="width:300px; padding:12px; backgroundColor:#f1f8f1; borderRadius:6px">
        <h3 style="fontSize:12; color:#1B5E20; bold:true; marginBottom:8px">'评级指标说明'</h3>
        <div style="fontSize:10; marginBottom:6px">
          <span style="color:#2E7D32; bold:true">'● 财务状况(90分): '</span>
          '营收稳定增长'
        </div>
        <div style="fontSize:10; marginBottom:6px">
          <span style="color:#2ecc71; bold:true">'● 经营能力(95分): '</span>
          '客户留存率高'
        </div>
        <div style="fontSize:10; marginBottom:6px">
          <span style="color:#e74c3c; bold:true">'● 偿债能力(85分): '</span>
          '负债率合理'
        </div>
        <div style="fontSize:10; marginBottom:6px">
          <span style="color:#f39c12; bold:true">'● 发展潜力(92分): '</span>
          '研发投入增加'
        </div>
      </div>
      <svg style="width:400px;height:400px">${svg}</svg>
    </div>
  </div>

  <div style="marginBottom:18px; backgroundColor:#1B5E20; color:white; borderRadius:8px; padding:16px">
    <h2 style="fontSize:13; color:white; bold:true; marginBottom:8px">'综合评价'</h2>
    <p style="fontSize:11; color:white; textAlignment:left; marginBottom:8px">
      '四川省泡海椒科技有限公司作为国家级高新技术企业和专精特新"小巨人"企业，在云计算和大数据领域表现出色。'
      '公司财务状况健康，经营能力突出，技术创新能力强，具备良好的发展潜力。信用评级为AAA级，展望稳定。'
    </p>
    <p style="fontSize:8; color:#c8e6c9; textAlignment:right">'认证通过'</p>
  </div>

  <div style="textAlignment:center; marginTop:20px">
    <lineSeparator style="strokeColor:#2E7D32"></lineSeparator>
    <p style="fontSize:9; color:#78909c; textAlignment:center; marginTop:8px">'本报告依据公开信息和专业评估模型生成，仅供参考 | 报告生成时间: 2025年09月06日'</p>
    <p style="fontSize:9; color:#78909c; textAlignment:center">'© 2023 企业信用评估中心 版权所有 | 认证编号: CE-2023-001'</p>
  </div>
</body>
</pdf>

Step 2 — the Java class

jquick-pdfx/src/test/java/com/github/paohaijiao/biz/report/JQuickCreditReport07CircleTest.java

/*
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
 * Copyright (c) [2025-2099] Martin (goudingcheng@gmail.com)
 */
package com.github.paohaijiao.biz.report;

import com.github.paohaijiao.JOption;
import com.github.paohaijiao.combol.JCircleChartData;
import com.github.paohaijiao.config.JPdfConfig;
import com.github.paohaijiao.demo.constant.JQuickConstant;
import com.github.paohaijiao.enums.JChartType;
import com.github.paohaijiao.executor.JQuickPdfFactory;
import com.github.paohaijiao.factory.JChartRendererFactory;
import org.junit.Test;

import java.awt.Color;
import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

/**
 * 统一信用报告 —— 风格 07：环形图（深绿）
 *
 * <p>以 {@code report/credit_report_07_circle.txt} 为模板，把环形图渲染成 SVG 后
 * 绑定到模板中的 {@code ${svg}} 占位符，输出到 {@code D:\test\creditreport\07_circle.pdf}。</p>
 *
 * @author Martin
 * @version 1.0.0
 */
public class JQuickCreditReport07CircleTest {

    public static final String path = JQuickConstant.path;

    @Test
    public void report07Circle() throws IOException {
        JCircleChartData chartData = new JCircleChartData();
        chartData.setWidth(500);
        chartData.setHeight(400);
        chartData.setTitleText("营收结构环形图");
        chartData.setSubtitleText("2023年度按业务线统计");
        chartData.setCenterTitle("总营收");
        chartData.setCenterUnit("万元");
        chartData.setFooterText("数据来源：企业信用评估中心");
        List<JCircleChartData.SectorData> sectors = new ArrayList<>();
        sectors.add(new JCircleChartData.SectorData("软件产品", 10270, new Color(46, 125, 50)));
        sectors.add(new JCircleChartData.SectorData("技术服务", 6420, new Color(67, 160, 71)));
        sectors.add(new JCircleChartData.SectorData("云服务", 5136, new Color(129, 199, 132)));
        sectors.add(new JCircleChartData.SectorData("其他", 3854, new Color(165, 214, 167)));
        chartData.setSectorDataList(sectors);
        JOption option = new JOption();
        option.setData(chartData);

        String svg = JChartRendererFactory.renderChart(JChartType.Circle, option);

        File dir = new File(path + "creditreport");
        if (!dir.exists()) {
            dir.mkdirs();
        }
        FileOutputStream fileOutputStream = new FileOutputStream(path + "creditreport/07_circle.pdf");
        JPdfConfig config = new JPdfConfig();
        // 开启 flex 行布局：图表与其右侧的指标说明面板在宽度允许时并排，而不是换行堆叠。
        config.getLayoutConfig().setFlexLayout(true);
        JQuickPdfFactory factory = new JQuickPdfFactory(config);
        factory.bind("svg", svg);
        byte[] bytes = factory.executeResource("report/credit_report_07_circle.txt");
        fileOutputStream.write(bytes);
        fileOutputStream.close();
    }
}

Step 3 — run it

The class is a JUnit test, so run it with Maven:

mvn -pl jquick-pdfx test -Dtest=JQuickCreditReport07CircleTest

…or call the test method from a main wrapper if you want a plain entry point:

public static void main(String[] args) throws Exception {
    new JQuickCreditReport07CircleTest().report07Circle();
}

Output: D:/test/creditreport/07_circle.pdf

How it works

Binding a chart SVG into the template

Declare only the width on <svg>; the height is derived from the chart's aspect ratio, so the chart never stretches vertically.
Open config.getLayoutConfig().setFlexLayout(true) if the template centers the chart with display:flex.
Bind the SVG string with factory.bind("svg", svg) — bind() is pure data injection and never re-parses markup.

String svg = JChartRendererFactory.renderChart(JChartType.LINE, option);
JQuickPdfFactory factory = new JQuickPdfFactory(config);
factory.bind("svg", svg);
byte[] bytes = factory.executeResource(TEMPLATE);

CJK font configuration

Set the font once on JPdfConfig.getFontConfig() before rendering.
Chart SVG text is a separate pipeline — register the same family on JOption or chart labels fall back to Helvetica.
Prefer the full-width ￥ over ¥; the latter is often absent from CJK faces.

JPdfConfig config = new JPdfConfig();
config.getFontConfig().setDefaultFontName("Noto Sans CJK SC");

Template syntax cheat sheet

Syntax	Meaning
`factory.bind("k", v)`	Injects plain text into the context; markup inside a value is dropped.
`'literal text'`	A single-quoted string is a literal — whatever is inside is printed verbatim.
`${var}`	An expression. It must sit outside the quotes: `'No: '${docNo}`.
`<table style="width:100%">`	Spans the full text area; give explicit widths only to the leading columns.
`<areaBreak></areaBreak>`	Force the next block onto a fresh page (CSS page-break is not supported).

Gotchas worth remembering

Compute money with BigDecimal, round once, and derive 大写 from the rounded value.
Flex children whose fixed widths exceed the text area wrap instead of sitting side by side.
${var} must sit outside single quotes — 'No: ${docNo}' prints the placeholder literally.
<image src="..."> never evaluates ${...}; write a literal path.

Output

Wrap up

You now have a template file, a Java class and a PDF — all three reproducible from a clean clone. Swap the placeholder blocks for real data (or for real seal images) and the layout does not move.

Series navigation: ← #6 Comparing Two Scoring Models with a Double Radar Chart　·　#8 Funnel Chart: Where Credit Applications Drop Off →

Full index: README.md　·　Source: jquick-pdf

Appendix — files in this demo

Role	Path
Java class	`jquick-pdfx/src/test/java/com/github/paohaijiao/biz/report/JQuickCreditReport07CircleTest.java`
Template	`jquick-pdfx/src/test/resources/report/credit_report_07_circle.txt`
Output PDF	`D:/test/creditreport/07_circle.pdf`
Preview image	`images/07.png`

Comparing Two Scoring Models with a Double Radar Chart

paohaijiao — Fri, 30 Oct 2026 13:24:53 +0000

FORMULAS 示例页：https://www.jquick.org/jquick-pdf

github 地址：https://github.com/paohaijiao/jquick-pdf

jquick-pdf by example — demo #6 of 184. Every article in this series ships one complete, runnable demo: a template file and a Java class. No snippets, no omissions.

Overlaying the incumbent scorecard against the challenger model on shared axes.

What you'll build

A PDF written to D:/test/creditreport/06_double_radar.pdf
A template file (report/credit_report_06_double_radar.txt) with 1 bound placeholder
A detail grid of 12 rows × 6 columns, laid out with width:100% so it fills the text area
One self-contained Java class (JQuickCreditReport06DoubleRadarTest) that binds the data and renders the file

Bound placeholders

${svg}

Prerequisites

Java 8+ and one dependency — jquick-pdf is built on Apache PDFBox, not iText:

<dependency>
    <groupId>io.github.paohaijiao</groupId>
    <artifactId>jquick-pdfx</artifactId>
    <version>4.2.0</version>
</dependency>

Coordinates: io.github.paohaijiao:jquick-pdfx:4.2.0.

Step 1 — the template file

JPdfX is jquick-pdf's HTML-like template language. It lives in its own file (src/test/resources/report/credit_report_06_double_radar.txt) instead of a Java string, so designers can edit it without touching code.

<pdf>
<body>
  <div style="backgroundColor:white; padding:16px; textAlignment:center; marginBottom:18px">
    <p style="fontSize:9; color:#C2185B; characterSpacing:2; textAlignment:center; marginBottom:6px">'CREDIT RATING REPORT'</p>
    <h1 style="fontSize:22; color:#AD1457; textAlignment:center; bold:true; marginBottom:6px">'企业信用评级报告'</h1>
    <div style="display:flex; justifyContent:center; marginBottom:8px">
      <div style="width:60px; height:4px; backgroundColor:#E91E63; borderRadius:2px"></div>
    </div>
    <p style="fontSize:10; color:#6d4c41; textAlignment:center; marginBottom:3px">'评估机构: 四川省企业信用评估中心'</p>
    <p style="fontSize:10; color:#6d4c41; textAlignment:center">'报告编号: CR-2023-08975  |  评估日期: 2023年11月15日'</p>
  </div>

  <div style="marginBottom:18px">
    <h2 style="fontSize:14; color:#AD1457; bold:true; marginBottom:10px">'四川省泡海椒科技有限公司'</h2>
    <table style="width:600px; fontSize:11">
      <tr>
        <td style="width:160px; color:#AD1457; bold:true; fontSize:10; padding:7px; textAlignment:left; borderBottom:1px solid #f8bbd0">'统一信用代码'</td>
        <td style="fontSize:11; padding:7px; textAlignment:left; borderBottom:1px solid #f8bbd0">'91110108MA01XX1234'</td>
      </tr>
      <tr>
        <td style="width:160px; color:#AD1457; bold:true; fontSize:10; padding:7px; textAlignment:left; borderBottom:1px solid #f8bbd0">'成立日期'</td>
        <td style="fontSize:11; padding:7px; textAlignment:left; borderBottom:1px solid #f8bbd0">'2018年5月20日'</td>
      </tr>
      <tr>
        <td style="width:160px; color:#AD1457; bold:true; fontSize:10; padding:7px; textAlignment:left; borderBottom:1px solid #f8bbd0">'注册资本'</td>
        <td style="fontSize:11; padding:7px; textAlignment:left; borderBottom:1px solid #f8bbd0">'1000万元人民币'</td>
      </tr>
      <tr>
        <td style="width:160px; color:#AD1457; bold:true; fontSize:10; padding:7px; textAlignment:left; borderBottom:1px solid #f8bbd0">'法定代表人'</td>
        <td style="fontSize:11; padding:7px; textAlignment:left; borderBottom:1px solid #f8bbd0">'泡海椒'</td>
      </tr>
      <tr>
        <td style="width:160px; color:#AD1457; bold:true; fontSize:10; padding:7px; textAlignment:left; borderBottom:1px solid #f8bbd0">'所属行业'</td>
        <td style="fontSize:11; padding:7px; textAlignment:left; borderBottom:1px solid #f8bbd0">'软件和信息技术服务业'</td>
      </tr>
      <tr>
        <td style="width:160px; color:#AD1457; bold:true; fontSize:10; padding:7px; textAlignment:left; borderBottom:1px solid #f8bbd0">'企业规模'</td>
        <td style="fontSize:11; padding:7px; textAlignment:left; borderBottom:1px solid #f8bbd0">'中型（150-200人）'</td>
      </tr>
    </table>
  </div>

  <div style="marginBottom:18px">
    <h2 style="fontSize:13; color:#AD1457; bold:true; marginBottom:10px">'历年财务数据（单位：万元）'</h2>
    <table style="width:600px; fontSize:10">
      <tr>
        <th style="backgroundColor:#fce4ec; color:#AD1457; bold:true; padding:6px; textAlignment:left">'财务指标'</th>
        <th style="backgroundColor:#fce4ec; color:#AD1457; bold:true; padding:6px; textAlignment:center">'2020年'</th>
        <th style="backgroundColor:#fce4ec; color:#AD1457; bold:true; padding:6px; textAlignment:center">'2021年'</th>
        <th style="backgroundColor:#fce4ec; color:#AD1457; bold:true; padding:6px; textAlignment:center">'2022年'</th>
        <th style="backgroundColor:#fce4ec; color:#AD1457; bold:true; padding:6px; textAlignment:center">'2023年'</th>
        <th style="backgroundColor:#fce4ec; color:#AD1457; bold:true; padding:6px; textAlignment:center">'增长率'</th>
      </tr>
      <tr>
        <td style="padding:6px; textAlignment:left; borderBottom:1px solid #f8bbd0; bold:true">'营业收入'</td>
        <td style="padding:6px; textAlignment:right; borderBottom:1px solid #f8bbd0">'8,560'</td>
        <td style="padding:6px; textAlignment:right; borderBottom:1px solid #f8bbd0">'12,340'</td>
        <td style="padding:6px; textAlignment:right; borderBottom:1px solid #f8bbd0">'18,920'</td>
        <td style="padding:6px; textAlignment:right; borderBottom:1px solid #f8bbd0">'25,680'</td>
        <td style="padding:6px; textAlignment:right; borderBottom:1px solid #f8bbd0; color:#C2185B; bold:true">'+44.2%'</td>
      </tr>
      <tr>
        <td style="padding:6px; textAlignment:left; borderBottom:1px solid #f8bbd0; bold:true">'净利润'</td>
        <td style="padding:6px; textAlignment:right; borderBottom:1px solid #f8bbd0">'1,240'</td>
        <td style="padding:6px; textAlignment:right; borderBottom:1px solid #f8bbd0">'2,150'</td>
        <td style="padding:6px; textAlignment:right; borderBottom:1px solid #f8bbd0">'3,890'</td>
        <td style="padding:6px; textAlignment:right; borderBottom:1px solid #f8bbd0">'5,420'</td>
        <td style="padding:6px; textAlignment:right; borderBottom:1px solid #f8bbd0; color:#C2185B; bold:true">'+63.8%'</td>
      </tr>
      <tr>
        <td style="padding:6px; textAlignment:left; borderBottom:1px solid #f8bbd0; bold:true">'总资产'</td>
        <td style="padding:6px; textAlignment:right; borderBottom:1px solid #f8bbd0">'15,800'</td>
        <td style="padding:6px; textAlignment:right; borderBottom:1px solid #f8bbd0">'22,450'</td>
        <td style="padding:6px; textAlignment:right; borderBottom:1px solid #f8bbd0">'31,200'</td>
        <td style="padding:6px; textAlignment:right; borderBottom:1px solid #f8bbd0">'42,800'</td>
        <td style="padding:6px; textAlignment:right; borderBottom:1px solid #f8bbd0; color:#C2185B; bold:true">'+39.5%'</td>
      </tr>
      <tr>
        <td style="padding:6px; textAlignment:left; borderBottom:1px solid #f8bbd0; bold:true">'净资产'</td>
        <td style="padding:6px; textAlignment:right; borderBottom:1px solid #f8bbd0">'9,200'</td>
        <td style="padding:6px; textAlignment:right; borderBottom:1px solid #f8bbd0">'13,800'</td>
        <td style="padding:6px; textAlignment:right; borderBottom:1px solid #f8bbd0">'19,500'</td>
        <td style="padding:6px; textAlignment:right; borderBottom:1px solid #f8bbd0">'26,400'</td>
        <td style="padding:6px; textAlignment:right; borderBottom:1px solid #f8bbd0; color:#C2185B; bold:true">'+42.1%'</td>
      </tr>
      <tr>
        <td style="padding:6px; textAlignment:left; borderBottom:1px solid #f8bbd0; bold:true">'毛利率'</td>
        <td style="padding:6px; textAlignment:right; borderBottom:1px solid #f8bbd0">'42.5%'</td>
        <td style="padding:6px; textAlignment:right; borderBottom:1px solid #f8bbd0">'45.8%'</td>
        <td style="padding:6px; textAlignment:right; borderBottom:1px solid #f8bbd0">'48.2%'</td>
        <td style="padding:6px; textAlignment:right; borderBottom:1px solid #f8bbd0">'51.6%'</td>
        <td style="padding:6px; textAlignment:right; borderBottom:1px solid #f8bbd0; color:#C2185B; bold:true">'+9.1%'</td>
      </tr>
    </table>
  </div>

  <div style="marginBottom:18px">
    <h2 style="fontSize:13; color:#AD1457; bold:true; marginBottom:12px">'关键经营指标'</h2>
    <div style="display:flex; marginBottom:10px">
      <div style="width:90px; fontSize:18; bold:true; color:#C2185B; textAlignment:right; paddingRight:6px">'44.2%'</div>
      <div style="width:500px; paddingLeft:12px; fontSize:11">'营收增长率:连续三年保持40%以上增长，2023年达到25,680万元'</div>
    </div>
    <div style="display:flex; marginBottom:10px">
      <div style="width:90px; fontSize:18; bold:true; color:#C2185B; textAlignment:right; paddingRight:6px">'63.8%'</div>
      <div style="width:500px; paddingLeft:12px; fontSize:11">'利润率提升:净利率从14.5%提升至21.1%，盈利能力显著增强'</div>
    </div>
    <div style="display:flex; marginBottom:10px">
      <div style="width:90px; fontSize:18; bold:true; color:#C2185B; textAlignment:right; paddingRight:6px">'38.9%'</div>
      <div style="width:500px; paddingLeft:12px; fontSize:11">'研发投入:研发费用年均增长38.9%，占营收比例达13.3%'</div>
    </div>
    <div style="display:flex; marginBottom:10px">
      <div style="width:90px; fontSize:18; bold:true; color:#C2185B; textAlignment:right; paddingRight:6px">'42%'</div>
      <div style="width:500px; paddingLeft:12px; fontSize:11">'人才结构:技术研发人员占比42%，硕士以上学历占35%'</div>
    </div>
    <div style="display:flex; marginBottom:10px">
      <div style="width:90px; fontSize:18; bold:true; color:#C2185B; textAlignment:right; paddingRight:6px">'92%'</div>
      <div style="width:500px; paddingLeft:12px; fontSize:11">'客户质量:服务15家上市公司，客户续约率92%，大客户满意度4.8/5.0'</div>
    </div>
    <div style="display:flex; marginBottom:10px">
      <div style="width:90px; fontSize:18; bold:true; color:#C2185B; textAlignment:right; paddingRight:6px">'38%'</div>
      <div style="width:500px; paddingLeft:12px; fontSize:11">'资产质量:资产负债率维持在38%左右，流动比率2.8，偿债能力良好'</div>
    </div>
  </div>

  <div style="marginBottom:18px">
    <h2 style="fontSize:13; color:#AD1457; bold:true; marginBottom:12px">'双维对比雷达图'</h2>
    <div style="display:flex; justifyContent:space-between">
      <svg style="width:380px;height:400px">${svg}</svg>
      <div style="width:300px; border:1px solid #E91E63; borderRadius:6px; padding:12px">
        <h3 style="fontSize:12; color:#AD1457; bold:true; marginBottom:8px">'评级指标说明'</h3>
        <div style="fontSize:10; marginBottom:6px">
          <span style="color:#C2185B; bold:true">'● 财务状况(90分): '</span>
          '营收稳定增长'
        </div>
        <div style="fontSize:10; marginBottom:6px">
          <span style="color:#2ecc71; bold:true">'● 经营能力(95分): '</span>
          '客户留存率高'
        </div>
        <div style="fontSize:10; marginBottom:6px">
          <span style="color:#e74c3c; bold:true">'● 偿债能力(85分): '</span>
          '负债率合理'
        </div>
        <div style="fontSize:10; marginBottom:6px">
          <span style="color:#f39c12; bold:true">'● 发展潜力(92分): '</span>
          '研发投入增加'
        </div>
      </div>
    </div>
  </div>

  <div style="marginBottom:18px; borderLeft:6px solid #E91E63; paddingLeft:14px">
    <h2 style="fontSize:13; color:#880E4F; bold:true; marginBottom:8px">'综合评价'</h2>
    <p style="fontSize:11; textAlignment:left; marginBottom:8px">
      '四川省泡海椒科技有限公司作为国家级高新技术企业和专精特新"小巨人"企业，在云计算和大数据领域表现出色。'
      '公司财务状况健康，经营能力突出，技术创新能力强，具备良好的发展潜力。信用评级为AAA级，展望稳定。'
    </p>
    <p style="fontSize:8; color:#d32f2f; textAlignment:right">'认证通过'</p>
  </div>

  <div style="textAlignment:center; marginTop:20px">
    <lineSeparator style="strokeColor:#C2185B"></lineSeparator>
    <p style="fontSize:9; color:#6c757d; textAlignment:center; marginTop:8px">'本报告依据公开信息和专业评估模型生成，仅供参考 | 报告生成时间: 2025年09月06日'</p>
    <p style="fontSize:9; color:#6c757d; textAlignment:center">'© 2023 企业信用评估中心 版权所有 | 认证编号: CE-2023-001'</p>
  </div>
</body>
</pdf>

Step 2 — the Java class

jquick-pdfx/src/test/java/com/github/paohaijiao/biz/report/JQuickCreditReport06DoubleRadarTest.java

/*
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
 * Copyright (c) [2025-2099] Martin (goudingcheng@gmail.com)
 */
package com.github.paohaijiao.biz.report;

import com.github.paohaijiao.JOption;
import com.github.paohaijiao.combol.JDoubleRadarChartData;
import com.github.paohaijiao.config.JPdfConfig;
import com.github.paohaijiao.demo.constant.JQuickConstant;
import com.github.paohaijiao.enums.JChartType;
import com.github.paohaijiao.executor.JQuickPdfFactory;
import com.github.paohaijiao.factory.JChartRendererFactory;
import org.junit.Test;

import java.awt.Color;
import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.util.Arrays;

/**
 * 统一信用报告 —— 风格 06：双维对比雷达图（玫红）
 *
 * <p>以 {@code report/credit_report_06_double_radar.txt} 为模板，把双雷达图渲染成 SVG 后
 * 绑定到模板中的 {@code ${svg}} 占位符，输出到 {@code D:\test\creditreport\06_double_radar.pdf}。</p>
 *
 * @author Martin
 * @version 1.0.0
 */
public class JQuickCreditReport06DoubleRadarTest {

    public static final String path = JQuickConstant.path;

    @Test
    public void report06DoubleRadar() throws IOException {
        JDoubleRadarChartData chartData = new JDoubleRadarChartData();
        chartData.setWidth(900);
        chartData.setHeight(500);
        chartData.setTitleText("双维对比雷达图");
        chartData.setSubtitleText("本期与同业均值对比");
        chartData.setLeftTitle("本期评分");
        chartData.setRightTitle("同业均值");
        chartData.setDimensions(Arrays.asList("偿债能力", "盈利能力", "运营能力", "成长能力", "现金流"));
        JDoubleRadarChartData.RadarData leftRadar = new JDoubleRadarChartData.RadarData();
        JDoubleRadarChartData.Series leftSeries = new JDoubleRadarChartData.Series();
        leftSeries.setName("本期");
        leftSeries.setValues(Arrays.asList(88.0, 92.0, 85.0, 95.0, 80.0));
        leftSeries.setColor(new Color(194, 24, 91));
        leftRadar.setSeriesList(Arrays.asList(leftSeries));
        chartData.setLeftRadar(leftRadar);
        JDoubleRadarChartData.RadarData rightRadar = new JDoubleRadarChartData.RadarData();
        JDoubleRadarChartData.Series rightSeries = new JDoubleRadarChartData.Series();
        rightSeries.setName("同业");
        rightSeries.setValues(Arrays.asList(78.0, 80.0, 76.0, 82.0, 74.0));
        rightSeries.setColor(new Color(233, 30, 99));
        rightRadar.setSeriesList(Arrays.asList(rightSeries));
        chartData.setRightRadar(rightRadar);
        chartData.setGridLevels(4);
        chartData.setFillAlpha(70);
        chartData.setLineWidth(2.0f);
        chartData.setShowDataPoints(true);
        chartData.setLegendAtTop(false);
        chartData.setShowLegendSide(true);
        chartData.setFooterText("数据来源：企业信用评估中心");
        JOption option = new JOption();
        option.setData(chartData);

        String svg = JChartRendererFactory.renderChart(JChartType.DoubleRadar, option);

        File dir = new File(path + "creditreport");
        if (!dir.exists()) {
            dir.mkdirs();
        }
        FileOutputStream fileOutputStream = new FileOutputStream(path + "creditreport/06_double_radar.pdf");
        JPdfConfig config = new JPdfConfig();
        // 开启 flex 行布局：图表与其右侧的指标说明面板在宽度允许时并排，而不是换行堆叠。
        config.getLayoutConfig().setFlexLayout(true);
        JQuickPdfFactory factory = new JQuickPdfFactory(config);
        factory.bind("svg", svg);
        byte[] bytes = factory.executeResource("report/credit_report_06_double_radar.txt");
        fileOutputStream.write(bytes);
        fileOutputStream.close();
    }
}

Step 3 — run it

The class is a JUnit test, so run it with Maven:

mvn -pl jquick-pdfx test -Dtest=JQuickCreditReport06DoubleRadarTest

…or call the test method from a main wrapper if you want a plain entry point:

public static void main(String[] args) throws Exception {
    new JQuickCreditReport06DoubleRadarTest().report06DoubleRadar();
}

Output: 06_double_radar.pdf

How it works

Binding a chart SVG into the template

Declare only the width on <svg>; the height is derived from the chart's aspect ratio, so the chart never stretches vertically.
Open config.getLayoutConfig().setFlexLayout(true) if the template centers the chart with display:flex.
Bind the SVG string with factory.bind("svg", svg) — bind() is pure data injection and never re-parses markup.

String svg = JChartRendererFactory.renderChart(JChartType.LINE, option);
JQuickPdfFactory factory = new JQuickPdfFactory(config);
factory.bind("svg", svg);
byte[] bytes = factory.executeResource(TEMPLATE);

Flex layout: what it does and does not do

Enable flex on JPdfConfig before creating the factory.
Use fixed px widths that sum to less than the text width (~483px on A4 with 40pt margins).
Nested div two-column layouts are unreliable here — a full-width single column is safer.

JPdfConfig config = new JPdfConfig();
config.getLayoutConfig().setFlexLayout(true);

Template syntax cheat sheet

Syntax	Meaning
`// comment`	Line comment. Keep `<!-- ... -->` comments short — long ones can blank the render.
`<p style="fontSize:9pt; bold:true">`	Inline styles use camelCase keys, CSS-like values.
`<lineSeparator style="color:#2E5B8A; thickness:1.5f">`	Horizontal rule with colour and thickness.
`<list style="listStyleType:decimal"><li>`	Ordered or unordered list items.
`<td style="padding:4px; border:1px solid #C3CDD8">`	Cell styling. A `<td>` holds text only — no nested blocks.

Gotchas worth remembering

setFontSize takes a float (8.5f); setMargins takes List<Integer>.
The footer format accepts exactly one %d.
Keep  comments short — long ones can silently blank the render.
Use the full-width ￥, not ¥, or the character may render as ?.

Output

Wrap up

You now have a template file, a Java class and a PDF — all three reproducible from a clean clone. Swap the placeholder blocks for real data (or for real seal images) and the layout does not move.

Series navigation: ← #5 Radar Chart for a Multi-Dimensional Borrower Profile　·　#7 Donut Chart for Revenue Structure by Business Line →

Full index: README.md　·　Source: jquick-pdf

Appendix — files in this demo

Role	Path
Java class	`jquick-pdfx/src/test/java/com/github/paohaijiao/biz/report/JQuickCreditReport06DoubleRadarTest.java`
Template	`jquick-pdfx/src/test/resources/report/credit_report_06_double_radar.txt`
Output PDF	`06_double_radar.pdf`
Preview image	`images/06.png`

Radar Chart for a Multi-Dimensional Borrower Profile

paohaijiao — Wed, 28 Oct 2026 13:02:44 +0000

Radar Chart for a Multi-Dimensional Borrower Profile

jquick-pdf by example — demo #5 of 184. Every article in this series ships one complete, runnable demo: a template file and a Java class. No snippets, no omissions.

Six axes — leverage, liquidity, profitability, cash flow, governance, and history — on one radar.

What you'll build

A PDF written to D:/test/creditreport/05_radar.pdf
A template file (report/credit_report_05_radar.txt) with 1 bound placeholder
A detail grid of 10 rows × 6 columns, laid out with width:100% so it fills the text area
One self-contained Java class (JQuickCreditReport05RadarTest) that binds the data and renders the file

Bound placeholders

${svg}

Prerequisites

Java 8+ and one dependency — jquick-pdf is built on Apache PDFBox, not iText:

<dependency>
    <groupId>io.github.paohaijiao</groupId>
    <artifactId>jquick-pdfx</artifactId>
    <version>4.2.0</version>
</dependency>

Coordinates: io.github.paohaijiao:jquick-pdfx:4.2.0.

Step 1 — the template file

JPdfX is jquick-pdf's HTML-like template language. It lives in its own file (src/test/resources/report/credit_report_05_radar.txt) instead of a Java string, so designers can edit it without touching code.

<pdf>
<body>
  <div style="display:flex; marginBottom:18px">
    <div style="width:240px; height:96px; backgroundColor:#4A148C; borderRadius:6px; textAlignment:center; verticalAlignment:center">
      <h1 style="textAlignment:center; color:white; fontSize:18; margin:0">'企业信用评级报告'</h1>
    </div>
    <div style="width:380px; paddingLeft:16px">
      <p style="fontSize:10; color:#4A148C; margin:3px 0">'报告编号: CR-2023-08975'</p>
      <p style="fontSize:10; color:#4A148C; margin:3px 0">'评估日期: 2023年11月15日'</p>
      <p style="fontSize:10; color:#4A148C; margin:3px 0">'评估机构: 四川省企业信用评估中心'</p>
    </div>
  </div>

  <div style="marginBottom:18px">
    <h2 style="color:#4A148C; fontSize:14; marginBottom:8px">'四川省泡海椒科技有限公司'</h2>
    <table style="width:620px; fontSize:10">
      <tr>
        <th style="backgroundColor:#4A148C; color:white; padding:5px; textAlign:left">'项目'</th>
        <th style="backgroundColor:#4A148C; color:white; padding:5px; textAlign:left">'内容'</th>
        <th style="backgroundColor:#4A148C; color:white; padding:5px; textAlign:left">'项目'</th>
        <th style="backgroundColor:#4A148C; color:white; padding:5px; textAlign:left">'内容'</th>
      </tr>
      <tr>
        <td style="backgroundColor:#f3e5f5; padding:5px; textAlign:left; bold:true">'统一信用代码'</td>
        <td style="padding:5px;">'91110108MA01XX1234'</td>
        <td style="backgroundColor:#f3e5f5; padding:5px; textAlign:left; bold:true">'成立日期'</td>
        <td style="padding:5px;">'2018年5月20日'</td>
      </tr>
      <tr>
        <td style="backgroundColor:#f3e5f5; padding:5px; textAlign:left; bold:true">'注册资本'</td>
        <td style="padding:5px;">'1000万元人民币'</td>
        <td style="backgroundColor:#f3e5f5; padding:5px; textAlign:left; bold:true">'法定代表人'</td>
        <td style="padding:5px;">'泡海椒'</td>
      </tr>
      <tr>
        <td style="backgroundColor:#f3e5f5; padding:5px; textAlign:left; bold:true">'所属行业'</td>
        <td style="padding:5px;">'软件和信息技术服务业'</td>
        <td style="backgroundColor:#f3e5f5; padding:5px; textAlign:left; bold:true">'企业规模'</td>
        <td style="padding:5px;">'中型（150-200人）'</td>
      </tr>
    </table>
  </div>

  <div style="marginBottom:18px">
    <h2 style="color:#7B1FA2; borderBottom:1px solid #7B1FA2; paddingBottom:4px; fontSize:13; marginBottom:10px">'历年财务数据（单位：万元）'</h2>
    <table style="width:620px; fontSize:10; marginTop:8px">
      <tr>
        <th style="backgroundColor:#7B1FA2; color:white; padding:6px; textAlign:left">'财务指标'</th>
        <th style="backgroundColor:#7B1FA2; color:white; padding:6px; textAlign:right">'2020年'</th>
        <th style="backgroundColor:#7B1FA2; color:white; padding:6px; textAlign:right">'2021年'</th>
        <th style="backgroundColor:#7B1FA2; color:white; padding:6px; textAlign:right">'2022年'</th>
        <th style="backgroundColor:#7B1FA2; color:white; padding:6px; textAlign:right">'2023年'</th>
        <th style="backgroundColor:#7B1FA2; color:white; padding:6px; textAlign:right">'增长率'</th>
      </tr>
      <tr>
        <td style="backgroundColor:#f3e5f5; padding:5px; textAlign:left; bold:true">'营业收入'</td>
        <td style="padding:5px; textAlign:right">'8,560'</td>
        <td style="padding:5px; textAlign:right">'12,340'</td>
        <td style="padding:5px; textAlign:right">'18,920'</td>
        <td style="padding:5px; textAlign:right">'25,680'</td>
        <td style="padding:5px; textAlign:right; color:#7B1FA2; bold:true">'+44.2%'</td>
      </tr>
      <tr>
        <td style="backgroundColor:#f3e5f5; padding:5px; textAlign:left; bold:true">'净利润'</td>
        <td style="padding:5px; textAlign:right">'1,240'</td>
        <td style="padding:5px; textAlign:right">'2,150'</td>
        <td style="padding:5px; textAlign:right">'3,890'</td>
        <td style="padding:5px; textAlign:right">'5,420'</td>
        <td style="padding:5px; textAlign:right; color:#7B1FA2; bold:true">'+63.8%'</td>
      </tr>
      <tr>
        <td style="backgroundColor:#f3e5f5; padding:5px; textAlign:left; bold:true">'总资产'</td>
        <td style="padding:5px; textAlign:right">'15,800'</td>
        <td style="padding:5px; textAlign:right">'22,450'</td>
        <td style="padding:5px; textAlign:right">'31,200'</td>
        <td style="padding:5px; textAlign:right">'42,800'</td>
        <td style="padding:5px; textAlign:right; color:#7B1FA2; bold:true">'+39.5%'</td>
      </tr>
      <tr>
        <td style="backgroundColor:#f3e5f5; padding:5px; textAlign:left; bold:true">'净资产'</td>
        <td style="padding:5px; textAlign:right">'9,200'</td>
        <td style="padding:5px; textAlign:right">'13,800'</td>
        <td style="padding:5px; textAlign:right">'19,500'</td>
        <td style="padding:5px; textAlign:right">'26,400'</td>
        <td style="padding:5px; textAlign:right; color:#7B1FA2; bold:true">'+42.1%'</td>
      </tr>
      <tr>
        <td style="backgroundColor:#f3e5f5; padding:5px; textAlign:left; borderTop:2px solid #7B1FA2; bold:true">'毛利率'</td>
        <td style="padding:5px; textAlign:right; borderTop:2px solid #7B1FA2; bold:true">'42.5%'</td>
        <td style="padding:5px; textAlign:right; borderTop:2px solid #7B1FA2; bold:true">'45.8%'</td>
        <td style="padding:5px; textAlign:right; borderTop:2px solid #7B1FA2; bold:true">'48.2%'</td>
        <td style="padding:5px; textAlign:right; borderTop:2px solid #7B1FA2; bold:true">'51.6%'</td>
        <td style="padding:5px; textAlign:right; borderTop:2px solid #7B1FA2; color:#7B1FA2; bold:true">'+9.1%'</td>
      </tr>
    </table>
  </div>

  <div style="marginBottom:18px">
    <h2 style="color:#7B1FA2; borderBottom:1px solid #7B1FA2; paddingBottom:4px; fontSize:13; marginBottom:10px">'关键经营指标'</h2>
    <div style="display:flex; marginBottom:10px">
      <div style="width:24px; paddingTop:4px">
        <div style="width:12px; height:12px; borderRadius:6px; backgroundColor:#9C27B0"></div>
      </div>
      <p style="width:570px; fontSize:11; margin:0">'营收增长率:连续三年保持40%以上增长，2023年达到25,680万元'</p>
    </div>
    <div style="display:flex; marginBottom:10px">
      <div style="width:24px; paddingTop:4px">
        <div style="width:12px; height:12px; borderRadius:6px; backgroundColor:#9C27B0"></div>
      </div>
      <p style="width:570px; fontSize:11; margin:0">'利润率提升:净利率从14.5%提升至21.1%，盈利能力显著增强'</p>
    </div>
    <div style="display:flex; marginBottom:10px">
      <div style="width:24px; paddingTop:4px">
        <div style="width:12px; height:12px; borderRadius:6px; backgroundColor:#9C27B0"></div>
      </div>
      <p style="width:570px; fontSize:11; margin:0">'研发投入:研发费用年均增长38.9%，占营收比例达13.3%'</p>
    </div>
    <div style="display:flex; marginBottom:10px">
      <div style="width:24px; paddingTop:4px">
        <div style="width:12px; height:12px; borderRadius:6px; backgroundColor:#9C27B0"></div>
      </div>
      <p style="width:570px; fontSize:11; margin:0">'人才结构:技术研发人员占比42%，硕士以上学历占35%'</p>
    </div>
    <div style="display:flex; marginBottom:10px">
      <div style="width:24px; paddingTop:4px">
        <div style="width:12px; height:12px; borderRadius:6px; backgroundColor:#9C27B0"></div>
      </div>
      <p style="width:570px; fontSize:11; margin:0">'客户质量:服务15家上市公司，客户续约率92%，大客户满意度4.8/5.0'</p>
    </div>
    <div style="display:flex; marginBottom:10px">
      <div style="width:24px; paddingTop:4px">
        <div style="width:12px; height:12px; borderRadius:6px; backgroundColor:#9C27B0"></div>
      </div>
      <p style="width:570px; fontSize:11; margin:0">'资产质量:资产负债率维持在38%左右，流动比率2.8，偿债能力良好'</p>
    </div>
  </div>

  <div style="marginBottom:18px">
    <h2 style="color:#7B1FA2; borderBottom:1px solid #7B1FA2; paddingBottom:4px; fontSize:13; marginBottom:10px">'信用评级多维雷达图'</h2>
    <div style="display:flex; justifyContent:center">
      <svg style="width:480px;height:400px">${svg}</svg>
    </div>
    <div style="display:flex; justifyContent:center; marginTop:10px">
      <p style="width:150px; fontSize:10; color:#7B1FA2; margin:0">'财务状况(90分): 营收稳定增长'</p>
      <p style="width:150px; fontSize:10; color:#7B1FA2; margin:0">'经营能力(95分): 客户留存率高'</p>
      <p style="width:150px; fontSize:10; color:#7B1FA2; margin:0">'偿债能力(85分): 负债率合理'</p>
      <p style="width:150px; fontSize:10; color:#7B1FA2; margin:0">'发展潜力(92分): 研发投入增加'</p>
    </div>
  </div>

  <div style="marginBottom:18px; background:linear-gradient(135deg, #f3e5f5 0%, #e1bee7 100%); borderRadius:10px; padding:16px">
    <h2 style="color:#4A148C; margin-top:0; fontSize:13; marginBottom:8px">'综合评价'</h2>
    <p style="fontSize:11; margin:0">
      '四川省泡海椒科技有限公司作为国家级高新技术企业和专精特新"小巨人"企业，在云计算和大数据领域表现出色。'
      '公司财务状况健康，经营能力突出，技术创新能力强，具备良好的发展潜力。信用评级为AAA级，展望稳定。'
    </p>
  </div>

  <div style="textAlignment:left; marginTop:18px; paddingTop:10px; borderTop:1px solid #e1bee7; color:#6a1b9a; fontSize:9">
    <p>'本报告依据公开信息和专业评估模型生成，仅供参考 | 报告生成时间: 2025年09月06日'</p>
    <p>'© 2023 企业信用评估中心 版权所有 | 认证编号: CE-2023-001'</p>
  </div>
</body>
</pdf>

Step 2 — the Java class

jquick-pdfx/src/test/java/com/github/paohaijiao/biz/report/JQuickCreditReport05RadarTest.java

/*
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
 * Copyright (c) [2025-2099] Martin (goudingcheng@gmail.com)
 */
package com.github.paohaijiao.biz.report;

import com.github.paohaijiao.JOption;
import com.github.paohaijiao.JRadar;
import com.github.paohaijiao.code.JSeriesType;
import com.github.paohaijiao.code.JTrigger;
import com.github.paohaijiao.config.JPdfConfig;
import com.github.paohaijiao.demo.constant.JQuickConstant;
import com.github.paohaijiao.enums.JChartType;
import com.github.paohaijiao.executor.JQuickPdfFactory;
import com.github.paohaijiao.factory.JChartRendererFactory;
import com.github.paohaijiao.series.JRadarSeries;
import org.junit.Test;

import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;

/**
 * 统一信用报告 —— 风格 05：雷达图（紫色）
 *
 * <p>以 {@code report/credit_report_05_radar.txt} 为模板，把雷达图渲染成 SVG 后
 * 绑定到模板中的 {@code ${svg}} 占位符，输出到 {@code D:\test\creditreport\05_radar.pdf}。</p>
 *
 * @author Martin
 * @version 1.0.0
 */
public class JQuickCreditReport05RadarTest {

    public static final String path = JQuickConstant.path;

    @Test
    public void report05Radar() throws IOException {
        JOption option = new JOption();
        option.title().text("信用评级多维评估").subtext("各维度得分（满分100）");
        option.tooltip().trigger(JTrigger.item);
        JRadar radar = new JRadar();
        radar.indicator(
                new JRadar.Indicator().name("偿债能力").max(100),
                new JRadar.Indicator().name("盈利能力").max(100),
                new JRadar.Indicator().name("运营能力").max(100),
                new JRadar.Indicator().name("成长能力").max(100),
                new JRadar.Indicator().name("现金流").max(100),
                new JRadar.Indicator().name("信用历史").max(100)
        );
        option.radar(radar);
        JRadarSeries current = new JRadarSeries();
        current.name("本期评分").type(JSeriesType.radar).data(88, 92, 85, 95, 80, 90);
        JRadarSeries last = new JRadarSeries();
        last.name("上期评分").type(JSeriesType.radar).data(82, 85, 80, 88, 76, 86);
        option.series(current, last);

        String svg = JChartRendererFactory.renderChart(JChartType.RADAR, option);

        File dir = new File(path + "creditreport");
        if (!dir.exists()) {
            dir.mkdirs();
        }
        FileOutputStream fileOutputStream = new FileOutputStream(path + "creditreport/05_radar.pdf");
        JPdfConfig config = new JPdfConfig();
        // 开启 flex 行布局：图表与其右侧的指标说明面板在宽度允许时并排，而不是换行堆叠。
        config.getLayoutConfig().setFlexLayout(true);
        JQuickPdfFactory factory = new JQuickPdfFactory(config);
        factory.bind("svg", svg);
        byte[] bytes = factory.executeResource("report/credit_report_05_radar.txt");
        fileOutputStream.write(bytes);
        fileOutputStream.close();
    }
}

Step 3 — run it

The class is a JUnit test, so run it with Maven:

mvn -pl jquick-pdfx test -Dtest=JQuickCreditReport05RadarTest

…or call the test method from a main wrapper if you want a plain entry point:

public static void main(String[] args) throws Exception {
    new JQuickCreditReport05RadarTest().report05Radar();
}

Output: D:/test/creditreport/05_radar.pdf

How it works

Binding a chart SVG into the template

Declare only the width on <svg>; the height is derived from the chart's aspect ratio, so the chart never stretches vertically.
Open config.getLayoutConfig().setFlexLayout(true) if the template centers the chart with display:flex.
Bind the SVG string with factory.bind("svg", svg) — bind() is pure data injection and never re-parses markup.

String svg = JChartRendererFactory.renderChart(JChartType.LINE, option);
JQuickPdfFactory factory = new JQuickPdfFactory(config);
factory.bind("svg", svg);
byte[] bytes = factory.executeResource(TEMPLATE);

Making the table fill the text area

Set width:100% on <table> and give explicit widths only to the leading columns.
Label columns need around 100px so labels like Taxpayer ID do not wrap.
Leave the last column without a width so it absorbs rounding remainder.

<table style="width:100%; fontSize:9pt">
  <tr>
    <td style="width:100px; padding:5px">'Taxpayer ID'</td>
    <td style="padding:5px">${taxNo}</td>
  </tr>
</table>

Template syntax cheat sheet

Syntax	Meaning
`${var}`	An expression. It must sit outside the quotes: `'No: '${docNo}`.
`<table style="width:100%">`	Spans the full text area; give explicit widths only to the leading columns.
`<areaBreak></areaBreak>`	Force the next block onto a fresh page (CSS page-break is not supported).
`<image src='D:/.../x.png'>`	Embed an image. `src` is a raw path — it is not evaluated as an expression.
`<svg style="width:479pt">${svg}</svg>`	Embed a vector chart produced by `JChartRendererFactory`.

Gotchas worth remembering

${var} must sit outside single quotes — 'No: ${docNo}' prints the placeholder literally.
<image src="..."> never evaluates ${...}; write a literal path.
A <td> holds text only — nested <p>, <image> or <table> is dropped.
There is no colspan; emit one <td> per column and use '—' as filler.

Output

Wrap up

You now have a template file, a Java class and a PDF — all three reproducible from a clean clone. Swap the placeholder blocks for real data (or for real seal images) and the layout does not move.

Series navigation: ← #4 Pie Chart: Breaking Down the Credit Rating Composition　·　#6 Comparing Two Scoring Models with a Double Radar Chart →

Full index: README.md　·　Source: jquick-pdf

Appendix — files in this demo

Role	Path
Java class	`jquick-pdfx/src/test/java/com/github/paohaijiao/biz/report/JQuickCreditReport05RadarTest.java`
Template	`jquick-pdfx/src/test/resources/report/credit_report_05_radar.txt`
Output PDF	`D:/test/creditreport/05_radar.pdf`
Preview image	`images/05.png`

Pie Chart: Breaking Down the Credit Rating Composition

paohaijiao — Mon, 26 Oct 2026 11:13:45 +0000

jquick-pdf by example — demo #4 of 184. Every article in this series ships one complete, runnable demo: a template file and a Java class. No snippets, no omissions.

A single-page exhibit for the board showing how the rating book splits across five grades.

What you'll build

A PDF written to 04_pie.pdf
A template file (report/credit_report_04_pie.txt) with 1 bound placeholder
A detail grid of 6 rows × 6 columns, laid out with width:100% so it fills the text area
One self-contained Java class (JQuickCreditReport04PieTest) that binds the data and renders the file

Bound placeholders

${svg}

Prerequisites

Java 8+ and one dependency — jquick-pdf is built on Apache PDFBox, not iText:

<dependency>
    <groupId>io.github.paohaijiao</groupId>
    <artifactId>jquick-pdfx</artifactId>
    <version>4.2.0</version>
</dependency>

Coordinates: io.github.paohaijiao:jquick-pdfx:4.2.0.

Step 1 — the template file

JPdfX is jquick-pdf's HTML-like template language. It lives in its own file (src/test/resources/report/credit_report_04_pie.txt) instead of a Java string, so designers can edit it without touching code.

<pdf>
<body>
  <div style="height:8px; backgroundColor:#E65100; borderRadius:4px; marginBottom:10px"></div>
  <div style="textAlignment:center; marginBottom:18px">
    <h1 style="textAlignment:center; fontSize:22; color:#E65100; marginBottom:6px">'企业信用评级报告'</h1>
    <p style="textAlignment:center; fontSize:10; color:#8d6e63; margin:2px">'报告编号: CR-2023-08975 | 评估日期: 2023年11月15日'</p>
    <p style="textAlignment:center; fontSize:10; color:#8d6e63; margin:2px">'评估机构: 四川省企业信用评估中心'</p>
  </div>

  <div style="marginBottom:18px">
    <h2 style="color:#E65100; fontSize:14; marginBottom:8px">'四川省泡海椒科技有限公司'</h2>
    <div style="display:flex; marginBottom:6px">
      <div style="width:150px; color:#E65100; bold:true; fontSize:10">'统一信用代码'</div>
      <p style="width:450px; fontSize:11; margin:0">'91110108MA01XX1234'</p>
    </div>
    <div style="display:flex; marginBottom:6px">
      <div style="width:150px; color:#E65100; bold:true; fontSize:10">'成立日期'</div>
      <p style="width:450px; fontSize:11; margin:0">'2018年5月20日'</p>
    </div>
    <div style="display:flex; marginBottom:6px">
      <div style="width:150px; color:#E65100; bold:true; fontSize:10">'注册资本'</div>
      <p style="width:450px; fontSize:11; margin:0">'1000万元人民币'</p>
    </div>
    <div style="display:flex; marginBottom:6px">
      <div style="width:150px; color:#E65100; bold:true; fontSize:10">'法定代表人'</div>
      <p style="width:450px; fontSize:11; margin:0">'泡海椒'</p>
    </div>
    <div style="display:flex; marginBottom:6px">
      <div style="width:150px; color:#E65100; bold:true; fontSize:10">'所属行业'</div>
      <p style="width:450px; fontSize:11; margin:0">'软件和信息技术服务业'</p>
    </div>
    <div style="display:flex; marginBottom:6px">
      <div style="width:150px; color:#E65100; bold:true; fontSize:10">'企业规模'</div>
      <p style="width:450px; fontSize:11; margin:0">'中型（150-200人）'</p>
    </div>
  </div>

  <div style="marginBottom:18px">
    <h2 style="color:#E65100; fontSize:13; marginBottom:10px">'历年财务数据（单位：万元）'</h2>
    <table style="width:620px; fontSize:10; marginTop:8px">
      <tr>
        <th style="backgroundColor:#F57C00; color:white; borderRadius:10px; padding:5px; border:1px solid #ffffff; textAlign:left">'财务指标'</th>
        <th style="backgroundColor:#F57C00; color:white; borderRadius:10px; padding:5px; border:1px solid #ffffff; textAlign:right">'2020年'</th>
        <th style="backgroundColor:#F57C00; color:white; borderRadius:10px; padding:5px; border:1px solid #ffffff; textAlign:right">'2021年'</th>
        <th style="backgroundColor:#F57C00; color:white; borderRadius:10px; padding:5px; border:1px solid #ffffff; textAlign:right">'2022年'</th>
        <th style="backgroundColor:#F57C00; color:white; borderRadius:10px; padding:5px; border:1px solid #ffffff; textAlign:right">'2023年'</th>
        <th style="backgroundColor:#F57C00; color:white; borderRadius:10px; padding:5px; border:1px solid #ffffff; textAlign:right">'增长率'</th>
      </tr>
      <tr>
        <td style="backgroundColor:#ffffff; padding:5px; textAlign:left; bold:true">'营业收入'</td>
        <td style="backgroundColor:#ffffff; padding:5px; textAlign:right">'8,560'</td>
        <td style="backgroundColor:#ffffff; padding:5px; textAlign:right">'12,340'</td>
        <td style="backgroundColor:#ffffff; padding:5px; textAlign:right">'18,920'</td>
        <td style="backgroundColor:#ffffff; padding:5px; textAlign:right">'25,680'</td>
        <td style="backgroundColor:#ffffff; padding:5px; textAlign:right; color:#E65100; bold:true">'+44.2%'</td>
      </tr>
      <tr>
        <td style="backgroundColor:#fff8f0; padding:5px; textAlign:left; bold:true">'净利润'</td>
        <td style="backgroundColor:#fff8f0; padding:5px; textAlign:right">'1,240'</td>
        <td style="backgroundColor:#fff8f0; padding:5px; textAlign:right">'2,150'</td>
        <td style="backgroundColor:#fff8f0; padding:5px; textAlign:right">'3,890'</td>
        <td style="backgroundColor:#fff8f0; padding:5px; textAlign:right">'5,420'</td>
        <td style="backgroundColor:#fff8f0; padding:5px; textAlign:right; color:#E65100; bold:true">'+63.8%'</td>
      </tr>
      <tr>
        <td style="backgroundColor:#ffffff; padding:5px; textAlign:left; bold:true">'总资产'</td>
        <td style="backgroundColor:#ffffff; padding:5px; textAlign:right">'15,800'</td>
        <td style="backgroundColor:#ffffff; padding:5px; textAlign:right">'22,450'</td>
        <td style="backgroundColor:#ffffff; padding:5px; textAlign:right">'31,200'</td>
        <td style="backgroundColor:#ffffff; padding:5px; textAlign:right">'42,800'</td>
        <td style="backgroundColor:#ffffff; padding:5px; textAlign:right; color:#E65100; bold:true">'+39.5%'</td>
      </tr>
      <tr>
        <td style="backgroundColor:#fff8f0; padding:5px; textAlign:left; bold:true">'净资产'</td>
        <td style="backgroundColor:#fff8f0; padding:5px; textAlign:right">'9,200'</td>
        <td style="backgroundColor:#fff8f0; padding:5px; textAlign:right">'13,800'</td>
        <td style="backgroundColor:#fff8f0; padding:5px; textAlign:right">'19,500'</td>
        <td style="backgroundColor:#fff8f0; padding:5px; textAlign:right">'26,400'</td>
        <td style="backgroundColor:#fff8f0; padding:5px; textAlign:right; color:#E65100; bold:true">'+42.1%'</td>
      </tr>
      <tr>
        <td style="backgroundColor:#ffffff; padding:5px; textAlign:left; bold:true">'毛利率'</td>
        <td style="backgroundColor:#ffffff; padding:5px; textAlign:right">'42.5%'</td>
        <td style="backgroundColor:#ffffff; padding:5px; textAlign:right">'45.8%'</td>
        <td style="backgroundColor:#ffffff; padding:5px; textAlign:right">'48.2%'</td>
        <td style="backgroundColor:#ffffff; padding:5px; textAlign:right">'51.6%'</td>
        <td style="backgroundColor:#ffffff; padding:5px; textAlign:right; color:#E65100; bold:true">'+9.1%'</td>
      </tr>
    </table>
  </div>

  <div style="marginBottom:18px">
    <h2 style="color:#E65100; fontSize:13; marginBottom:10px">'关键经营指标'</h2>
    <div style="display:flex; marginBottom:8px">
      <div style="width:26px; height:26px; borderRadius:13px; backgroundColor:#F57C00; color:white; textAlignment:center; verticalAlignment:center; fontSize:11; bold:true">'01'</div>
      <p style="width:560px; fontSize:11; margin:0">'营收增长率:连续三年保持40%以上增长，2023年达到25,680万元'</p>
    </div>
    <div style="display:flex; marginBottom:8px">
      <div style="width:26px; height:26px; borderRadius:13px; backgroundColor:#F57C00; color:white; textAlignment:center; verticalAlignment:center; fontSize:11; bold:true">'02'</div>
      <p style="width:560px; fontSize:11; margin:0">'利润率提升:净利率从14.5%提升至21.1%，盈利能力显著增强'</p>
    </div>
    <div style="display:flex; marginBottom:8px">
      <div style="width:26px; height:26px; borderRadius:13px; backgroundColor:#F57C00; color:white; textAlignment:center; verticalAlignment:center; fontSize:11; bold:true">'03'</div>
      <p style="width:560px; fontSize:11; margin:0">'研发投入:研发费用年均增长38.9%，占营收比例达13.3%'</p>
    </div>
    <div style="display:flex; marginBottom:8px">
      <div style="width:26px; height:26px; borderRadius:13px; backgroundColor:#F57C00; color:white; textAlignment:center; verticalAlignment:center; fontSize:11; bold:true">'04'</div>
      <p style="width:560px; fontSize:11; margin:0">'人才结构:技术研发人员占比42%，硕士以上学历占35%'</p>
    </div>
    <div style="display:flex; marginBottom:8px">
      <div style="width:26px; height:26px; borderRadius:13px; backgroundColor:#F57C00; color:white; textAlignment:center; verticalAlignment:center; fontSize:11; bold:true">'05'</div>
      <p style="width:560px; fontSize:11; margin:0">'客户质量:服务15家上市公司，客户续约率92%，大客户满意度4.8/5.0'</p>
    </div>
    <div style="display:flex; marginBottom:8px">
      <div style="width:26px; height:26px; borderRadius:13px; backgroundColor:#F57C00; color:white; textAlignment:center; verticalAlignment:center; fontSize:11; bold:true">'06'</div>
      <p style="width:560px; fontSize:11; margin:0">'资产质量:资产负债率维持在38%左右，流动比率2.8，偿债能力良好'</p>
    </div>
  </div>

  <div style="marginBottom:18px">
    <h2 style="color:#E65100; fontSize:13; marginBottom:10px">'信用评级构成饼图'</h2>
    <div style="display:flex; justify-content:space-between; marginTop:10px">
      <svg style="width:330px;height:330px">${svg}</svg>
      <div style="width:300px; border:2px solid #FB8C00; borderRadius:8px; padding:12px">
        <h3 style="color:#E65100; margin-top:0; fontSize:12; marginBottom:8px">'评级指标说明'</h3>
        <p style="fontSize:10; color:#5d4037; margin:4px 0">'财务状况(90分): 营收稳定增长'</p>
        <p style="fontSize:10; color:#5d4037; margin:4px 0">'经营能力(95分): 客户留存率高'</p>
        <p style="fontSize:10; color:#5d4037; margin:4px 0">'偿债能力(85分): 负债率合理'</p>
        <p style="fontSize:10; color:#5d4037; margin:4px 0">'发展潜力(92分): 研发投入增加'</p>
      </div>
    </div>
  </div>

  <div style="marginBottom:18px; border:2px solid #FB8C00; borderRadius:8px; padding:14px">
    <h2 style="color:#E65100; margin-top:0; fontSize:13; marginBottom:8px">'综合评价'</h2>
    <p style="fontSize:11; margin:0">
      '四川省泡海椒科技有限公司作为国家级高新技术企业和专精特新"小巨人"企业，在云计算和大数据领域表现出色。'
      '公司财务状况健康，经营能力突出，技术创新能力强，具备良好的发展潜力。信用评级为AAA级，展望稳定。'
    </p>
  </div>

  <div style="textAlignment:center; marginTop:18px; paddingTop:10px; borderTop:1px solid #ffe0b2; color:#8d6e63; fontSize:9">
    <p>'本报告依据公开信息和专业评估模型生成，仅供参考 | 报告生成时间: 2025年09月06日'</p>
    <p>'© 2023 企业信用评估中心 版权所有 | 认证编号: CE-2023-001'</p>
  </div>
</body>
</pdf>

Step 2 — the Java class

jquick-pdfx/src/test/java/com/github/paohaijiao/biz/report/JQuickCreditReport04PieTest.java

/*
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
 * Copyright (c) [2025-2099] Martin (goudingcheng@gmail.com)
 */
package com.github.paohaijiao.biz.report;

import com.github.paohaijiao.JOption;
import com.github.paohaijiao.code.JTrigger;
import com.github.paohaijiao.config.JPdfConfig;
import com.github.paohaijiao.data.JData;
import com.github.paohaijiao.demo.constant.JQuickConstant;
import com.github.paohaijiao.enums.JChartType;
import com.github.paohaijiao.executor.JQuickPdfFactory;
import com.github.paohaijiao.factory.JChartRendererFactory;
import com.github.paohaijiao.series.JPie;
import org.junit.Test;

import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;

/**
 * 统一信用报告 —— 风格 04：饼图（橙色）
 *
 * <p>以 {@code report/credit_report_04_pie.txt} 为模板，把饼图渲染成 SVG 后
 * 绑定到模板中的 {@code ${svg}} 占位符，输出到 {@code 04_pie.pdf}。</p>
 *
 * @author Martin
 * @version 1.0.0
 */
public class JQuickCreditReport04PieTest {

    public static final String path = JQuickConstant.path;

    @Test
    public void report04Pie() throws IOException {
        JOption option = new JOption();
        option.title().text("信用评级构成").subtext("2023年度营收构成（万元）");
        option.tooltip().trigger(JTrigger.item);
        JPie pie = new JPie("营收构成");
        pie.data(
                new JData().name("软件产品").value(10270),
                new JData().name("技术服务").value(6420),
                new JData().name("云服务").value(5136),
                new JData().name("其他").value(3854)
        );
        option.series(pie);

        String svg = JChartRendererFactory.renderChart(JChartType.PIE, option);

        File dir = new File(path + "creditreport");
        if (!dir.exists()) {
            dir.mkdirs();
        }
        FileOutputStream fileOutputStream = new FileOutputStream(path + "creditreport/04_pie.pdf");
        JPdfConfig config = new JPdfConfig();
        // 开启 flex 行布局：图表与其右侧的指标说明面板在宽度允许时并排，而不是换行堆叠。
        config.getLayoutConfig().setFlexLayout(true);
        JQuickPdfFactory factory = new JQuickPdfFactory(config);
        factory.bind("svg", svg);
        byte[] bytes = factory.executeResource("report/credit_report_04_pie.txt");
        fileOutputStream.write(bytes);
        fileOutputStream.close();
    }
}

Step 3 — run it

The class is a JUnit test, so run it with Maven:

mvn -pl jquick-pdfx test -Dtest=JQuickCreditReport04PieTest

…or call the test method from a main wrapper if you want a plain entry point:

public static void main(String[] args) throws Exception {
    new JQuickCreditReport04PieTest().report04Pie();
}

Output: 04_pie.pdf

How it works

Binding a chart SVG into the template

Declare only the width on <svg>; the height is derived from the chart's aspect ratio, so the chart never stretches vertically.
Open config.getLayoutConfig().setFlexLayout(true) if the template centers the chart with display:flex.
Bind the SVG string with factory.bind("svg", svg) — bind() is pure data injection and never re-parses markup.

String svg = JChartRendererFactory.renderChart(JChartType.LINE, option);
JQuickPdfFactory factory = new JQuickPdfFactory(config);
factory.bind("svg", svg);
byte[] bytes = factory.executeResource(TEMPLATE);

CJK font configuration

Set the font once on JPdfConfig.getFontConfig() before rendering.
Chart SVG text is a separate pipeline — register the same family on JOption or chart labels fall back to Helvetica.
Prefer the full-width ￥ over ¥; the latter is often absent from CJK faces.

JPdfConfig config = new JPdfConfig();
config.getFontConfig().setDefaultFontName("Noto Sans CJK SC");

Template syntax cheat sheet

Syntax	Meaning
`<lineSeparator style="color:#2E5B8A; thickness:1.5f">`	Horizontal rule with colour and thickness.
`<list style="listStyleType:decimal"><li>`	Ordered or unordered list items.
`<td style="padding:4px; border:1px solid #C3CDD8">`	Cell styling. A `<td>` holds text only — no nested blocks.
`factory.bind("k", v)`	Injects plain text into the context; markup inside a value is dropped.
`'literal text'`	A single-quoted string is a literal — whatever is inside is printed verbatim.

Gotchas worth remembering

Keep  comments short — long ones can silently blank the render.
Use the full-width ￥, not ¥, or the character may render as ?.
Compute money with BigDecimal, round once, and derive 大写 from the rounded value.
Flex children whose fixed widths exceed the text area wrap instead of sitting side by side.

Output

Wrap up

You now have a template file, a Java class and a PDF — all three reproducible from a clean clone. Swap the placeholder blocks for real data (or for real seal images) and the layout does not move.

Series navigation: ← #3 Building an Area Chart for Credit Coverage Trends　·　#5 Radar Chart for a Multi-Dimensional Borrower Profile →

Full index: README.md　·　Source: jquick-pdf

Appendix — files in this demo

Role	Path
Java class	`jquick-pdfx/src/test/java/com/github/paohaijiao/biz/report/JQuickCreditReport04PieTest.java`
Template	`jquick-pdfx/src/test/resources/report/credit_report_04_pie.txt`
Output PDF	`04_pie.pdf`
Preview image	`images/04.png`

Building an Area Chart for Credit Coverage Trends

paohaijiao — Sun, 25 Oct 2026 10:18:01 +0000

Building an Area Chart for Credit Coverage Trends

official demo：

FORMULAS 示例页：https://www.jquick.org/jquick-pdf/

github 地址：https://github.com/paohaijiao/jquick-pdf

jquick-pdf by example — demo #3 of 184. Every article in this series ships one complete, runnable demo: a template file and a Java class. No snippets, no omissions.

An area chart makes cumulative coverage readable — the filled band shows how much of the portfolio is scored.

What you'll build

A PDF written to 03_area.pdf
A template file (report/credit_report_03_area.txt) with 1 bound placeholder
A detail grid of 6 rows × 6 columns, laid out with width:100% so it fills the text area
One self-contained Java class (JQuickCreditReport03AreaTest) that binds the data and renders the file

Bound placeholders

${svg}

Prerequisites

Java 8+ and one dependency — jquick-pdf is built on Apache PDFBox, not iText:

<dependency>
    <groupId>io.github.paohaijiao</groupId>
    <artifactId>jquick-pdfx</artifactId>
    <version>4.2.0</version>
</dependency>

Coordinates: io.github.paohaijiao:jquick-pdfx:4.2.0.

Step 1 — the template file

JPdfX is jquick-pdf's HTML-like template language. It lives in its own file (src/test/resources/report/credit_report_03_area.txt) instead of a Java string, so designers can edit it without touching code.

<pdf>
<body>
  <div style="background:linear-gradient(135deg, #283593 0%, #5C6BC0 100%); borderRadius:8px; paddings:18px; marginBottom:18px">
    <div style="display:flex; justifyContent:space-between; alignItems:center">
      <div style="width:430px">
        <h1 style="textAlignment:left; color:white; fontSize:20; margin:0">'企业信用评级报告'</h1>
        <p style="textAlignment:left; color:rgba(255,255,255,0.9); fontSize:11; marginTop:6px; marginBottom:0">'评估机构: 四川省企业信用评估中心'</p>
      </div>
      <div style="width:90px; height:90px; backgroundColor:rgba(255,255,255,0.15); borderRadius:8px; textAlignment:center; verticalAlignment:center">
        <p style="textAlignment:center; color:white; fontSize:26; bold:true; margin:0">'AAA'</p>
        <p style="textAlignment:center; color:white; fontSize:9; margin:0">'信用等级'</p>
      </div>
    </div>
    <p style="textAlignment:left; color:rgba(255,255,255,0.9); fontSize:10; marginTop:10px; marginBottom:0">'报告编号: CR-2023-08975 | 评估日期: 2023年11月15日'</p>
  </div>

  <div style="marginBottom:18px">
    <h2 style="color:#283593; fontSize:13; marginBottom:8px">'企业信息'</h2>
    <div style="display:flex; flexWrap:wrap">
      <div style="width:300px; margin:4px; padding:10px; border:1px solid #c5cae9; borderRadius:6px">
        <p style="fontSize:9; color:#3F51B5; margin:0">'统一信用代码'</p>
        <p style="fontSize:12; marginTop:3px; marginBottom:0">'91110108MA01XX1234'</p>
      </div>
      <div style="width:300px; margin:4px; padding:10px; border:1px solid #c5cae9; borderRadius:6px">
        <p style="fontSize:9; color:#3F51B5; margin:0">'成立日期'</p>
        <p style="fontSize:12; marginTop:3px; marginBottom:0">'2018年5月20日'</p>
      </div>
      <div style="width:300px; margin:4px; padding:10px; border:1px solid #c5cae9; borderRadius:6px">
        <p style="fontSize:9; color:#3F51B5; margin:0">'注册资本'</p>
        <p style="fontSize:12; marginTop:3px; marginBottom:0">'1000万元人民币'</p>
      </div>
      <div style="width:300px; margin:4px; padding:10px; border:1px solid #c5cae9; borderRadius:6px">
        <p style="fontSize:9; color:#3F51B5; margin:0">'法定代表人'</p>
        <p style="fontSize:12; marginTop:3px; marginBottom:0">'泡海椒'</p>
      </div>
      <div style="width:300px; margin:4px; padding:10px; border:1px solid #c5cae9; borderRadius:6px">
        <p style="fontSize:9; color:#3F51B5; margin:0">'所属行业'</p>
        <p style="fontSize:12; marginTop:3px; marginBottom:0">'软件和信息技术服务业'</p>
      </div>
      <div style="width:300px; margin:4px; padding:10px; border:1px solid #c5cae9; borderRadius:6px">
        <p style="fontSize:9; color:#3F51B5; margin:0">'企业规模'</p>
        <p style="fontSize:12; marginTop:3px; marginBottom:0">'中型（150-200人）'</p>
      </div>
    </div>
  </div>

  <div style="marginBottom:18px">
    <h2 style="color:#283593; borderBottom:2px solid #3F51B5; paddingBottom:4px; fontSize:13; marginBottom:10px">'历年财务数据（单位：万元）'</h2>
    <table style="width:620px; fontSize:10; marginTop:8px">
      <tr>
        <th style="backgroundColor:#3F51B5; color:white; borderBottom:1px solid #e8eaf6; padding:6px; textAlign:left">'财务指标'</th>
        <th style="backgroundColor:#3F51B5; color:white; borderBottom:1px solid #e8eaf6; padding:6px; textAlign:right">'2020年'</th>
        <th style="backgroundColor:#3F51B5; color:white; borderBottom:1px solid #e8eaf6; padding:6px; textAlign:right">'2021年'</th>
        <th style="backgroundColor:#3F51B5; color:white; borderBottom:1px solid #e8eaf6; padding:6px; textAlign:right">'2022年'</th>
        <th style="backgroundColor:#3F51B5; color:white; borderBottom:1px solid #e8eaf6; padding:6px; textAlign:right">'2023年'</th>
        <th style="backgroundColor:#3F51B5; color:white; borderBottom:1px solid #e8eaf6; padding:6px; textAlign:right">'增长率'</th>
      </tr>
      <tr>
        <td style="backgroundColor:#ffffff; padding:6px; textAlign:left; borderBottom:1px solid #e8eaf6; bold:true">'营业收入'</td>
        <td style="backgroundColor:#ffffff; padding:6px; textAlign:right; borderBottom:1px solid #e8eaf6">'8,560'</td>
        <td style="backgroundColor:#ffffff; padding:6px; textAlign:right; borderBottom:1px solid #e8eaf6">'12,340'</td>
        <td style="backgroundColor:#ffffff; padding:6px; textAlign:right; borderBottom:1px solid #e8eaf6">'18,920'</td>
        <td style="backgroundColor:#ffffff; padding:6px; textAlign:right; borderBottom:1px solid #e8eaf6">'25,680'</td>
        <td style="backgroundColor:#ffffff; padding:6px; textAlign:right; borderBottom:1px solid #e8eaf6; color:#3F51B5; bold:true">'+44.2%'</td>
      </tr>
      <tr>
        <td style="backgroundColor:#f5f6fb; padding:6px; textAlign:left; borderBottom:1px solid #e8eaf6; bold:true">'净利润'</td>
        <td style="backgroundColor:#f5f6fb; padding:6px; textAlign:right; borderBottom:1px solid #e8eaf6">'1,240'</td>
        <td style="backgroundColor:#f5f6fb; padding:6px; textAlign:right; borderBottom:1px solid #e8eaf6">'2,150'</td>
        <td style="backgroundColor:#f5f6fb; padding:6px; textAlign:right; borderBottom:1px solid #e8eaf6">'3,890'</td>
        <td style="backgroundColor:#f5f6fb; padding:6px; textAlign:right; borderBottom:1px solid #e8eaf6">'5,420'</td>
        <td style="backgroundColor:#f5f6fb; padding:6px; textAlign:right; borderBottom:1px solid #e8eaf6; color:#3F51B5; bold:true">'+63.8%'</td>
      </tr>
      <tr>
        <td style="backgroundColor:#ffffff; padding:6px; textAlign:left; borderBottom:1px solid #e8eaf6; bold:true">'总资产'</td>
        <td style="backgroundColor:#ffffff; padding:6px; textAlign:right; borderBottom:1px solid #e8eaf6">'15,800'</td>
        <td style="backgroundColor:#ffffff; padding:6px; textAlign:right; borderBottom:1px solid #e8eaf6">'22,450'</td>
        <td style="backgroundColor:#ffffff; padding:6px; textAlign:right; borderBottom:1px solid #e8eaf6">'31,200'</td>
        <td style="backgroundColor:#ffffff; padding:6px; textAlign:right; borderBottom:1px solid #e8eaf6">'42,800'</td>
        <td style="backgroundColor:#ffffff; padding:6px; textAlign:right; borderBottom:1px solid #e8eaf6; color:#3F51B5; bold:true">'+39.5%'</td>
      </tr>
      <tr>
        <td style="backgroundColor:#f5f6fb; padding:6px; textAlign:left; borderBottom:1px solid #e8eaf6; bold:true">'净资产'</td>
        <td style="backgroundColor:#f5f6fb; padding:6px; textAlign:right; borderBottom:1px solid #e8eaf6">'9,200'</td>
        <td style="backgroundColor:#f5f6fb; padding:6px; textAlign:right; borderBottom:1px solid #e8eaf6">'13,800'</td>
        <td style="backgroundColor:#f5f6fb; padding:6px; textAlign:right; borderBottom:1px solid #e8eaf6">'19,500'</td>
        <td style="backgroundColor:#f5f6fb; padding:6px; textAlign:right; borderBottom:1px solid #e8eaf6">'26,400'</td>
        <td style="backgroundColor:#f5f6fb; padding:6px; textAlign:right; borderBottom:1px solid #e8eaf6; color:#3F51B5; bold:true">'+42.1%'</td>
      </tr>
      <tr>
        <td style="backgroundColor:#ffffff; padding:6px; textAlign:left; borderBottom:1px solid #e8eaf6; bold:true">'毛利率'</td>
        <td style="backgroundColor:#ffffff; padding:6px; textAlign:right; borderBottom:1px solid #e8eaf6">'42.5%'</td>
        <td style="backgroundColor:#ffffff; padding:6px; textAlign:right; borderBottom:1px solid #e8eaf6">'45.8%'</td>
        <td style="backgroundColor:#ffffff; padding:6px; textAlign:right; borderBottom:1px solid #e8eaf6">'48.2%'</td>
        <td style="backgroundColor:#ffffff; padding:6px; textAlign:right; borderBottom:1px solid #e8eaf6">'51.6%'</td>
        <td style="backgroundColor:#ffffff; padding:6px; textAlign:right; borderBottom:1px solid #e8eaf6; color:#3F51B5; bold:true">'+9.1%'</td>
      </tr>
    </table>
  </div>

  <div style="marginBottom:18px">
    <h2 style="color:#283593; borderBottom:2px solid #3F51B5; paddingBottom:4px; fontSize:13; marginBottom:10px">'关键经营指标'</h2>
    <div style="display:flex; flexWrap:wrap">
      <div style="width:290px; margin:4px; padding:10px; border:1px solid #5C6BC0; borderRadius:6px">
        <p style="fontSize:11; bold:true; color:#283593; margin:0">'营收增长率'</p>
        <p style="fontSize:10; marginTop:3px; marginBottom:0">'连续三年保持40%以上增长，2023年达到25,680万元'</p>
      </div>
      <div style="width:290px; margin:4px; padding:10px; border:1px solid #5C6BC0; borderRadius:6px">
        <p style="fontSize:11; bold:true; color:#283593; margin:0">'利润率提升'</p>
        <p style="fontSize:10; marginTop:3px; marginBottom:0">'净利率从14.5%提升至21.1%，盈利能力显著增强'</p>
      </div>
      <div style="width:290px; margin:4px; padding:10px; border:1px solid #5C6BC0; borderRadius:6px">
        <p style="fontSize:11; bold:true; color:#283593; margin:0">'研发投入'</p>
        <p style="fontSize:10; marginTop:3px; marginBottom:0">'研发费用年均增长38.9%，占营收比例达13.3%'</p>
      </div>
      <div style="width:290px; margin:4px; padding:10px; border:1px solid #5C6BC0; borderRadius:6px">
        <p style="fontSize:11; bold:true; color:#283593; margin:0">'人才结构'</p>
        <p style="fontSize:10; marginTop:3px; marginBottom:0">'技术研发人员占比42%，硕士以上学历占35%'</p>
      </div>
      <div style="width:290px; margin:4px; padding:10px; border:1px solid #5C6BC0; borderRadius:6px">
        <p style="fontSize:11; bold:true; color:#283593; margin:0">'客户质量'</p>
        <p style="fontSize:10; marginTop:3px; marginBottom:0">'服务15家上市公司，客户续约率92%，大客户满意度4.8/5.0'</p>
      </div>
      <div style="width:290px; margin:4px; padding:10px; border:1px solid #5C6BC0; borderRadius:6px">
        <p style="fontSize:11; bold:true; color:#283593; margin:0">'资产质量'</p>
        <p style="fontSize:10; marginTop:3px; marginBottom:0">'资产负债率维持在38%左右，流动比率2.8，偿债能力良好'</p>
      </div>
    </div>
  </div>

  <div style="marginBottom:18px">
    <h2 style="color:#283593; borderBottom:2px solid #3F51B5; paddingBottom:4px; fontSize:13; marginBottom:10px">'信用评级趋势区域图'</h2>
    <div style="display:flex; justifyContent:center">
      <svg style="width:440px;height:400px">${svg}</svg>
    </div>
    <div style="display:flex; justifyContent:space-around; marginTop:10px">
      <p style="width:150px; fontSize:10; color:#3F51B5; margin:0">'财务状况(90分): 营收稳定增长'</p>
      <p style="width:150px; fontSize:10; color:#3F51B5; margin:0">'经营能力(95分): 客户留存率高'</p>
      <p style="width:150px; fontSize:10; color:#3F51B5; margin:0">'偿债能力(85分): 负债率合理'</p>
      <p style="width:150px; fontSize:10; color:#3F51B5; margin:0">'发展潜力(92分): 研发投入增加'</p>
    </div>
  </div>

  <div style="marginBottom:18px">
    <h2 style="color:#283593; fontSize:13; marginBottom:10px">'综合评价'</h2>
    <div style="display:flex; justifyContent:space-between">
      <div style="width:300px; padding:12px; backgroundColor:#e8eaf6; borderRadius:6px">
        <p style="fontSize:12; bold:true; color:#283593; margin:0">'优势'</p>
        <p style="fontSize:10; marginTop:6px; marginBottom:0">'作为国家级高新技术企业和专精特新"小巨人"企业，在云计算和大数据领域表现出色；财务状况健康，经营能力突出，技术创新能力强，具备良好的发展潜力。'</p>
      </div>
      <div style="width:300px; padding:12px; backgroundColor:#fff8e1; borderRadius:6px">
        <p style="fontSize:12; bold:true; color:#283593; margin:0">'关注事项'</p>
        <p style="fontSize:10; marginTop:6px; marginBottom:0">'信用评级为AAA级，展望稳定；建议持续关注行业竞争加剧及研发投入的产出效率。'</p>
      </div>
    </div>
  </div>

  <div style="height:1px; backgroundColor:#e8eaf6; marginTop:12px"></div>
  <div style="textAlignment:center; paddingTop:8px; paddingBottom:8px">
    <p style="fontSize:9; color:#7986cb; margin:0">'本报告依据公开信息和专业评估模型生成，仅供参考 | 报告生成时间: 2025年09月06日'</p>
    <p style="fontSize:9; color:#7986cb; margin:0">'© 2023 企业信用评估中心 版权所有 | 认证编号: CE-2023-001'</p>
  </div>
  <div style="height:1px; backgroundColor:#e8eaf6"></div>
</body>
</pdf>

Step 2 — the Java class

jquick-pdfx/src/test/java/com/github/paohaijiao/biz/report/JQuickCreditReport03AreaTest.java

/*
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
 * Copyright (c) [2025-2099] Martin (goudingcheng@gmail.com)
 */
package com.github.paohaijiao.biz.report;

import com.github.paohaijiao.JOption;
import com.github.paohaijiao.combol.area.JAreaChartData;
import com.github.paohaijiao.combol.area.JSeriesData;
import com.github.paohaijiao.combol.area.JTheme;
import com.github.paohaijiao.config.JPdfConfig;
import com.github.paohaijiao.demo.constant.JQuickConstant;
import com.github.paohaijiao.enums.JChartType;
import com.github.paohaijiao.executor.JQuickPdfFactory;
import com.github.paohaijiao.factory.JChartRendererFactory;
import org.junit.Test;

import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.util.Arrays;

/**
 * 统一信用报告 —— 风格 03：区域图（靛蓝）
 *
 * <p>以 {@code report/credit_report_03_area.txt} 为模板，把区域图渲染成 SVG 后
 * 绑定到模板中的 {@code ${svg}} 占位符，输出到 {@code D:\test\creditreport\03_area.pdf}。</p>
 *
 * @author Martin
 * @version 1.0.0
 */
public class JQuickCreditReport03AreaTest {

    public static final String path = JQuickConstant.path;

    @Test
    public void report03Area() throws IOException {
        JAreaChartData data = new JAreaChartData();
        data.setTitle("信用评级趋势");
        data.setSubtitle("2020-2023年度（单位：万元）");
        data.setXAxisTitle("年度");
        data.setYAxisTitle("金额（万元）");
        data.setLegendText("营业收入");
        data.setShowDataLabels(true);
        data.setSeriesList(Arrays.asList(new JSeriesData("营业收入", Arrays.asList(8560.0, 12340.0, 18920.0, 25680.0))));
        data.setXAxisLabels(Arrays.asList("2020年", "2021年", "2022年", "2023年"));
        data.setTheme(JTheme.DEFAULT);
        JOption option = new JOption();
        option.setData(data);

        String svg = JChartRendererFactory.renderChart(JChartType.AREA, option);

        File dir = new File(path + "creditreport");
        if (!dir.exists()) {
            dir.mkdirs();
        }
        FileOutputStream fileOutputStream = new FileOutputStream(path + "creditreport/03_area.pdf");
        JPdfConfig config = new JPdfConfig();
        // 开启 flex 行布局：图表与其右侧的指标说明面板在宽度允许时并排，而不是换行堆叠。
        config.getLayoutConfig().setFlexLayout(true);
        JQuickPdfFactory factory = new JQuickPdfFactory(config);
        factory.bind("svg", svg);
        byte[] bytes = factory.executeResource("report/credit_report_03_area.txt");
        fileOutputStream.write(bytes);
        fileOutputStream.close();
    }
}

Step 3 — run it

The class is a JUnit test, so run it with Maven:

mvn -pl jquick-pdfx test -Dtest=JQuickCreditReport03AreaTest

…or call the test method from a main wrapper if you want a plain entry point:

public static void main(String[] args) throws Exception {
    new JQuickCreditReport03AreaTest().report03Area();
}

Output: D:/test/creditreport/03_area.pdf

How it works

Binding a chart SVG into the template

Declare only the width on <svg>; the height is derived from the chart's aspect ratio, so the chart never stretches vertically.
Open config.getLayoutConfig().setFlexLayout(true) if the template centers the chart with display:flex.
Bind the SVG string with factory.bind("svg", svg) — bind() is pure data injection and never re-parses markup.

String svg = JChartRendererFactory.renderChart(JChartType.LINE, option);
JQuickPdfFactory factory = new JQuickPdfFactory(config);
factory.bind("svg", svg);
byte[] bytes = factory.executeResource(TEMPLATE);

Flex layout: what it does and does not do

Enable flex on JPdfConfig before creating the factory.
Use fixed px widths that sum to less than the text width (~483px on A4 with 40pt margins).
Nested div two-column layouts are unreliable here — a full-width single column is safer.

JPdfConfig config = new JPdfConfig();
config.getLayoutConfig().setFlexLayout(true);

Template syntax cheat sheet

Syntax	Meaning
`<areaBreak></areaBreak>`	Force the next block onto a fresh page (CSS page-break is not supported).
`<image src='D:/.../x.png'>`	Embed an image. `src` is a raw path — it is not evaluated as an expression.
`<svg style="width:479pt">${svg}</svg>`	Embed a vector chart produced by `JChartRendererFactory`.
`// comment`	Line comment. Keep `<!-- ... -->` comments short — long ones can blank the render.
`<p style="fontSize:9pt; bold:true">`	Inline styles use camelCase keys, CSS-like values.

Gotchas worth remembering

A <td> holds text only — nested <p>, <image> or <table> is dropped.
There is no colspan; emit one <td> per column and use '—' as filler.
setFontSize takes a float (8.5f); setMargins takes List<Integer>.
The footer format accepts exactly one %d.

Output

Wrap up

You now have a template file, a Java class and a PDF — all three reproducible from a clean clone. Swap the placeholder blocks for real data (or for real seal images) and the layout does not move.

Series navigation: ← #2 Plotting a Four-Year Credit Trend Line Chart in a PDF Report　·　#4 Pie Chart: Breaking Down the Credit Rating Composition →

Full index: README.md　·　Source: jquick-pdf

Appendix — files in this demo

Role	Path
Java class	`jquick-pdfx/src/test/java/com/github/paohaijiao/biz/report/JQuickCreditReport03AreaTest.java`
Template	`jquick-pdfx/src/test/resources/report/credit_report_03_area.txt`
Output PDF	`03_area.pdf`
Preview image	`images/03.png`