如何在Oracle APEX中绘制waterfall-chart（瀑布图）

Oracle APEX完全支持瀑布图的绘制，常用实现方案如下：

方案1：使用原生图表组件（推荐，适配性最高） #

APEX 20.2及以上版本已内置瀑布图图表类型，底层基于Oracle JET实现，无需引入额外第三方依赖，适配性和性能最优，配置步骤如下：

• 进入对应应用页面的编辑界面，新增「图表」类型的区域，图表类型选择瀑布图
• 配置数据源：需要准备包含至少3个字段的数据集：X轴分类字段（展示每个数据项的名称）、数值字段（对应每个分类的增减额）、系列字段（可选，用于区分初始值、增长、下降、总计类别的样式）
• 格式自定义：在属性面板的「外观」分类下，可自定义各类型节点的填充色、边框样式，也可开启数值标签显示，直接在柱体上展示每个节点的具体数值

示例数据源查询语句参考：

select 
  '初始金额' as 分类,
  10000 as 数值,
  '初始值' as 系列
from dual
union all
select 
  '项目收入' as 分类,
  3500 as 数值,
  '增长' as 系列
from dual
union all
select 
  '人力成本' as 分类,
  -2200 as 数值,
  '下降' as 系列
from dual
union all
select 
  '运营成本' as 分类,
  -800 as 数值,
  '下降' as 系列
from dual
union all
select 
  '最终结余' as 分类,
  10500 as 数值,
  '总计' as 系列
from dual

方案2：低版本APEX自定义渲染方案 #

如果你使用的是20.2以下的旧版本APEX，没有内置瀑布图类型，可以通过自定义JS的方式实现：

• 新增「静态内容」类型区域，在区域源代码中写入自定义DOM容器，用于承载瀑布图渲染节点
• 提前将开源图表库（如ECharts、Chart.js）的静态资源上传到APEX应用的静态文件中，避免依赖外部资源
• 编写对应的瀑布图渲染JS逻辑，通过APEX自带的AJAX回调接口将SQL查询结果转换为图表所需的JSON格式，传入图表实例即可完成渲染

内容的提问来源于stack exchange，提问作者Mohamed Dedish