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 (2)
Hoje, trarei para vocês o formato da API de dados correspondente a outros gráficos:
Mapa de calor de coordenadas
Exemplo de API: /openapi/demo/chart?type=cartHeatmap
resposta:
{
"status": 0,
"msg": "",
"data": {
// y轴类目，字符串数组
"yCategories": [
"Saturday", "Friday", "Thursday", "Wednesday",
"Tuesday", "Monday", "Sunday"
],
// x轴类目，字符串数组
"xCategories": [
"12a", "1a", "2a", "3a", "4a", "5a", "6a",
"7a", "8a", "9a","10a","11a","12p", "1p",
"2p", "3p", "4p", "5p", "6p", "7p", "8p",
"9p", "10p", "11p"
],
// 数据项数组
"data": [
// 第一项对应X轴类目，第二项对应Y轴类目，第三项为数据取值，需为数字
["12a","Saturday",5],
["12a","Friday",7],
["4a","Friday",0],
......
]
}
}
histograma 3D
Exemplo de API: /openapi/demo/chart?type=bar3D
resposta:
{
"status": 0, // 0表示成功，非0表示失败
"msg": "", // 失败时的提示信息
"data": {
// x轴数据，字符串数组
"xCategories": ["苹果", "三星", "华为", "oppo", "vivo", "小米"],
// y轴数据，字符串数组
"yCategories": ["2010", "2011", "2012", "2013", "2014", "2015"],
// 每个系列柱体的数据，数组
"series": [
{
// 系列名称，字符串
"name": "上半年",
// 系列数据，数组，原则上应该对应 xCategories，yCategories的所有组合
"data": [
// 每项数据有三项，分别为：
// X轴：应与 xCategories 内的数据对应
// Y轴：应与 yCategories 内的数据对应
// Z轴：应是数字或有效数字字符串
["苹果", "2010", 100087],
["苹果", "2011", 100079],
......
]
},
{
"name": "下半年",
"data": [
["苹果", "2010", 100079],
["苹果", "2011", 879],
......
]
},
......
]
}
}
Gráfico de dispersão 3D
Exemplo de API: /openapi/demo/chart?type=scatter3D
resposta:
{
"status": 0, // 0表示成功，非0表示失败
"msg": "", // 失败时的提示信息
// data 为一个数组，每行对应散点图中的一个点
"data": [
// 第一项为每个维度的名称
// 顺序为：[X轴，Y轴，Z轴，颜色映射，散点大小映射]
// 如果不需要颜色和大小映射，则只需要[X轴，Y轴，Z轴]
// 如果不需要大小映射，则只需要[X轴，Y轴，Z轴，颜色映射]
// 如果不需要颜色映射，则需要[X轴，Y轴，Z轴，null，散点大小映射]
["国家", "年份", "收入", "平均寿命", "人口"],
// 接下来的项为数据，数据项的列的各种情况与上面名称项的列相对应
// 每个数据的格式要求：
// X轴，Y轴，Z轴：数字或字符串
// 颜色映射：如果需要使用颜色映射散点类别，则传字符串；如果需要使用颜色渐变映射某连续数值维度，则传数字
// 散点大小映射：数字
["Australia", "1800", 815, 34.05, 351014],
["Canada", "1800", 1314, 39, 645526],
.....
]
}
gráfico de pizza 3D
Exemplo de API: /openapi/demo/chart?type=pie3D
resposta:
{
"status": 0, // 0表示成功，非0表示失败
"msg": "", // 失败时的提示信息
"data": {
// 系列，数组，3D饼图只有一个系列
"series": [
{
// 系列名称，字符串
"name": "series1",
// 系列数据，数组
"data": [
{
// 饼图的每个数据项名称，字符串
"name": "A",
// 数值，数字
"value": 10
},
{
"name": "B",
"value": 20,
// 每个数据项都可以单独设置样式
"itemStyle": {
// 这个数据项的图形颜色
"color": "#dd79ff",
// 这个数据项的图形透明度，0到1的范围
"opacity": 0.5
}
}
]
}
]
}
}
gráfico de velas
Exemplo de API: /openapi/demo/chart?type=candlestick
resposta:
{
"status": 0,
"msg": "",
"data": {
"candlestick": [ // K线数据，二维数组
[2320.26, 2320.26, 2287.3, 2362.94], // 某一个K线的点，必须是四项数据，分别表示：开盘价、收盘价、最低价、最高价
[2300, 2291.3, 2288.26, 2308.38],
......
],
"categories": [ // K线图的X轴数据
"2013-01-24",
"2013-01-25",
......
],
"ma": [ // 「移动平均线」，可不传（不传时不展示移动平均线），必须是数组，可展示多条移动平均线
{
"name": "MA5", // 本条移动平均线的名称
"data": [2352.936, 2378.48, ...] // 本条移动平均线的数据
},
......
],
"volume": [ // 成交量数据，可不传（不传时不展示成交量柱图）
23454,
34235,
......
],
"rise": [ // 涨跌额和涨跌幅，可不传，传递后会展示在鼠标hover时的tooltip中，二维数组
[45.23, 0.0367], // 两项数据分别表示涨跌额和涨跌幅，涨跌幅使用小数，示例即表示涨跌额是45.23，涨跌幅是3.67%
......
]
}
}
Diagrama de Sankey
Exemplo de API: /openapi/demo/chart?type=sankey
resposta:
{
"status": 0,
"msg": "",
"data": {
// nodes 字段是一个数组，每项代表一个节点
"nodes": [{
"name": "a" // name 字段，必填，字符串类型，是节点的名称，也是节点的唯一标识
}, {
"name": "b"
}, {
"name": "a1"
}, {
"name": "a2"
},
......
],
// links 字段是一个数组，每项代表一个流
"links": [{
"source": "a", // source 字段：源节点的名称，必填，字符串，需要与 nodes 中的某个节点相对应
"target": "a1", // target 字段：目的节点的名称，必填，字符串，需要与 nodes 中的某个节点相对应
"value": 5 // value 字段：流的大小，必填，数字类型
}, {
"source": "a",
"target": "a2",
"value": 3
},
....
]
}
}
gráfico de cascata
Exemplo de API: /openapi/demo/chart?type=waterfall
resposta:
{
// 0表示成功，非0表示失败
"status": 0,
// 失败时的提示信息
"msg": "",
"data": {
// X轴数据，字符串数组
"categories": [
"2022-05-01",
"2022-05-02",
....
],
// 系列，数组
"series": [
{
// 系列名称，字符串
"name": "账单",
// 系列数据，数组
"data": [
{
// 显示在X轴的数据项名称，字符串
"name": "2022-05-01",
// 数值，数字
"value": 29
},
{
"name": "2022-05-02",
"value": -58,
// 每个数据项都可以单独设置样式
"itemStyle": {
// 这个数据项的柱体颜色
"color": "#dd79ff",
// 这个数据项的柱体透明度，0到1的范围
"opacity": 0.5
}
},
....
]
}
]
}
}
gráfico de Gantt
Exemplo de API: /openapi/demo/chart?type=gantt
resposta:
{
// 0表示成功，非0表示失败
"status": 0,
// 失败时的提示信息
"msg": "",
"data": {
// Y轴数据，字符串数组
"categories": [
"任务1",
"任务2",
....
],
// 系列，数组
"series": [
{
// 系列名称，字符串
"name": "完成进度",
// 系列数据，数组
"data": [
{
// 显示在Y轴的数据项名称，字符串
"name": "任务1",
// 完成进度数值，小数，0到1范围内
"value": 0.2
},
{
"name": "任务2",
"value": 1,
// 每个数据项都可以单独设置样式
"itemStyle": {
// 这个数据项的柱体颜色
"color": "#dd79ff"
}
},
....
]
}
]
}
}
Indicadores principais
Exemplo de API: /openapi/demo/chart?type=summary
resposta:
{
"status": 0, // 0表示成功，非0表示失败
"msg": "", // 失败时的提示信息
"data": [
{
"name": "访问量", // 指标名称
"desc": "访问量是指页面被访问的次数", // 指标描述，可不传
"unit": "", // 单位，可以不传
"value": 17480134, // 指标取值
"rate": 3.34, // 涨跌率，如果不需要也可不传
"rate_level": "green", // 指标飘红还是飘绿，也可以自定义，取值可以是red、green、custom可不传
"color": "#f05050", // rate_level是custom时，此字段生效，可以自定义飘红飘绿的颜色
"rate_tip": "周环比", // 对涨跌率的说明，可不传
"rate2": 14.5, // 第二个涨跌率，如果不需要也可不传
"rate2_level": "green", // 第二个涨跌率字体展示的颜色，可以是green、red，可不传
"rate2_tip": "日环比" , // 对第二个涨跌率的说明，可不传
"url": "http://www.baidu.com" // 这个字段供超链接类型的下钻使用，在配置下钻时的「绑定超链接的数据字段」处填写url即可
},
....
];
}
Em relação à taxa de crescimento, o Sugar BI agora suporta 2 taxas de crescimento diferentes, como dia a dia e semana a semana. O usuário não precisa fazer upload ou não fazer upload, e também pode fazer upload de um conteúdo.
Indicador Kanban
Exemplo de API: /openapi/demo/chart?type=indicator
resposta:
{
"status": 0, // 0表示成功，非0表示失败
"msg": "", // 失败时的提示信息
"data": [
{
"dimValue": "东北", // 主维度取值
"dimSubValue": "哈尔滨", // 副维度取值，可不传
"indicators": [
{
"name": "访问量", // 主指标名称
"desc": "访问量是指页面被访问的次数", // 指标描述，可不传
"unit": "", // 单位，可以不传
"value": 5, // 主指标取值
"rate": 66.67, // 涨跌率，如果不需要也可不传
"rate_tip": "环比", // 对涨跌率的说明，可不传
"rate_level": "custom", // 指标飘红还是飘绿，也可以自定义，取值可以是red、green、custom，可不传
"color": "#f05050", // rate_level是custom时，此字段生效，可以自定义飘红飘绿的颜色。如果是red、green，不需要传
"rate2": 14.5, // 第二个涨跌率，如果不需要也可不传
"rate2_level": "green", // 第二个涨跌率字体展示的颜色，可以是green、red，可不传
"rate2_tip": "月同比", // 对第二个涨跌率的说明，可不传
"url": "http://www.baidu.com" // 这个字段供超链接类型的下钻使用，在配置下钻时的「绑定超链接的数据字段」处填写url即可
"hideAlias": true // 隐藏指标名称，可不传
},
{
"name": "销售额", // 次要指标名称
"value": "388" // 次要指标取值
},
{
"name": "成本", // 次要指标名称
"value": "330" // 次要指标取值
}
]
},
....
];
}
Número flop, indicador de porcentagem
Exemplo de API: /openapi/demo/chart?type=flipNumber
resposta:
{
"status": 0,
"msg": "",
"data": 1201035.2990482938
}
Entre os melhores
Exemplo de API: /openapi/demo/chart?type=ranking
resposta:
{
"status": 0, // 0表示成功，非0表示失败
"msg": "", // 失败时的提示信息
"data": {
"columns": [ // 定义排行榜的各个列
// 第一列需要是维度列
{
"name": "维度列", // 显示的表头
"id": "key1", // 该列绑定的数据字段名称
"unit": "", // 单位，可以不传
"textAlign": "left", // 列中文字的对齐方式，left、right、center, 可不传
"headerBgColor": "#333", // 该列表头的背景色，可不传
"bgColor": "#333", // 该列的背景色，可不传
"width": "200px", // 列宽度，可不传，默认为自适应，可传：100px、25%之类
"remark": "字段说明" // 对该列的备注说明，一般不需要配置，配置后会在该列的表头上展示一个小问号（鼠标悬停时展示该备注的具体信息）
},
// 第二列是主要指标列，作为排行榜排序的依据
{
"name": "主指标列", // 显示的表头
"id": "key2", // 该列绑定的数据字段名称
"unit": "%", // 单位，可以不传
"textAlign": "left", // 列中文字的对齐方式，left、right、center, 可不传
"headerBgColor": "#333", // 该列表头的背景色，可不传
"bgColor": "#333", // 该列的背景色，可不传
"width": "", // 列宽度，可不传，默认为自适应，可传：100px、25%之类
"remark": "字段说明" // 对该列的备注说明，一般不需要配置，配置后会在该列的表头上展示一个小问号（鼠标悬停时展示该备注的具体信息）
},
// 其余是次要指标列
......
],
"rows": [ // 表格各行的数据
{
"key1": "东北", // key和columns中的id一一对应
"key2": 12233,
},
{
"key1": "西北", // key和columns中的id一一对应
"key2": 12312,
},
......
]
}
}
painel
Exemplo de API: /openapi/demo/chart?type=gauge
resposta:
{
"status": 0, // 0表示成功，非0表示失败
"msg": "", // 失败时的提示信息
"data": {
"max": 100, // 最大值，可不传，默认为100
"min": 0, // 最小值，可不传，默认为0
"name": "完成率",
"unit": "%", // 单位，可不传
"value": 89.1 // 具体取值
}
}
barra de progresso, barra de progresso circular
Exemplo de API: /openapi/demo/chart?type=progressBar
resposta:
{
"status": 0,
"msg": "",
"data": 19.14602833247916
}
ilustração de pólo aquático
Exemplo de API: /openapi/demo/chart?type=progressBar
resposta:
{
"status": 0,
"msg": "",
"data": 19
}
Por exemplo, se os dados retornarem 19, 19% será exibido no gráfico de pólo aquático.
Mapa plano (cor, bolhas, calor)
Exemplo de API: /openapi/demo/chart?type=map
resposta:
{
"status": 0, // 0表示成功，非0表示失败
"msg": "", // 失败时的提示信息
"data": {
// mapData字段是一个数组，每项代表一个气泡、一个区域、一个热力点
"mapData": [
{
// 气泡、区域、热力点的名称。必传，字符串。
// 当没有传递下面的 coord 字段时，系统会根据 name 的值自动匹配经纬度坐标
// 注意，自动匹配经纬度坐标只支持全国省份和城市名称
"name": "北京",
// 地点的经纬度，可选，如果传递了则优先使用经纬度来定位气泡、区域、热力点
"coord": [116.41989, 40.189913],
// 颜色映射字段，气泡图和热力选填，色彩必填
"value": 7470,
// 气泡大小映射(选填)。 区域和热力无效
"sizeValue": 234,
// 气泡形状系列 (选填)，可枚举类型的数值或者字符串。区域和热力无效
"type": 1,
// tooltip中附加显示的数据，可选，数字或字符串。对热力图无效
"tooltipValues": [
44,
8
],
// 这个字段供超链接类型的下钻使用，在配置下钻时的「绑定超链接的数据字段」处填写url即可，对热力图无效
"url": "sugar.baidu.com"
},
{
"name": "广东",
"coord": [113.429877, 23.334664],
"value": 8659,
"sizeValue": 214,
"type": 1,
"tooltipValues": [
62,
8
],
"url": "sugar.baidu.com"
},
{
"name": "上海",
"value": 8424,
"sizeValue": 134,
"type": 4,
"tooltipValues": [
44,
9
],
"url": "sugar.baidu.com"
},
......
],
// 颜色、大小、系列映射数据的名称，会显示在 tooltip 中
"valueName": "人口",
"sizeValueName": "GDP",
"typeName": "级别",
// tooltip中附加显示数据的名称，与上面的tooltipValues中的值一一对应
"tooltipNames": [
"面积",
"流动人口"
],
// tooltip中附加显示数据的单位，与上面的tooltipValues中的值一一对应
"tooltipUnits": [
"平方公里",
"人"
]
}
}
Diagrama de linha de mosca de mapa plano
Exemplo de API: /openapi/demo/chart?type=mapLine
resposta:
{
"status": 0, // 0表示成功，非0表示失败
"msg": "", // 失败时的提示信息
"data": {
// mapData字段是一个数组，每项代表一条飞线
"mapData": [
{
// 飞线的名称。字符串
"name": "线路一",
// 飞线起点到终点的名称。字符串。会在气泡图的tooltip中显示
// 当没有传递下面的 coords 字段时，系统会根据 locations 的值自动匹配经纬度坐标
// 注意，自动匹配经纬度坐标只支持全国省份和城市名称
"locations": ["北京", "广东"],
// 地点的经纬度，可选，如果传递了则优先使用经纬度来绘制飞线和气泡
"coords": [[116.41989, 40.189913], [113.429877, 23.334664]],
// 飞线的附加取值，可选，数字类型。如果传了，系统会使用这个值来映射飞线和气泡的渐变颜色
"value": 7470,
// 飞线的附加取值，可选，数字类型。如果传了，系统会使用这个值来映射飞线的宽度
"sizeValue": 234,
// tooltip中附加显示的数据，可选，数字或字符串
"tooltipValues": [
44,
8
],
// 这个字段供超链接类型的下钻使用，在配置下钻时的「绑定超链接的数据字段」处填写url即可
"url": "sugar.baidu.com"
},
{
"name": "线路二",
"locations": ["北京", "天津"],
"value": 8659,
"sizeValue": 134,
"tooltipValues": [
62,
8
],
"url": "sugar.baidu.com"
},
{
"name": "线路三",
"locations": ["北京", "上海"],
"value": 8424,
"sizeValue": 235,
"tooltipValues": [
44,
9
],
"url": "sugar.baidu.com"
},
......
],
// 飞线颜色、粗细映射数据的名称，会显示在 tooltip 中
"valueName": "人流量",
"sizeValueName": "次数",
// tooltip中附加显示数据的名称，与上面的tooltipValues中的值一一对应
"tooltipNames": [
"线路长度"
],
// tooltip中附加显示数据的单位，与上面的tooltipValues中的值一一对应
"tooltipUnits": [
"公里"
]
}
}
Mapa Baidu (espalhado, calor)
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": 12,
// 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": 3,
"tooltipValues": [
44,
9
],
"url": "sugar.baidu.com"
},
......
],
// 颜色映射数据的名称，会显示在 tooltip 中
"valueName": "人口",
// 散点大小映射数据的名称，会显示在 tooltip 中
"sizeValueName": "GDP",
// 散点系列映射数据的名称，会显示在 tooltip 中
"typeName": "级别",
// tooltip中附加显示数据的名称，与上面的tooltipValues中的值一一对应
"tooltipNames": [
"面积",
"流动人口"
],
// tooltip中附加显示数据的单位，与上面的tooltipValues中的值一一对应
"tooltipUnits": [
"平方公里",
"人"
]
}
}
Mapa Baidu (rota, linha voadora)
Exemplo de API de roteiro: /openapi/demo/chart?type=bmapLine
Exemplo de API de gráfico de linhas voadoras: /openapi/demo/chart?type=bmapLine&cityLine=1
resposta:
{
"status": 0, // 0表示成功，非0表示失败
"msg": "", // 失败时的提示信息
"data": {
// trails 字段是一个数组，每一项代表一条飞线/路径
"trails": [
{
// 飞线/路径通过 途径点的位置信息 在地图上进行绘制
// 飞线只需要提供起点和终点的位置信息，路径需要提供所有途经点的位置信息
// 途径点位置信息可以通过两种方式提供：locations字段和coords字段
// locations字段中可以包含中国省市名称，系统会根据这个名称自动解析各个途经点的坐标
// coords字段中则直接包含各途经点的gps坐标
"locations": [
"北京",
"上海"
],
"coords": [
[
120.14322240845,
30.236064370321
],
[
120.14280555506,
30.23633761213
],
[
120.14307598649,
30.236125905084
]
],
// 飞线/路径的名称，会在tooltip中显示
"name": "航线1",
// 路径的附加取值，可选，数字类型。如果传了，系统会使用这个值来映射路径和气泡端点的渐变颜色
"value": 12,
// 路径的附加取值，可选，数字类型。如果传了，系统会使用这个值来映射路径的宽度
"sizeValue": 213
},
{
"locations": [
"北京",
"大连"
],
"name": "航线3",
"value": 14,
"sizeValue": 212
},
{
"locations": [
"北京",
"南宁"
],
"name": "航线4",
"value": 15,
"sizeValue": 213
},
......
],
// 路径颜色、粗细映射数据的名称，会显示在 tooltip 中
"valueName": "飞机数量",
"sizeValueName": "平均高度",
// tooltip中附加显示数据的名称，与上面的tooltipValues中的值一一对应
"tooltipNames": [
"航班数",
"人流量"
],
// tooltip中附加显示数据的单位，与上面的tooltipValues中的值一一对应
"tooltipUnits": [
"架次",
"人次"
]
}
}
Sugar BI suporta avaliação gratuita , bem-vindo à experiência