Appearance
自定义表格
概述
自定义表格图表通过读取数据源来渲染类似Excel的展示效果。在图表中可以展示文字、图片、二维码、条码等内容
设置项
| 设置项 | 说明 |
|---|---|
| 数据源类型 | 配置数据源的类型。 选项： 调用自动化、使用表达式计算 |
| 调用自动化返回数据 | 数据源类型调用自动化时调用的自动化。通过设置自动化返回值步骤，返回数据 |
| 使用表达式计算数据 | 数据源类型使用表达式计算时执行的表达式。 |
| 表格样式-边框 | |
| 点击后调用自动化 | 点击自定义图表内容后触发的自动化。 |
| 双击后调用自动化 | 双击自定义图表内容后触发的自动化。 |
| 允许导出Excel | 开启后支持导出自定义表格Excel数据 |
| 在以下数据表变更时刷新图表 | 配置的数据表数据发生变更时（包含数据表记录创建、数据表记录删除、数据表记录修改），刷新卡片数据 |
数据格式
自动化返回的数据格式是二维数组，表示在表格中显示的单元格，数组中的每一个元素是一个Cell对象
javascript
[
[{ v: 11 }, { v: 12 }],
[{ v: 21 }, { v: 22 }],
[{ v: 31 }, { v: 32 }]
]单元格属性Cell
| 属性 | 类型 | 描述 |
|---|---|---|
| v | Object | 单元格的值 |
| t | String | 单元格类型，可选值为txt文本 、img图片、 barcode条码 qrcode二维码 date日期类型 |
| s | Style | 单元格样式 |
| cs | Integer | 向右侧合并多少个单元格，例如cs=2时，单元格占用2格空间 |
| rs | Integer | 向底部合并多少个单元格，例如rs=2时，单元格占用2格空间 |
| tooltip | String | 单元格提示信息 |
| href | String | 单元格超链接 |
| target | String | 单元格超链接跳转方式，可选值为_self、_blank、_parent、_top。默认为_blank |
单元格样式属性Style
| 属性 | 类型 | 描述 |
|---|---|---|
| fmt | String | 当t等于date时，fmt设置显示的日期格式,例如yyyy-MM-DD是年月日形式，具体的格式可参考moment库 |
| barcode | String | 条码类型，可选值为CODE39 CODE128 CODE128A CODE128B CODE128C ISBN EAN13 EAN8 EAN5 EAN2 UPC ITF ITF14 MSI MSI11 MSI1010 MSI1110 pharmacode codabar |
| fs | Integer | 字体大小 |
| f | String | 字体 |
| c | String | 单元格颜色 |
| bg | String | 单元格背景色 |
| w | Integer | 单元格宽度 |
| h | Integer | 单元格高度 |
| ph | Integer | 单元格横向内边距 |
| pv | Integer | 单元格纵向内边距 |
| bwTop | Integer | 单元格上边框宽度 |
| bsTop | Integer | 单元格上边框样式，可选值为solid实线、solid 虚线 |
| bcTop | String | 单元格上边框颜色 |
| bwBottom | Integer | 单元格下边框宽度 |
| bsBottom | Integer | 单元格下边框样式，可选值为solid实线、solid 虚线 |
| bcBottom | String | 单元格下边框颜色 |
| bwLeft | Integer | 单元格左边框宽度 |
| bsLeft | Integer | 单元格左边框样式，可选值为solid实线、solid 虚线 |
| bcLeft | String | 单元格左边框颜色 |
| bwRight | Integer | 单元格右边框宽度 |
| bsRight | Integer | 单元格右边框样式，可选值为solid实线、solid 虚线 |
| bcRight | String | 单元格右边框颜色 |
| ha | String | 水平方向的布局，可选值为left居左、center居中、 right居右 |
| va | String | 垂直方向的布局，可选值为top顶部对齐、middle居中、 bottom底部对齐 |
| italic | Boolean | 是否是斜体 |
| bold | Boolean | 是否是粗体 |
以下是一个简单的例子
javascript
[
[{"v":"表头","cs":3,"s":{"fs":20,"bold":true}}],
[{"v":"0123456789","t":"barcode","s":{"barcode":"CODE39"}},{"v":2,"s":{"w":100,"h":100}},{"v":"右对齐","s":{"w":100,"ha":"right"}}],
[{"v":"https//informat.cn","t":"qrcode","s":{"w":200}},{"v":2},{"v":3}],
[{"v":"https://www.informat.cn/assets/images/logo.png","t":"img","s":{"w":200}},{"v":2},{"v":3}],
[{"v":"红色字体","s":{"c":"#ff0000","bg":"#00ff00"}},{"v":2},{"v":3}],
[{"v":"红色边框","s":{"bw":1,"bc":"#ff0000","bs":"dashed"}},{"v":2},{"v":3}],
[{"v":"2026-03-31T04:11:54.152Z","t":"date","s":{"fmt":"yyyy-MM-DD"}},{"v":2},{"v":3}],
[{"v":"文字提示","tooltip":"这是提示内容"},{"v":"超链接","href":"https://next.informat.cn/doc/"}],
[1,2,"文字"]
]获取数据
自定义表格通过自动化程序获取数据，自动化程序接受一个参数，类型为Record，表示仪表盘传递的过滤参数
交互
点击或者双击表格中的单元格可以触发一个自动化程序，自动化程序接受一个参数，类型如下
javascript
{
row:Number,//点击的行
col:Number,//点击的列
value:Object//点击的值
}使用示例
假设需要按用户选择的时间段生成一张库存统计表
依赖的数据表
以下是示例中依赖的数据表结构：
商品表
| 名称 | 标识符 | 类型 | 描述 |
|---|---|---|---|
| 商品名称 | name | 单行文本 | |
| 条码 | code | 单行文本 |
库存记录表
| 名称 | 标识符 | 类型 | 描述 |
|---|---|---|---|
| 商品 | good | 关联记录 | |
| 条码 | goodCode | 关联记录字段 | |
| 库存操作 | type | 列表选择 | 选项值：出库、入库 |
| 数量 | quantity | 整数 | |
| 操作时间 | time | 日期 |
生成自定义表格数据
自动化程序新增一个类型为Record的参数，获取卡片中定义的参数，根据开始和结束时间查询库存记录表，并对查询数据进行处理，生成自定义表格数据，最终通过设置自动化返回值步骤，返回数据。
以下是生成的自定义表格数据：
javascript
[
[
{ "rs": 2, "v": "商品", "w": 100 },
{ "rs": 2, "v": "条码", "w": 50 },
{ "cs": 9, "v": "库存情况" }
],
[
{ "cs": 2, "v": "总数", "w": 30 },
{ "v": "2023-04-01", "w": 30 },
{ "v": "2023-04-02", "w": 30 },
{ "v": "2023-04-03", "w": 30 },
{ "v": "2023-04-04", "w": 30 },
{ "v": "2023-04-05", "w": 30 },
{ "v": "2023-04-06", "w": 30 },
{ "v": "2023-04-07", "w": 30 }
],
[
{ "rs": 2, "v": "Coca-Cola可口可乐（500毫升）" },
{ "rs": 2, "s": { "barcode": "CODE39" }, "t": "barcode", "v": "049000050120" },
"入库数量", 2374, 282, 261, 378, 435, 327, 274, 417
],
["出库数量", 2597, 282, 261, 378, 435, 327, 274, 417],
[
{ "rs": 2, "v": "娃哈哈AD钙奶（250毫升）" },
{ "rs": 2, "s": { "barcode": "CODE39" }, "t": "barcode", "v": "6902083890256" }
, "入库数量", 2207, 323, 198, 335, 359, 198, 401, 393
],
["出库数量", 2182, 323, 198, 335, 359, 198, 401, 393],
[
{ "rs": 2, "v": "三只松鼠碧根果（110克）" },
{ "rs": 2, "s": { "barcode": "CODE39" }, "t": "barcode", "v": "6970349130014" },
"入库数量", 1008, 58, 68, 186, 289, 75, 171, 161
],
["出库数量", 1072, 58, 68, 186, 289, 75, 171, 161],
[
{ "rs": 2, "v": "洽洽香瓜子（208克）" },
{ "rs": 2, "s": { "barcode": "CODE39" }, "t": "barcode", "v": "6901668026551" },
"入库数量", 2363, 510, 282, 219, 363, 436, 335, 218
],
["出库数量", 2379, 510, 282, 219, 363, 436, 335, 218],
[
{ "rs": 2, "v": "康师傅方便面（牛肉味，105克）" },
{ "rs": 2, "s": { "barcode": "CODE39" }, "t": "barcode", "v": "6920155402703" },
"入库数量", 2422, 147, 431, 440, 394, 281, 444, 285
],
["出库数量", 2600, 147, 431, 440, 394, 281, 444, 285],
[
{ "rs": 2, "v": "脉动维生素饮料（青柠味，600毫升）" },
{ "rs": 2, "s": { "barcode": "CODE39" }, "t": "barcode", "v": "6902083885559" },
"入库数量", 1297, 295, 122, 228, 87, 219, 173, 173
],
["出库数量", 977, 295, 122, 228, 87, 219, 173, 173],
[
{ "rs": 2, "v": "红牛功能饮料（原味，250毫升）" },
{ "rs": 2, "s": { "barcode": "CODE39" }, "t": "barcode", "v": "6920202888885" },
"入库数量", 2194, 289, 231, 275, 188, 520, 366, 325
],
["出库数量", 2178, 289, 231, 275, 188, 520, 366, 325]
]示例图
