当前位置： 首页 > news >正文

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

news 2025/8/3 0:47:23

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

http://www.lryc.cn/news/66815.html

相关文章：

  • 学习vue（可与知乎合并）
  • 【UEFI实战】Linux下如何解析ACPI表
  • Java-Redis持久化之RDB操作
  • 信号signal编程测试
  • Linux学习记录——이십삼 进程信号（2）
  • Revit中如何创建曲面嵌板及一键成板
  • STM32F4_DHT11数字温湿度传感器
  • WiFi（Wireless Fidelity）基础（十一）
  • 操作系统—— 精髓与设计原理--期末复习
  • 每天一道算法练习题--Day21 第一章 --算法专题 --- ----------位运算
  • D1. LuoTianyi and the Floating Islands (Easy Version)(树形dp)
  • rk3588移植ubuntu server
  • 如何更好地刷力扣
  • 上采样和下采样
  • 小猪，信息论与我们的生活
  • 【鸿蒙应用ArkTS开发系列】- http网络库使用讲解和封装
  • 【Java零基础入门篇】第 ⑥ 期 - 异常处理
  • 计算职工工资
  • 2019年上半年软件设计师下午试题
  • IS200TPROH1BCB用于工业应用和电力分配等。高压型隔离开关用于变电站
  • 【MySql】数据库 select 进阶
  • CVPR 2023 | VoxelNeXt实现全稀疏3D检测跟踪，还能结合Seg Anything
  • 本地使用3台centos7虚拟机搭建K8S集群教程
  • NVIDIA CUDA驱动安装
  • python 从excel中获取需要执行的用例
  • Web3中文｜乱花渐欲meme人眼，BRC-20总市值逼近10亿美元
  • 盖雅案例入选「首届人力资源服务国际贸易交流合作大会20项创新经验」
  • [论文笔记]SimMIM:a Simple Framework for Masked Image Modeling
  • mysql从零开始（4）----索引/视图/范式
  • Flutter框架：从入门到实战，构建跨平台移动应用的全流程解析