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支持免费试用,欢迎大家前来体验