Sugar BI中的每个图表可以对应一个数据 API，用户浏览报表时，选定一定的过滤条件，点击「查询」按钮将会通过 API 拉取相应的数据；前面说过，为了确保用户数据的安全性，Sugar BI上的所有数据请求都在Sugar BI的后端通过 curl 的方式访问产品线的 API，都是使用的POST请求。
POST 的数据是过滤条件、下钻、联动参数等，并且在请求的 Header 中会附加Sugar-Token.
Sugar BI支持多种类型的展示图表，每种类型的图表所需要的后端 API 返回的数据格式都有所区别，之前已经发布了
可视化图表API格式要求有哪些？Sugar BI详细代码示例（1）
今天，为大家带来其他图表所对应的数据 API 格式：
嵌套饼图
API 示例：/openapi/demo/chart?type=pieNested
response：
{
"status": 0, // 0表示成功，非0表示失败
"msg": "", // 失败时的提示信息
"data": [
[ // 内层的饼图数据
{
"name": "chrome",
"value": 46
},
{
"name": "ie",
"value": 32
},
{
"name": "fireFox",
"value": 36
},
......
],
[ // 外层的环形饼图数据
// 注意外层子扇区的顺序需要与内层母扇区的顺序进行对应
// 例如这里子扇区也是按照 chrome， ie， firefox 的顺序排列的
{
"name": "chrome49",
"value": 14
},
{
"name": "chrome50",
"value": 32
},
{
"name": "IE10",
"value": 10
},
{
"name": "IE11",
"value": 22
},
{
"name": "fireFox62",
"value": 20
},
{
"name": "fireFox65",
"value": 6
},
......
]
]
}
漏斗图
API 示例：/openapi/demo/chart?type=funnel
response：
{
"status": 0, // 0表示成功，非0表示失败
"msg": "", // 失败时的提示信息
"data": {
"unit": "%", // 单位，可以不传
"data": [
{
"name": "首页",
"value": 12323,
"url": "www.baidu.com" // 这个字段供超链接类型的下钻使用，在配置下钻时的「绑定超链接的数据字段」处填写url即可
},
{
"name": "首页->列表页",
"value": 23457,
"url": "www.baidu.com"
},
{
"name": "首页->列表页->下单页",
"value": 23457,
"url": "www.baidu.com"
},
......
]
}
}
字符云
API 示例：/openapi/demo/chart?type=wordCloud
response：
{
"status": 0, // 0表示成功，非0表示失败
"msg": "", // 失败时的提示信息
"data": [
{
"name": "热词1",
"value": 46,
"url": "www.baidu.com" // 这个字段供超链接类型的下钻使用，在配置下钻时的「绑定超链接的数据字段」处填写url即可
},
{
"name": "热词2",
"value": 32,
"url": "www.baidu.com"
},
{
"name": "热词3",
"value": 16,
"url": "www.baidu.com"
},
{
"name": "热词4",
"value": 15,
"url": "www.baidu.com"
},
......
]
}
雷达图
API 示例：/openapi/demo/chart?type=radar
response：
{
"status": 0, // 0表示成功，非0表示失败
"msg": "", // 失败时的提示信息
"data": {
indicators:[
{
"text": "顶点1", // 顶点展示的文字
"max": 10, // 该顶点的最大值
"min": 0 // 该顶点的最小值，可不传，默认为0
},
{
"text": "顶点2", // 顶点展示的文字
"max": 20, // 该顶点的最大值
"min": 5 // 该顶点的最小值，可不传，默认为0
},
{
"text": "顶点3", // 顶点展示的文字
"max": 10, // 该顶点的最大值
"min": 2 // 该顶点的最小值，可不传，默认为0
},
......
],
"series": [
{
"name": "预算开支",
"value": [8, 18, 9, ...] // 数组元素个数和indicators相同
},
{
"name": "实际开销",
"value": [9, 15, 7, ...] // 数组元素个数和indicators相同
},
......
]
}
}
里程碑
API 示例：/openapi/demo/chart?type=milestones
支持以下 3 种类型：
1.1 个日期维度，1 个非日期维度
response：
{ "status": 0, // 0表示成功，非0表示失败
"msg": "",
"data": {
"date": { // 日期维度描述
"name": "date",
"alias": "发货日期"
},
"x2": [ // 非日期维度描述
{
"name": "x2",
"alias": "地区"
}
],
"y": [], // 指标度量描述
"data": [
{
"date": "2013年",
"date_sugar_origin": 2013,
"date_sugar_date_type": "YEAR",
"x2": [
"东北",
"中南",
"华东",
"华北",
"西北",
"西南"
]
},
...
{
"date": "2017年",
"date_sugar_origin": 2017,
"date_sugar_date_type": "YEAR",
"x2": [
"东北",
"中南"
]
}
]
}
}
2.1 个日期维度，1 个非日期维度，1 个指标
response：
{
"status": 0, // 0表示成功，非0表示失败
"msg": "",
"data": {
"date": {
"name": "date",
"alias": "年份" // 日期维度名称
},
"x2": [
{
"name": "x2",
"alias": "地区" // 非日期维度名称
}
],
"y": [
{
"name": "y",
"alias": "销售额", // 指标字段名称
"unit": "元" // 指标字段单位
}
],
"data": [
{
"date": "2013年",
"x2": ["东北", "中南", "华东", "华北", "西北", "西南"],
"y": [9322, 9050, 1579, 7942, 5072, 8310]
},
{
"date": "2014年",
"x2": ["东北","中南","华东","华北","西北","西南"],
"y": [6513, 1731, 8109, 2547, 6470, 699]
},
...
]
}
}
3. 1 个日期维度，1-3 个指标
response:
{
"status": 0, // 0表示成功，非0表示失败
"msg": "",
"data": {
{
"date": { // 日期维度描述
"name": "date",
"alias": "发货日期"
},
"x2": [], // 非日期维度描述
"y": [ // 指标度量描述
{
"name": "y",
"alias": "数量",
"unit": "个", // 单位
"dataFormat": "" // 格式化
},
{
"name": "y",
"alias": "销售额",
"unit": "", // 单位
"dataFormat": "percent" // 格式化
},
{
"name": "y",
"alias": "成本",
"unit": "", // 单位
"dataFormat": "" // 格式化
}
],
"data": [
{
"date": "2013年",
"y": [
598,
293175,
256095
]
},
...
{
"date": "2017年",
"y": [
19,
16584,
8950
]
}
]
}
}
}
旭日图
API 示例：/openapi/demo/chart?type=sunburst
response：
{
"status": 0,
"msg": "",
// data是一个数组，表示了一个树状结构
"data": [
{
// 每个节点必须有name属性，其值为字符串
"name": "Fruity",
// 非叶子节点必须有children字段，其值为包含其子节点的数组，不需要有value字段
"children": [
{
"name": "Berry",
"children": [
{
"name": "Blackberry",
// 叶子节点必须有value字段，其值为数字
"value": 1,
},
{
"name": "Raspberry",
"value": 1,
}
]
}]
},
{
"name": "Sour/
Fermented",
"children": [
{
"name": "Sour",
"children": [
{
"name": "Sour Aromatics",
"value": 1,
},
{
"name": "Acetic Acid",
"value": 1,
}
]
}
]
},
......
]
}
矩形树图
API 示例：/openapi/demo/chart?type=treemap
response：
{
"status": 0,
"msg": "",
// data是一个数组，表示了一个树状结构
"data": [
{
// 每个节点必须有name属性，其值为字符串
"name": "Fruity",
// 非叶子节点必须有children字段，其值为包含其子节点的数组，不需要有value字段
"children": [
{
"name": "Berry",
"children": [
{
"name": "Blackberry",
// 叶子节点必须有value字段，其值为数字
"value": 1,
},
{
"name": "Raspberry",
"value": 1,
}
]
}]
},
{
"name": "Sour/Fermented",
"children": [
{
"name": "Sour",
"children": [
{
"name": "Sour Aromatics",
"value": 1,
},
{
"name": "Acetic Acid",
"value": 1,
}
]
}
]
},
......
]
}
气泡图
API 示例：/openapi/demo/chart?type=bubble
response：
{
"status": 0, // 0表示成功，非0表示失败
"msg": "", // 失败时的提示信息
"data": [
{
"name": "热词1",
"value": 46,
"cat": "cat1", // 气泡所属的类别，不同类别的气泡颜色不同，若不传，则用name作为气泡名称
"url": "www.baidu.com" // 这个字段供超链接类型的下钻使用，在配置下钻时的「绑定超链接的数据字段」处填写url即可
},
{
"name": "热词2",
"value": 32,
"cat": "cat1",
"url": "www.baidu.com"
},
{
"name": "热词3",
"value": 16,
"cat": "cat2",
"url": "www.baidu.com"
},
{
"name": "热词4",
"value": 15,
"cat": "cat2",
"url": "www.baidu.com"
},
......
]
}
拓扑图
API 示例：/openapi/demo/chart?type=topology
response：
{
"status": 0,
"msg": "",
"data": {
"nodes": [ //表示各个节点
{
"id": "node1", //结点的id, 用于唯一标识1个节点，必传
"title": "node1Title", //节点的标题，可不填，
"data": [ //节点主体的数据，可用数组表示，数组每一项会分行。
"hello",
"<button>world</button>"
], //data数据也可不填，但title和data最好保留至少1个, 当然数据也可以写为html的内容
"tooltip": "hi, 我是tooltip" //字符串格式的tooltip
},
{
"id": "node2", //结点的id, 用于唯一标识1个节点，必传
"title": "node2Title", //节点的标题，可不填
"data": "hello, world", //data字段为字符串表示只占1行数据
"fontColor": "#ff0000", //自定义的字体颜色，可不传
"bgColor": "bgColor", //自定义的背景颜色，可不传
"tooltip": ["hi", "我是tooltip"] //数组格式的tooltip
},
...
],
"links": [
{
"source": "node1", // 表示从id为`node1`的结点出发，必传
"target": "node2", // 表示到id为`node2`的结点结束，必传
"text": "15%", // 折线上的数据，可不传
"tooltip": ["hi", "我是tooltip"] //数组格式的tooltip
},
{
"source": "node1", // 表示从id为`node1`的结点出发，必传
"target": "node3", // 表示到id为`node3`的结点结束，必传
"text": "15%", // 折线上的数据，可不传
"tooltip": "hi, 我是tooltip" //字符串格式的tooltip
},
...
]
}
}
河流图
API 示例：/openapi/demo/chart?type=river
response：
{
"status": 0,
"msg": "",
"data": {
// legend 字段必填，代表一共有几个系列
"legend": ["华为", "联想", "微星", "宏基", "戴尔", "惠普"],
// data 字段是一个二维数组，每个子数组必须有三项：
// 0：用于横轴的序列。以 - 或 / 分隔的日期，以 : 分隔的时间，符合前面格式要求的日期时间组合，数字
// 1：数据的大小。数字或有效的数字字符串
// 2：数据属于哪个系列，需要与 legend 中的字段对应
"data": [
["2015/11/08",10,"华为"],["2015/11/09",15,"华为"],["2015/11/10",35,"华为"],
["2015/11/08",35,"联想"],["2015/11/09",36,"联想"],["2015/11/10",37,"联想"],
["2015/11/08",21,"微星"],["2015/11/09",25,"微星"],["2015/11/10",27,"微星"],
["2015/11/08",10,"宏基"],["2015/11/09",15,"宏基"],["2015/11/10",35,"宏基"],
["2015/11/08",10,"戴尔"],["2015/11/09",15,"戴尔"],["2015/11/10",35,"戴尔"],
["2015/11/08",10,"惠普"],["2015/11/09",15,"惠普"],["2015/11/10",35,"惠普"]
.....
]
}
}
日历热力图
API 示例：/openapi/demo/chart?type=calHmap
response：
{
"status": 0,
"msg": "",
"data": [
// 每一项都是一个数组，代表某天的数据，数据可以不按日期顺序返回
// 第一个元素是日期，格式要求yyyy-mm-dd
// 第二个元素是取值，要求是数字或有效的数字字符串
["2020-02-10", 186],
["2020-02-10", 877],
......
]
}
Sugar BI支持免费试用，欢迎大家前来体验
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
