可视化图表API格式要求有哪些？Sugar BI详细代码示例（2）

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