Quais são os requisitos de formato da API Visual Chart? Exemplo de código detalhado do Sugar BI (4)

News 2023-07-30 04:37:23 views: null

Cada gráfico no Sugar BI pode corresponder a uma API de dados. Quando o usuário navegar no relatório, selecione determinadas condições de filtro e clique no botão "Consultar" para obter os dados correspondentes por meio da API; conforme mencionado anteriormente, para garantir a segurança do dados do usuário Todas as solicitações de dados no Sugar BI acessam a API da linha de produtos por meio de curl no back-end do Sugar BI, todos usando solicitações POST.

Os dados do POST são condições de filtro, drill-down, parâmetros de ligação, etc., e o Sugar-Token será anexado ao cabeçalho da requisição.

O Sugar BI suporta vários tipos de gráficos de exibição, e o formato de dados retornado pela API de back-end exigido por cada tipo de gráfico é diferente. Ele foi lançado antes.

Quais são os requisitos de formato da API Visual Chart? Exemplo de código detalhado do Sugar BI (1)

Quais são os requisitos de formato da API Visual Chart? Exemplo de código detalhado do Sugar BI (2)

Quais são os requisitos de formato da API Visual Chart? Exemplo de código detalhado do Sugar BI (3)

Hoje, trarei para vocês o formato da API de dados correspondente a outros gráficos:

Mapa de cores da área 3D

Exemplo de API: /openapi/demo/chart?type=map3DArea

resposta


{
  "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": [
        "平方公里",
        "人"
    ]
  }
}

mapa colunar 3D

Exemplo de API: /openapi/demo/chart?type=map3DBar

resposta:


{
  "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": [
        "平方公里",
        "人"
    ]
  }
}

 

texto, letreiro

Exemplo de API: /openapi/demo/chart?type=simpleText

resposta:


{
  "status": 0,
  "msg": "",
  "data": "这里就是文本的展示内容"
}

 

texto rico

Exemplo de API: /openapi/demo/chart?type=text

resposta:


{
  "status": 0,
  "msg": ,
  "data": {
    "name": "百度",
    "dau": 999999999,
    "mau": 1000000000,
    "link": "https://www.badiu.com"
  }
}

 Usando a API de exemplo para vincular dados rich text, você pode mostrar os seguintes efeitos:

 

 

Carrossel de imagens

Exemplo de API: /openapi/demo/chart?type=slider

resposta:


{
    "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"
      },
      ...
    ]
}

 

Vídeo/Ao vivo

Exemplo de API: /openapi/demo/chart?type=video

resposta:


{
    "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"
    }
}

 

Mapa multicamadas - Camadas de cores regionais

Exemplo de API: /openapi/demo/chart?type=map

resposta:


{
  "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": [
        "平方公里",
        "人"
    ]
  }
}

Mapa Multicamadas - Camada de Dispersão

Exemplo de API: /openapi/demo/chart?type=bmapScatter

resposta:


{
  "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": [
        "平方公里",
        "人"
    ]
  }
}

 

Mapas multicamadas - Camadas térmicas / Camadas de agregação celular

Exemplo de API: /openapi/demo/chart?type=heatMap

resposta:


{
  "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": "上海",
      },
      ......
    ]
  }
}

 

Mapas Multicamadas - Camadas Flyline

Exemplo de API: /openapi/demo/chart?type=mapLine

resposta:


{
  "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": [
        "公里"
    ]
  }
}

 

Mapa Multicamadas - Camada de Caminho

Exemplo de API: /openapi/demo/chart?type=bmapLine&nationLine=1

resposta:


{
  "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": [
        "架次",
        "人次"
    ]
  }
}

 

Mapa Multicamadas - Camada de Agregação de Pontos

Exemplo de API: /openapi/demo/chart?type=clusterMap

resposta:


{
  "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 suporta avaliação gratuita , bem-vindo à experiência

Acho que você gosta

Origin blog.csdn.net/Foolforuuu/article/details/130643172
Recomendado
Clasificación
Diario
Más
2024-06-15(0)
2024-06-14(0)
2024-06-13(0)
2024-06-12(0)
2024-06-11(0)
2024-06-10(0)
2024-06-09(0)
2024-06-08(0)
2024-06-07(0)
2024-06-06(0)

Code World

© 2018 codetd.com