Sugar BI中的每个图表可以对应一个数据 API,用户浏览报表时,选定一定的过滤条件,点击「查询」按钮将会通过 API 拉取相应的数据;前面说过,为了确保用户数据的安全性,Sugar BI上的所有数据请求都在Sugar BI的后端通过 curl 的方式访问产品线的 API,都是使用的POST请求。
POST 的数据是过滤条件、下钻、联动参数等,并且在请求的 Header 中会附加Sugar-Token.
Sugar BI支持多种类型的展示图表,每种类型的图表所需要的后端 API 返回的数据格式都有所区别,之前已经发布了
可视化图表API格式要求有哪些?Sugar BI详细代码示例(1)
可视化图表API格式要求有哪些?Sugar BI详细代码示例(2)
可视化图表API格式要求有哪些?Sugar BI详细代码示例(3)
今天,为大家带来其他图表所对应的数据 API 格式:
3D 区域色彩地图
API 示例:/openapi/demo/chart?type=map3DArea
response
{
"status": 0,
"msg": "",
"data": {
// mapData字段是一个数组,每项代表一个区域
"mapData": [
{
// 区域名称。必传,字符串。
"name": "北京",
// 颜色映射字段
"value": 7470,
// 区域高度映射(选填)
"areaHeight": 234,
// tooltip中附加显示的数据,可选,数字或字符串。
"tooltipValues": [
44,
8
],
// 这个字段供超链接类型的下钻使用,在配置下钻时的「绑定超链接的数据字段」处填写url即可
"url": "sugar.baidu.com"
},
{
"name": "广东",
"value": 8659,
"areaHeight": 344,
"tooltipValues": [
62,
8
],
"url": "sugar.baidu.com"
},
{
"name": "上海",
"value": 8424,
"areaHeight": 21,
"tooltipValues": [
44,
9
],
"url": "sugar.baidu.com"
},
......
],
// 颜色映射数据的名称,会显示在 tooltip 中
"valueName": "人口",
// 高度映射数据的名称,会显示在 tooltip 中
"heightName": "GDP",
// tooltip中附加显示数据的名称,与上面的tooltipValues中的值一一对应
"tooltipNames": [
"面积",
"流动人口"
],
// tooltip中附加显示数据的单位,与上面的tooltipValues中的值一一对应
"tooltipUnits": [
"平方公里",
"人"
]
}
}
3D 柱状地图
API 示例:/openapi/demo/chart?type=map3DBar
response:
{
"status": 0,
"msg": "",
"data": {
// mapData字段是一个数组,每项代表一个气泡或一个区域
"mapData": [
{
// 柱子的名称。必传,字符串。
// 当没有传递下面的 coord 字段时,系统会根据 name 的值自动匹配经纬度坐标
// 注意,自动匹配经纬度坐标只支持全国省份和城市名称
"name": "北京",
// 地点的经纬度,可选,如果传递了则优先使用经纬度来定位气泡或区域
"coord": [116.41989, 40.189913],
// 颜色映射字段,选填
"value": 7470,
// tooltip中附加显示的数据,可选,数字或字符串。
"tooltipValues": [
44,
8
],
// 这个字段供超链接类型的下钻使用,在配置下钻时的「绑定超链接的数据字段」处填写url即可
"url": "sugar.baidu.com"
},
{
"name": "广东",
"coord": [113.429877, 23.334664],
"value": 8659,
"tooltipValues": [
62,
8
],
"url": "sugar.baidu.com"
},
{
"name": "上海",
"value": 8424,
"tooltipValues": [
44,
9
],
"url": "sugar.baidu.com"
},
......
],
// 颜色映射数据的名称,会显示在 tooltip 中
"valueName": "人口",
// tooltip中附加显示数据的名称,与上面的tooltipValues中的值一一对应
"tooltipNames": [
"面积",
"流动人口"
],
// tooltip中附加显示数据的单位,与上面的tooltipValues中的值一一对应
"tooltipUnits": [
"平方公里",
"人"
]
}
}
文本、跑马灯
API 示例:/openapi/demo/chart?type=simpleText
response:
{
"status": 0,
"msg": "",
"data": "这里就是文本的展示内容"
}
富文本
API 示例:/openapi/demo/chart?type=text
response:
{
"status": 0,
"msg": ,
"data": {
"name": "百度",
"dau": 999999999,
"mau": 1000000000,
"link": "https://www.badiu.com"
}
}
使用示例 API 绑定富文本的数据,可以展示如下效果:
图片轮播
API 示例:/openapi/demo/chart?type=slider
response:
{
"status": 0,
"msg": "",
"data": [ // data 字段内容 是一个数组
{
// 每个图片的标题,如没有可不传
"title": "大屏示例1",
// 必传,图片的 url
"url": "https://sugar-files.cdn.bcebos.com/images/templet-templet04.png",
// 图片如果需要配置超链接,可传链接的 url ,如不需要可不传,注意图片超链接在编辑模式不生效,浏览模式生效
"link": "https://sugar.baidubce.com/dashboard/aa75c47fe742c2a33c186a3d364eb6a7"
},
{
"title": "大屏示例2",
"url": "https://sugar-files.cdn.bcebos.com/images/templet-templet01-1.png",
"link": "https://sugar.baidubce.com/dashboard/41510e632e1e1e4767b0a041030670ec"
},
...
]
}
视频/直播
API 示例:/openapi/demo/chart?type=video
response:
{
"status": 0,
"msg": "",
"data": {
// 视频类型,可以设置为"auto"让系统自动识别视频类型
// 指定类型时,对于普通视频,支持 mp4, flv, m3u8
// 对于直播,支持 rtmp, flv, m3u8
"videoType": "flv",
// 完整视频地址
"videoUrl": "http://gcqq450f71eywn6bv7u.exp.bcevod.com/mda-hivruedyynkarv3d/mda-hivruedyynkarv3d.flv",
// 视频封面图片地址
"imageUrl": "https://login.bce.baidu.com/img/2020-02-10-2x.png"
}
}
多层地图 - 区域色彩层
API 示例:/openapi/demo/chart?type=map
response:
{
"status": 0, // 0表示成功,非0表示失败
"msg": "", // 失败时的提示信息
"data": {
// mapData字段是一个数组,每项代表一个区域
"mapData": [
{
// 区域的名称。必传,字符串
// 在使用内置区域地图的时候,系统会使用这个名称来将数据对应到各个区域
// 在使用自定义 geoJSON 绘制区域时,name要与 geoJSON 每个区域项中 properties 里的 name 对应
"name": "北京",
"value": 7470,
// tooltip中附加显示的数据,可选,数字或字符串。
"tooltipValues": [
44,
8
],
// 这个字段供超链接类型的下钻使用,在配置下钻时的「绑定超链接的数据字段」处填写url即可
"url": "sugar.baidu.com"
},
{
"name": "广东",
"value": 8659,
"tooltipValues": [
62,
8
],
"url": "sugar.baidu.com"
},
{
"name": "上海",
"value": 8424,
"tooltipValues": [
44,
9
],
"url": "sugar.baidu.com"
},
......
],
// 颜色映射数据的名称,会显示在 tooltip 中
"valueName": "人口",
// tooltip中附加显示数据的名称,与上面的tooltipValues中的值一一对应
"tooltipNames": [
"面积",
"流动人口"
],
// tooltip中附加显示数据的单位,与上面的tooltipValues中的值一一对应
"tooltipUnits": [
"平方公里",
"人"
]
}
}
多层地图 - 散点层
API 示例:/openapi/demo/chart?type=bmapScatter
response:
{
"status": 0, // 0表示成功,非0表示失败
"msg": "", // 失败时的提示信息
"data": {
// mapData字段是一个数组,每项代表一个散点或一个热力区域
"mapData": [
{
// 散点名称。必传,字符串。
// 当没有传递下面的 coord 字段时,系统会根据 name 的值自动匹配经纬度坐标
// 注意,自动匹配经纬度坐标只支持全国省份和城市名称
"name": "北京",
// 地点的经纬度,可选,如果传递了则优先使用经纬度来定位散点或热力区域
"coord": [116.41989, 40.189913],
// 散点的值,可选,数字类型,会映射为散点的渐变颜色
"value": 7470,
// 映射为散点大小的数据值,可选,数字类型
"sizeValue": 811,
// 映射为散点形状,可选,可枚举类型的数字或字符串
"type": 1,
// tooltip中附加显示的数据,可选,数字或字符串
"tooltipValues": [
44,
8
],
// 这个字段供超链接类型的下钻使用,在配置下钻时的「绑定超链接的数据字段」处填写url即可。
"url": "sugar.baidu.com"
},
{
"name": "广东",
"coord": [113.429877, 23.334664],
"value": 8659,
"sizeValue": 738,
"type": 1,
"tooltipValues": [
62,
8
],
"url": "sugar.baidu.com"
},
{
"name": "上海",
"value": 8424,
"sizeValue": 851,
"type": 2,
"tooltipValues": [
44,
9
],
"url": "sugar.baidu.com"
},
......
],
// 颜色映射数据的名称,会显示在 tooltip 中
"valueName": "人口",
// 散点大小映射数据的名称,会显示在 tooltip 中
"sizeValueName": "GDP",
// 散点系列映射数据的名称,会显示在 tooltip 中
"typeName": "级别",
// tooltip中附加显示数据的名称,与上面的tooltipValues中的值一一对应
"tooltipNames": [
"面积",
"流动人口"
],
// tooltip中附加显示数据的单位,与上面的tooltipValues中的值一一对应
"tooltipUnits": [
"平方公里",
"人"
]
}
}
多层地图 - 热力层/蜂窝聚合层
API 示例:/openapi/demo/chart?type=heatMap
response:
{
"status": 0, // 0表示成功,非0表示失败
"msg": "", // 失败时的提示信息
"data": {
// mapData字段是一个数组,每项代表一个散点或一个热力区域
"mapData": [
{
// 点的名称。必传,字符串。
// 当没有传递下面的 coord 字段时,系统会根据 name 的值自动匹配经纬度坐标
// 注意,自动匹配经纬度坐标只支持全国省份和城市名称
"name": "北京",
// 地点的经纬度,可选,如果传递了则优先使用经纬度来定位点位置
"coord": [116.41989, 40.189913],
// 热力区域的值,可选,数字类型,会映射为热力区域的渐变颜色。
"value": 7470
},
{
"name": "广东",
"coord": [113.429877, 23.334664],
"value": 8659
},
{
"name": "上海",
},
......
]
}
}
多层地图 - 飞线层
API 示例:/openapi/demo/chart?type=mapLine
response:
{
"status": 0, // 0表示成功,非0表示失败
"msg": "", // 失败时的提示信息
"data": {
// mapData字段是一个数组,每项代表一条飞线
"mapData": [
{
// 飞线的名称。字符串
"name": "线路一",
// 飞线起点到终点的名称。字符串。
// 当没有传递下面的 coords 字段时,系统会根据 locations 的值自动匹配经纬度坐标
// 注意,自动匹配经纬度坐标只支持全国省份和城市名称
"locations": ["北京", "广东"],
// 地点的经纬度,可选,如果传递了则优先使用经纬度来绘制飞线和气泡
"coords": [[116.41989, 40.189913], [113.429877, 23.334664]],
// 飞线的附加取值,可选,数字类型。如果传了,系统会使用这个值来映射飞线和气泡的渐变颜色
"value": 7470,
// 飞线的附加取值,可选,数字类型。如果传了,系统会使用这个值来映射飞线的宽度
"sizeValue": 234,
// tooltip中附加显示的数据,可选,数字或字符串
"tooltipValues": [
44
],
// 这个字段供超链接类型的下钻使用,在配置下钻时的「绑定超链接的数据字段」处填写url即可
"url": "sugar.baidu.com"
},
{
"name": "线路二",
"locations": ["北京", "天津"],
"value": 8659,
"sizeValue": 134,
"tooltipValues": [
62
],
"url": "sugar.baidu.com"
},
{
"name": "线路三",
"locations": ["北京", "上海"],
"value": 8424,
"sizeValue": 235,
"tooltipValues": [
44
],
"url": "sugar.baidu.com"
},
......
],
// 飞线颜色、粗细映射数据的名称,会显示在 tooltip 中
"valueName": "人流量",
"sizeValueName": "次数",
// tooltip中附加显示数据的名称,与上面的tooltipValues中的值一一对应
"tooltipNames": [
"线路长度"
],
// tooltip中附加显示数据的单位,与上面的tooltipValues中的值一一对应
"tooltipUnits": [
"公里"
]
}
}
多层地图 - 路径层
API 示例:/openapi/demo/chart?type=bmapLine&nationLine=1
response:
{
"status": 0, // 0表示成功,非0表示失败
"msg": "", // 失败时的提示信息
"data": {
// trails 字段是一个数组,每一项代表一条路径
"trails": [
{
// 路径通过 途径点的位置信息 在地图上进行绘制
// 途径点位置信息可以通过两种方式提供:locations字段和coords字段
// locations字段中可以包含中国省市名称,系统会根据这个名称自动解析各个途经点的坐标
// coords字段中则直接包含各途经点的坐标
"locations": [
"北京",
"上海"
],
"coords": [
[
120.14322240845,
30.236064370321
],
[
120.14280555506,
30.23633761213
],
[
120.14307598649,
30.236125905084
]
],
// 路径的名称,会在tooltip中显示
"name": "航线1",
// 路径的附加取值,可选,数字类型。如果传了,系统会使用这个值来映射路径和气泡端点的渐变颜色
"value": 12
// 路径的附加取值,可选,数字类型。如果传了,系统会使用这个值来映射路径的宽度
"sizeValue": 213,
// tooltip中附加显示的数据,可选,数字或字符串
"tooltipValues": [
44,
8
],
},
{
"locations": [
"北京",
"大连"
],
"name": "航线3",
"value": 14,
"sizeValue": 212,
"tooltipValues": [
62,
8
],
},
{
"locations": [
"北京",
"南宁"
],
"name": "航线4",
"value": 15,
"sizeValue": 213,
"tooltipValues": [
44,
9
],
},
......
],
// 路径颜色、粗细映射数据的名称,会显示在 tooltip 中
"valueName": "飞机数量",
"sizeValueName": "平均高度",
// tooltip中附加显示数据的名称,与上面的tooltipValues中的值一一对应
"tooltipNames": [
"航班数",
"人流量"
],
// tooltip中附加显示数据的单位,与上面的tooltipValues中的值一一对应
"tooltipUnits": [
"架次",
"人次"
]
}
}
多层地图 - 点聚合层
API 示例:/openapi/demo/chart?type=clusterMap
response:
{
"status": 0, // 0表示成功,非0表示失败
"msg": "", // 失败时的提示信息
"data": {
// mapData字段是一个数组,每项代表一个散点
"mapData": [
{
// 点的名称。必传,字符串。
// 当没有传递下面的 coord 字段时,系统会根据 name 的值自动匹配经纬度坐标
// 注意,自动匹配经纬度坐标只支持全国省份和城市名称
"name": "北京",
// 地点的经纬度,可选,如果传递了则优先使用经纬度来定位点位置
"coord": [116.41989, 40.189913],
// tooltip中附加显示的数据,可选,数字或字符串。
"tooltipValues": [
44,
8
],
// 这个字段供超链接类型的下钻使用,在配置下钻时的「绑定超链接的数据字段」处填写url即可
"url": "sugar.baidu.com"
},
{
"name": "广东",
"coord": [113.429877, 23.334664],
"tooltipValues": [
62,
8
],
"url": "sugar.baidu.com"
},
{
"name": "上海",
"tooltipValues": [
44,
9
],
"url": "sugar.baidu.com"
},
......
],
// tooltip中附加显示数据的名称,与上面的tooltipValues中的值一一对应
"tooltipNames": [
"面积",
"流动人口"
],
// tooltip中附加显示数据的单位,与上面的tooltipValues中的值一一对应
"tooltipUnits": [
"平方公里",
"人"
]
}
}
Sugar BI支持免费试用,欢迎大家前来体验