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

绝对坐标-横向扩展

概述

绝对坐标-横向扩展：绝对坐标定位
层次坐标是实现复杂报表的一个重要功能。
在进行小智报表模板设计时，单元格尚未进行扩展，但是有些时候需要获取扩展后的单元格并进行计算。例如，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

下一篇 相对坐标：纵向扩展