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

相对坐标-横向扩展

概述

相对坐标-横向扩展

应用场景

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

示例说明

数据准备

在数据面板中添加数据集，可选择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并设置成分组以及向下扩展。如下图所示：