paohaijiao

Posted on Nov 4

Sunburst Chart: Drilling Into Merchant Industry Mix

#jquickpdf #opensource #tutorial

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

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

DEV Community

Sunburst Chart: Drilling Into Merchant Industry Mix

Sunburst Chart: Drilling Into Merchant Industry Mix

What you'll build

Prerequisites

Step 1 — the template file

Step 2 — the Java class

Step 3 — run it

How it works

Binding a chart SVG into the template

Flex layout: what it does and does not do

Template syntax cheat sheet

Gotchas worth remembering

Output

Wrap up

Appendix — files in this demo

Top comments (0)