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