Sugar BI中的每个图表可以对应一个数据 API，用户浏览报表时，选定一定的过滤条件，点击「查询」按钮将会通过 API 拉取相应的数据；前面说过，为了确保用户数据的安全性，Sugar BI上的所有数据请求都在Sugar BI的后端通过 curl 的方式访问产品线的 API，都是使用的POST请求。

POST 的数据是过滤条件、下钻、联动参数等，并且在请求的 Header 中会附加Sugar-Token.

Sugar BI支持多种类型的展示图表，每种类型的图表所需要的后端 API 返回的数据格式都有所区别，之前已经发布了

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

今天，为大家带来其他图表所对应的数据 API 格式：

坐标热力图

API 示例：/openapi/demo/chart?type=cartHeatmap

response：

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

3D 柱状图

API 示例：/openapi/demo/chart?type=bar3D

response：

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

3D 散点图

API 示例：/openapi/demo/chart?type=scatter3D

response：

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

3D 饼图

API 示例：/openapi/demo/chart?type=pie3D

response：

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

K 线图

API 示例：/openapi/demo/chart?type=candlestick

response：

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

桑基图

API 示例：/openapi/demo/chart?type=sankey

response：

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

瀑布图

API 示例：/openapi/demo/chart?type=waterfall

response：

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

甘特图

API 示例：/openapi/demo/chart?type=gantt

response：

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

核心指标

API 示例：/openapi/demo/chart?type=summary

response：

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

关于增长率这一项，Sugar BI 现支持 2 项不同的增长率，例如 日环比 和 周环比。用户不需要也可都不传，也可传一项内容。

指标看板

API 示例：/openapi/demo/chart?type=indicator

response：

{
  "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"  // 次要指标取值
        }
      ]
    },
    ....
  ];
}

数字翻牌器、百分比指标

API 示例：/openapi/demo/chart?type=flipNumber

response：

{
  "status": 0,
  "msg": "",
  "data": 1201035.2990482938
}

排行榜

API 示例：/openapi/demo/chart?type=ranking

response：

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

仪表盘

API 示例：/openapi/demo/chart?type=gauge

response：

{
  "status": 0,  // 0表示成功，非0表示失败
  "msg": "",    // 失败时的提示信息
  "data": {
    "max": 100,      // 最大值，可不传，默认为100
    "min": 0,        // 最小值，可不传，默认为0
    "name": "完成率",
    "unit": "%",     // 单位，可不传
    "value": 89.1    // 具体取值
  }
}

进度条、环形进度条

API 示例：/openapi/demo/chart?type=progressBar

response：

{
  "status": 0,
  "msg": "",
  "data": 19.14602833247916
}

水球图

API 示例：/openapi/demo/chart?type=progressBar

response：

{
  "status": 0,
  "msg": "",
  "data": 19
}

例如 data 返回 19，水球图中就会显示 19%。

平面地图(色彩、气泡、热力)

API 示例：/openapi/demo/chart?type=map

response：

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

平面地图飞线图

API 示例：/openapi/demo/chart?type=mapLine

response：

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

百度地图(散点、热力)

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

百度地图(路径、飞线)

路径图 API 示例：/openapi/demo/chart?type=bmapLine

飞线图 API 示例：/openapi/demo/chart?type=bmapLine&cityLine=1

response：

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