可视化图表API格式要求有哪些?Sugar BI详细代码示例(4)

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值