可视化图表API格式要求有哪些？Sugar BI详细代码示例（1）
Sugar BI中的每个图表可以对应一个数据 API，用户浏览报表时，选定一定的过滤条件，点击「查询」按钮将会通过 API 拉取相应的数据；前面说过，为了确保用户数据的安全性，Sugar BI上的所有数据请求都在Sugar BI的后端通过 curl 的方式访问产品线的 API，都是使用的POST请求。
POST 的数据是过滤条件、下钻、联动参数等，并且在请求的 Header 中会附加Sugar-Token.
Sugar BI支持多种类型的展示图表，每种类型的图表所需要的后端 API 返回的数据格式都有所区别，下面分别列举每种图表所对应的数据 API 格式：
表格
API 示例：/openapi/demo/chart?type=table
response：
{
"status": 0, // 0表示成功，非0表示失败
"msg": "", // 失败时的提示信息
"data": {
"columns": [ // 定义表格的各个列
{
"name": "表头名1", // 显示的表头
"id": "key1", // 该列绑定的数据字段名称
"unit": "", // 单位，可以不传
"textAlign": "left", // 列中文字的对齐方式，left、right、center, 可不传
"headerBgColor": "#333", // 该列表头的背景色，可不传
"autoWrap": true, // 文字太多时是否自动换行
"width": "200px", // 列宽度，可不传，默认为自适应，可传：100px、25%之类
"accuracy": "2", // 数据是小数时，保留的位数（四舍五入，不够位数会补零），可不传
"remark": "字段说明" // 对该列的备注说明，一般不需要配置，配置后会在该列的表头上展示一个小问号（鼠标悬停时展示该备注的具体信息）
},
{
"name": "表头名2", // 显示的表头
"id": "key2", // 该列绑定的数据字段名称
"unit": "%", // 单位，可以不传
"textAlign": "left", // 列中文字的对齐方式，left、right、center, 可不传
"headerBgColor": "#333", // 该列表头的背景色，可不传
"autoWrap": false, // 文字太多时是否自动换行
"width": "", // 列宽度，可不传，默认为自适应，可传：100px、25%之类
"accuracy": "2", // 数据是小数时，保留的位数（四舍五入，不够位数会补零），可不传
"remark": "字段说明" // 对该列的备注说明，一般不需要配置，配置后会在该列的表头上展示一个小问号（鼠标悬停时展示该备注的具体信息）
},
......
],
"rows": [ // 表格各行的数据
{
"key1": 12313, // key和columns中的id一一对应
"key2": "",
"key1_level": "red", // 在字段名后加_level,表示展示时的字体颜色，可以是 red、green，当然可以不传,
"__showx_row_level": "red", // 整行飘红或飘绿，优先级低于单个字段的飘红飘绿设定
"key2_ishtml": true, // 在字段名后加_ishtml,表示展示时以html内容进行解析，可以不传。
"key2_noPadding": true, // 在字段名后加_noPadding,表示展示时表格单元格内不加padding属性，使传入的dom占满单元格，可以不传。
"key2_background": "#ff6c00", // 在字段名后加_background,表示展示时表格单元格背景色，可以不传。
},
{
"key1": 12313, // key和columns中的id一一对应
"key2": 12312,
},
......
],
"total": 99, // total表示总行数，启动了后端分页时才需要传递total字段
"superHeaders": [ // 超级表头, 比如想对表头做一个分类或者使用2级表头多级表头等，就可以用到它，可不传
[ // 第一行超级表头
{ // 第一行超级表头的具体每个item
"name": "superHeader1", // 名称
"colspan": 3 // 占3列
},
{
"name": "superHeader2", //名称
"colspan": 2 // 占2列
},
...
],
... // 后面可以加入多行行超级表头...
],
}
}表格分页
在控制面板中开启分页功能后，表格支持前后端分页。
- 前端分页：是将传过来的数据进行分页，切换页码时不会另外请求数据；
- 后端分页：会在 API 的请求参数中加入
start和limit参数，每次切换页码都会另外请求 API，另外使用后端分页时返回的数据中需要含有total字段用来表示总行数:
{
"start": n, // 表示从第n行开始，n以0为起点
"limit": x, // 每页多少行数据
}表格排序
在控制面板中开启排序功能后，表格支持前后端排序。
- 前端排序：是将传来的数据进行排序，排序时不会另外请求数据；
- 后端排序：会在 API 的请求参数中加入
sortKey和sortType参数，每次排序都会另外请求 API:{ "sortKey": "key", // 即需要进行排序的列id "sortType": "desc" // asc、desc }
轮播表格
API 示例：/openapi/demo/chart?type=tablePlay
response：
{
"status": 0, // 0表示成功，非0表示失败
"msg": "", // 失败时的提示信息
"data": {
"columns":[ // 定义表格的各个列
{
"name": "表头名1", // 显示的表头
"id": "key1", // 该列绑定的数据字段名称
"unit": "", // 单位，可以不传
"textAlign": "left", // 列中文字的对齐方式，left、right、center, 可不传
"autoWrap": true, // 文字太多时是否自动换行
"width": "50", // 列宽度，可不传，默认为均分，传50代表本列占总宽度50%
"accuracy": "2", // 数据是小数时，保留的位数（四舍五入，不够位数会补零），可不传
"remark": "字段说明" // 对该列的备注说明，一般不需要配置，配置后会在该列的表头上展示一个小问号（鼠标悬停时展示该备注的具体信息）
},
{
"name": "表头名2", // 显示的表头
"id": "key2", // 该列绑定的数据字段名称
"unit": "%", // 单位，可以不传
"textAlign": "left", // 列中文字的对齐方式，left、right、center, 可不传
"autoWrap": false, // 文字太多时是否自动换行
"width": "", // 列宽度，可不传，默认为均分，传50代表本列占总宽度50%
"accuracy": "2", // 数据是小数时，保留的位数（四舍五入，不够位数会补零），可不传
"remark": "字段说明" // 对该列的备注说明，一般不需要配置，配置后会在该列的表头上展示一个小问号（鼠标悬停时展示该备注的具体信息）
},
......
],
"rows": [ // 表格各行的数据
{
"key1": 12313, // key和columns中的id一一对应
"key2": "",
"key2_ishtml": true, // 在字段名后加_ishtml,表示展示时以html内容进行解析，可以不传。
"key2_background": "#ff6c00", // 在字段名后加_background,表示展示时表格单元格背景色，可以不传。
},
{
"key1": 12313, // key和columns中的id一一对应
"key2": 12312,
},
......
]
}
}
属性表格
API 示例：/openapi/demo/chart?type=attrTable
response：
{
"status": 0, // 0表示成功，非0表示失败
"msg": "", // 失败时的提示信息
"data": [
{
"name": "访问量", // 属性名称，必传
"desc": "访问量是指页面被访问的次数", // 属性说明，可选
"value": "17480134", // 属性取值，
"unit": "次", // 属性单位
"ishtml": true, // 如果 value 字段中是 html 内容，需要将此字段设置为 true
"level": "green", // 属性取值飘红飘绿，可传 green red
"url": "http://www.baidu.com" // 这个字段供超链接类型的下钻使用，在配置下钻时的「绑定超链接的数据字段」处填写url即可
},
{
"name": "访问人数",
"value": 2249190,
"level": "green",
"url": "http://tieba.baidu.com"
},
{
"name": "周活跃数",
"value": 5326784,
"url": "http://zhidao.baidu.com"
},
{
"name": "月活跃数",
"value": 7326784,
"level": "red",
"url": "http://zhidao.baidu.com"
}
];
}树形表格
API 示例：/openapi/demo/chart?type=table-tree
response：
{
"status": 0, // 0表示成功，非0表示失败
"msg": "", // 失败时的提示信息
"data": {
"columns": [
{
"id": "subsys", // 字段名称，必传不能为空字符
"colType": "d", // 字段类型，d 表示维度，m 表示度量，必传不能为空字符
"name": "分组织", // 表头名称，必传不能为空字符，
"unit": "", // 单位，可以不传
"textAlign": "left", // 列中文字的对齐方式，left、right、center, 可不传
"headerBgColor": "#333", // 该列表头的背景色，可不传
"bgColor": "#fff", // 该列背景色，可不传
"autoWrap": true, // 文字太多时是否自动换行
"width": "200px", // 列宽度，可不传，默认为自适应，可传：100px、25%之类
"accuracy": 2, // 数据是小数时，保留的位数（四舍五入，不够位数会补零），可不传
"isHtml": true, // 是否为html，可不传
"format": "{value}", // isHtml为true时才有效，{value}会自动显示成对应的数值或字符串
"remark": "字段说明" // 对该列的备注说明，一般不需要配置，配置后会在该列的表头上展示一个小问号（鼠标悬停时展示该备注的具体信息）
},
{
"id": "module",
"colType": "d",
"name": "部门"
},
{
"id": "business",
"colType": "d",
"name": "业务组"
},
{
"id": "sales",
"colType": "m",
"name": "销售额"
}
],
"rows": [
{
"subsys": "北京总部", // subsys和columns[0]中的id对应
"sales": 1000, // sales和columns[3]中的id对应
"children": [
{
"module": "市场部", // module和columns[1]中的id对应
"sales": 1000, // sales和columns[3]中的id对应
"children": [
{
"business": "第一组", // business和columns[2]中的id对应
"sales": 1000 // sales和columns[3]中的id对应
}
]
}
]
}
]
}
}折线图、柱状图
API 示例：/openapi/demo/chart?type=line
response：
{
"status": 0, // 0表示成功，非0表示失败
"msg": "", // 失败时的提示信息
"data": {
"categories": [ // x轴，下面以日期为例
"2015-01-01",
"2015-01-02",
"2015-01-03",
"2015-01-04",
"2015-01-05",
"2015-01-06",
"2015-01-07",
"2015-01-08"
],
"series": [ // 用来展示的多条折线或柱状
{
"name": "新增用户",
"data": [2334, 1214......] // 数组元素个数需要和categories一致
},
{
"name": "老用户",
"data": [2342, 1234......] // 数组元素个数需要和categories一致
"lineStyle": { // 折线图时，这样配置可以将该条折线展示为虚线，不传该部分时就默认是实线
"type": "dashed"
}
},
......
]
}
}线柱混搭图
API 示例：/openapi/demo/chart?type=lineBar
当然，其实您可以指定所有数据都是折线图，这样就可以实现双 Y 轴的折线图
response：
{
"status": 0, // 0表示成功，非0表示失败
"msg": "", // 失败时的提示信息
"data": {
"categories": [ // x轴，下面以日期为例
"2015-01-01",
"2015-01-02",
"2015-01-03",
"2015-01-04",
"2015-01-05",
"2015-01-06",
"2015-01-07",
"2015-01-08"
],
"series": [ // 用来展示的多条折线或柱状
{
"name": "新增用户",
"type": "line 或 bar", //表示折线或者柱状，如果不填则默认为折线
"yAxisIndex": 0 或 1, //0表示第一个Y轴, 1表示第2个Y轴, 也可不填，默认为第一个Y轴；如果有一个yAxisIndex为1则标示开启了双重Y轴，可以配置不同的单位以及数据级别不同
"data": [2334, 1214......] // 数组元素个数需要和categories一致
},
{
"name": "老用户",
"type": "line 或 bar", //表示折线或者柱状，如果不填则默认为折线
"yAxisIndex": 0 或 1, //0表示第一个Y轴, 1表示第2个Y轴, 也可不填，默认为第一个Y轴；如果有一个yAxisIndex为1则标示开启了双重Y轴，可以配置不同的单位以及数据级别不同
"data": [2342, 1234......] // 数组元素个数需要和categories一致
},
......
]
}
}山峰柱图、象形柱状图
API 示例：/openapi/demo/chart?type=barPic
response：
{
"status": 0, // 0表示成功，非0表示失败
"msg": "", // 失败时的提示信息
"data": {
"categories": [ // x轴，下面以日期为例
"2015-01-01",
"2015-01-02",
"2015-01-03",
"2015-01-04",
"2015-01-05",
"2015-01-06",
"2015-01-07",
"2015-01-08"
],
"series": [ // 象形柱状图只支持一个系列
{
"name": "新增用户",
"data": [2334, 1214......] // 数组元素个数需要和categories一致
}
]
}
}圆形柱状图
API 示例：/openapi/demo/chart?type=barPolar
response：
{
"status": 0, // 0表示成功，非0表示失败
"msg": "", // 失败时的提示信息
"data": {
"categories": [ // 径向轴取值，有多少个取值就有多少个柱子
"魅族",
"小米",
"vivo",
"oppo",
"华为",
"三星",
"苹果"
],
"series": [
{
"data": [ // data里的数值代表柱子覆盖的角度，和上面的径向轴取值一一对应
500,
600,
700,
800,
900,
1000,
1200
]
}
]
}
}饼图、环形饼图、轮播饼图
API 示例：/openapi/demo/chart?type=pie
response：
{
"status": 0, // 0表示成功，非0表示失败
"msg": "", // 失败时的提示信息
"data": [
{
"name": "chrome",
"value": 46,
"url": "www.baidu.com" // 这个字段供超链接类型的下钻使用，在配置下钻时的「绑定超链接的数据字段」处填写url即可
},
{
"name": "safari",
"value": 32,
"url": "www.baidu.com"
},
{
"name": "fireFox",
"value": 16,
"url": "www.baidu.com"
},
......
]
}Sugar BI支持免费试用，欢迎大家前来体验