- 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.
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/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
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 withdisplay: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
JPdfConfigbefore creating the factory. - Use fixed
pxwidths that sum to less than the text width (~483px on A4 with 40pt margins). - Nested
divtwo-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
-
setFontSizetakes afloat(8.5f);setMarginstakesList<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 |
Top comments (0)