Dev.to WebDev 🛠 Dev Sun, 08 Nov 2026 09:41:27 +0000 👁 0 📖 11 min read

Monthly Revenue and Net Profit: A Dual-Line Chart PDF

Monthly Revenue and Net Profit: A Dual-Line Chart PDF jquick-pdf by example — demo #16 of 184. Every article in this series ships one complete, runnable demo: a template file and a Java class. No snippets, no omission

Monthly Revenue and Net Profit: A Dual-Line Chart PDF

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

The classic monthly operating review page — twelve months, two series, one shared axis.

This document belongs to the Business chart series set.

What you'll build

A PDF written to D:/test/biz/16_monthly_revenue.pdf
A template file (report/biz/16_monthly_revenue.txt) with 1 bound placeholder
A detail grid of 6 rows × 4 columns, laid out with width:100% so it fills the text area
One self-contained Java class (JQuickBiz16MonthlyRevenueTest) 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/biz/16_monthly_revenue.txt) instead of a Java string, so designers can edit it without touching code.

<pdf>
<body>
  <div style="background:#2F5597; padding:14px; borderRadius:4px; marginBottom:10px; keepTogether:true">
    <div style="display:flex; justifyContent:space-between">
      <div style="width:300px">
        <h1 style="color:white; fontSize:18; bold:true; marginBottom:4px">'月度营收统计'</h1>
        <p style="color:#C7D6EA; fontSize:9; characterSpacing:0.5pt">'营业收入与净利润走势（单位：万元）'</p>
      </div>
      <div style="width:240px; textAlignment:right; borderLeft:1px solid #6E8FBF; paddingLeft:10px">
        <p style="color:white; fontSize:9">'统计周期：2024年1月 - 2024年12月'</p>
        <p style="color:#C7D6EA; fontSize:9">'编制单位：集团财务部'</p>
        <p style="color:#C7D6EA; fontSize:9">'报送对象：经营分析例会'</p>
      </div>
    </div>
  </div>

  <div style="display:flex; justifyContent:space-between; marginBottom:12px; keepTogether:true">
    <div style="width:136px; minHeight:56px; background:#EAF1F8; borderRadius:4px; padding:8px; verticalAlignment:middle">
      <p style="color:#2F5597; fontSize:17; bold:true; textAlignment:center; marginBottom:2px">'30,600'</p>
      <p style="color:#5A6B7C; fontSize:9; textAlignment:center">'全年营业收入（万元）'</p>
    </div>
    <div style="width:136px; minHeight:56px; background:#EAF1F8; borderRadius:4px; padding:8px; verticalAlignment:middle">
      <p style="color:#2F5597; fontSize:17; bold:true; textAlignment:center; marginBottom:2px">'4,321'</p>
      <p style="color:#5A6B7C; fontSize:9; textAlignment:center">'全年净利润（万元）'</p>
    </div>
    <div style="width:136px; minHeight:56px; background:#EAF1F8; borderRadius:4px; padding:8px; verticalAlignment:middle">
      <p style="color:#1B5E20; fontSize:17; bold:true; textAlignment:center; marginBottom:2px">'+18.6%'</p>
      <p style="color:#5A6B7C; fontSize:9; textAlignment:center">'营收同比增幅'</p>
    </div>
    <div style="width:136px; minHeight:56px; background:#EAF1F8; borderRadius:4px; padding:8px; verticalAlignment:middle">
      <p style="color:#BF360C; fontSize:17; bold:true; textAlignment:center; marginBottom:2px">'3,460'</p>
      <p style="color:#5A6B7C; fontSize:9; textAlignment:center">'12月单月新高（万元）'</p>
    </div>
  </div>

  <div style="marginBottom:10px; padding:10px; backgroundColor:#F7F9FC; borderRadius:4px; borderTop:2px solid #2F5597">
    <h2 style="color:#2F5597; marginTop:0; marginBottom:6px; fontSize:13; bold:true; underline:true">'一、全年营收与利润走势'</h2>
    <div style="display:flex; justifyContent:center">
      <svg style="width:700pt">${svg}</svg>
    </div>
    <p style="fontSize:9; color:#6c757d; italic:true; marginTop:6px">'图 1  2024年1-12月营业收入与净利润走势（数据来源：集团财务核算系统）'</p>
  </div>

  <div style="marginBottom:10px">
    <h2 style="color:#2F5597; marginBottom:6px; fontSize:13; bold:true">'二、季度营收汇总'</h2>
    <table style="width:560px; fontSize:10">
      <tr>
        <th style="backgroundColor:#2F5597; color:white; padding:6px; textAlign:center; border:1px solid #C7D6EA">'季度'</th>
        <th style="backgroundColor:#2F5597; color:white; padding:6px; textAlign:center; border:1px solid #C7D6EA">'营业收入（万元）'</th>
        <th style="backgroundColor:#2F5597; color:white; padding:6px; textAlign:center; border:1px solid #C7D6EA">'净利润（万元）'</th>
        <th style="backgroundColor:#2F5597; color:white; padding:6px; textAlign:center; border:1px solid #C7D6EA">'净利润率'</th>
      </tr>
      <tr>
        <td style="padding:5px; border:1px solid #DCE3EC">'第一季度'</td>
        <td style="padding:5px; textAlign:right; border:1px solid #DCE3EC">'5,720'</td>
        <td style="padding:5px; textAlign:right; border:1px solid #DCE3EC">'723'</td>
        <td style="padding:5px; textAlign:right; border:1px solid #DCE3EC">'12.6%'</td>
      </tr>
      <tr>
        <td style="padding:5px; backgroundColor:#F7F9FC; border:1px solid #DCE3EC">'第二季度'</td>
        <td style="padding:5px; textAlign:right; backgroundColor:#F7F9FC; border:1px solid #DCE3EC">'7,150'</td>
        <td style="padding:5px; textAlign:right; backgroundColor:#F7F9FC; border:1px solid #DCE3EC">'971'</td>
        <td style="padding:5px; textAlign:right; backgroundColor:#F7F9FC; border:1px solid #DCE3EC">'13.6%'</td>
      </tr>
      <tr>
        <td style="padding:5px; border:1px solid #DCE3EC">'第三季度'</td>
        <td style="padding:5px; textAlign:right; border:1px solid #DCE3EC">'8,040'</td>
        <td style="padding:5px; textAlign:right; border:1px solid #DCE3EC">'1,141'</td>
        <td style="padding:5px; textAlign:right; border:1px solid #DCE3EC">'14.2%'</td>
      </tr>
      <tr>
        <td style="padding:5px; backgroundColor:#F7F9FC; border:1px solid #DCE3EC">'第四季度'</td>
        <td style="padding:5px; textAlign:right; backgroundColor:#F7F9FC; border:1px solid #DCE3EC">'9,690'</td>
        <td style="padding:5px; textAlign:right; backgroundColor:#F7F9FC; border:1px solid #DCE3EC">'1,486'</td>
        <td style="padding:5px; textAlign:right; backgroundColor:#F7F9FC; border:1px solid #DCE3EC">'15.3%'</td>
      </tr>
      <tr>
        <td style="padding:6px; backgroundColor:#2F5597; color:white; bold:true; border:1px solid #2F5597">'全年合计'</td>
        <td style="padding:6px; textAlign:right; backgroundColor:#2F5597; color:white; bold:true; border:1px solid #2F5597">'30,600'</td>
        <td style="padding:6px; textAlign:right; backgroundColor:#2F5597; color:white; bold:true; border:1px solid #2F5597">'4,321'</td>
        <td style="padding:6px; textAlign:right; backgroundColor:#2F5597; color:white; bold:true; border:1px solid #2F5597">'14.1%'</td>
      </tr>
    </table>
  </div>

  <div style="marginBottom:10px">
    <h2 style="color:#2F5597; marginBottom:6px; fontSize:13; bold:true">'三、经营分析结论'</h2>
    <list style="listStyleType:disc; paddingLeft:16px; fontSize:10">
      <li style="marginBottom:6px"><span style="bold:true; color:#2F5597">'营收逐季走高：'</span>'四季度营收分别为 5,720 / 7,150 / 8,040 / 9,690 万元，环比增幅稳定在 12% 以上。'</li>
      <li style="marginBottom:6px"><span style="bold:true; color:#2F5597">'盈利质量改善：'</span>'净利润率由一季度 12.6% 提升至四季度 15.3%，全年 14.1%，成本管控成效显现。'</li>
      <li style="marginBottom:6px"><span style="bold:true; color:#2F5597">'12月创单月新高：'</span>'营业收入 3,460 万元、净利润 538 万元，为全年峰值，与年末集中交付确认收入有关。'</li>
      <li style="marginBottom:6px"><span style="bold:true; color:#2F5597">'建议：'</span>'关注一季度基数偏低问题，2025年可将部分交付节点前移以平滑季节性波动。'</li>
    </list>
  </div>

  <lineSeparator style="strokeColor:#DCE3EC"></lineSeparator>
  <div style="display:flex; justifyContent:space-between; marginTop:8px">
    <div style="width:180px">
      <p style="color:#6c757d; fontSize:8">'密级：内部'</p>
    </div>
    <div style="width:200px; textAlignment:center">
      <p style="color:#6c757d; fontSize:8; opacity:0.8">'生成时间：2025年1月8日'</p>
    </div>
    <div style="width:180px; textAlignment:right">
      <p style="color:#6c757d; fontSize:8">'批准人：财务总监'</p>
    </div>
  </div>
</body>
</pdf>

Step 2 — the Java class

jquick-pdfx/src/test/java/com/github/paohaijiao/biz/chart/JQuickBiz16MonthlyRevenueTest.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 ([email protected])
 */
package com.github.paohaijiao.biz.chart;

import com.github.paohaijiao.JOption;
import com.github.paohaijiao.axis.JCategoryAxis;
import com.github.paohaijiao.axis.JValueAxis;
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.JLine;
import org.junit.Test;

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

/**
 * 业务场景 Demo 16：月度营收统计表（企业运营）
 *
 * <p>业务场景：企业运营管理系统按月汇总营业收入与净利润，用于管理层月度经营例会。</p>
 * <p>实际图表类型：{@link JChartType#LINE} 折线图（多重折线，用于观察两项指标的月度走势）。</p>
 *
 * <p>模板：{@code report/biz/16_monthly_revenue.txt}；图表以 SVG 文本形式绑定到模板的
 * {@code ${svg}} 占位符，输出到 {@code D:\test\biz\16_monthly_revenue.pdf}。</p>
 *
 * <p>图表尺寸说明：图表按 700pt × 380pt（宽 × 高）的横版比例设计；模板中 {@code <svg>}
 * 只声明宽度、不声明高度，因此宽度被页面自动收窄时高度会按原比例同步缩放，不会纵向拉伸变形。</p>
 *
 * @author Martin
 * @version 1.0.0
 */
public class JQuickBiz16MonthlyRevenueTest {

    public static final String path = JQuickConstant.path;

    @Test
    public void biz16MonthlyRevenue() throws IOException {
        JOption option = new JOption();
        option.title().text("2024年月度营收统计").subtext("营业收入与净利润走势（单位：万元）");
        option.tooltip().trigger(JTrigger.axis);
        JCategoryAxis xAxis = new JCategoryAxis();
        xAxis.data("1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月");
        option.xAxis(xAxis);
        option.yAxis(new JValueAxis());
        // 两条折线分别表示营业收入与净利润，颜色沿用政务/企业系统低饱和主色
        JLine revenue = new JLine();
        revenue.name("营业收入").data(1860, 1720, 2140, 2380, 2260, 2510, 2680, 2540, 2820, 3050, 3180, 3460);
        JLine profit = new JLine();
        profit.name("净利润").data(232, 205, 286, 322, 298, 351, 384, 342, 415, 462, 486, 538);
        option.series(revenue, profit);

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

        File dir = new File(path + "biz");
        if (!dir.exists()) {
            dir.mkdirs();
        }
        FileOutputStream fileOutputStream = new FileOutputStream(path + "biz/16_monthly_revenue.pdf");
        JPdfConfig config = new JPdfConfig();
        // 开启 flex 行布局，使模板中的 display:flex 生效（图表居中）
        config.getLayoutConfig().setFlexLayout(true);
        JQuickPdfFactory factory = new JQuickPdfFactory(config);
        factory.bind("svg", svg);
        byte[] bytes = factory.executeResource("report/biz/16_monthly_revenue.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=JQuickBiz16MonthlyRevenueTest

…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 JQuickBiz16MonthlyRevenueTest().biz16MonthlyRevenue();
}

Output: D:/test/biz/16_monthly_revenue.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);

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
`<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

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: ← #15 Timeline Chart for Credit Event History　·　#17 Bar Chart of Accepted, Approved and Returned Applications →

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/chart/JQuickBiz16MonthlyRevenueTest.java`
Template	`jquick-pdfx/src/test/resources/report/biz/16_monthly_revenue.txt`
Output PDF	`D:/test/biz/16_monthly_revenue.pdf`
Preview image	`images/16.png`

📰 Read the original article on Dev.to WebDev

Originally published by Dev.to WebDev. Aggregated on AIWithGhost for educational purposes — full credit and traffic to the original publisher.

← News 🛠 Dev 🏠 Home