小智纯前端js报表实战5-绝对坐标-横向扩展

news2024/9/22 21:19:45

绝对坐标-横向扩展

概述

绝对坐标-横向扩展：绝对坐标定位
层次坐标是实现复杂报表的一个重要功能。
在进行小智报表模板设计时，单元格尚未进行扩展，但是有些时候需要获取扩展后的单元格并进行计算。例如，A1单元格扩展成A1-D1，如果某个单元格的值希望对扩展后的C1和D1进行求和，在扩展前，表达式很难描述这样的关系，而对于扩展后单元格的唯一性的定义，就是单元格的层次坐标。
在这里插入图片描述

应用场景

如下图所示，简单展示数据
效果图

示例说明

数据准备

在数据面板中添加数据集，可选择Json数据集和API服务数据集。Json数据集输入如下图所示：

[
  {
    "type": 1,
    "name": "课程分数",
    "response_data": [
      {
        "课程": "English",
        "分数": "4013"
      },
      {
        "课程": "Math",
        "分数": "4004"
      },
      {
        "课程": "French",
        "分数": "3984"
      },
      {
        "课程": "Chemistry",
        "分数": "4011"
      },
      {
        "课程": "Physics",
        "分数": "4029"
      }
    ]
  }
]

报表设计

将数据字段拖入到A2、B2,在B5,B6,B7分别写入绝对坐标定位的公式，A2,B2并设置成分组以及向下扩展。如下图所示：
在这里插入图片描述

效果预览

在这里插入图片描述

参考文档

小智报表样例源码下载
- https://gitee.com/tizdata_admin/vue-xzreport-example.git
小智报表demo体验
- https://xzdemo.tizdata.com/#/imbedShow/reportExample
- 丰富的报表模板示例
小智报表在线试用
- https://xzreport.com
小智报表js sdk下载
- https://tizdata.com/xzdownload/
开发使用文档
- https://doc.tizdata.com/xiaozhi/650
本文样例参考了：帆软报表-层次坐标
- https://help.fanruan.com/finereport9.0/doc-view-339.html
- https://help.fanruan.com/finereport9.0/doc-view-339.html