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

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

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

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

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

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

嵌套饼图

API 示例:/openapi/demo/chart?type=pieNested

response:


{
  "status": 0,  // 0表示成功,非0表示失败
  "msg": "",    // 失败时的提示信息
  "data": [
    [  // 内层的饼图数据
      {
        "name": "chrome",
        "value": 46
      },
      {
        "name": "ie",
        "value": 32
      },
      {
        "name": "fireFox",
        "value": 36
      },
      ......
    ],
    [ // 外层的环形饼图数据
      // 注意外层子扇区的顺序需要与内层母扇区的顺序进行对应
      // 例如这里子扇区也是按照 chrome, ie, firefox 的顺序排列的
      {
        "name": "chrome49",
        "value": 14
      },
      {
        "name": "chrome50",
        "value": 32
      },
      {
        "name": "IE10",
        "value": 10
      },
      {
        "name": "IE11",
        "value": 22
      },
      {
        "name": "fireFox62",
        "value": 20
      },
      {
        "name": "fireFox65",
        "value": 6
      },
      ......
    ]
  ]
}

漏斗图

API 示例:/openapi/demo/chart?type=funnel

response:

扫描二维码关注公众号,回复: 15967510 查看本文章

{
  "status": 0,  // 0表示成功,非0表示失败
  "msg": "",    // 失败时的提示信息
  "data": {
    "unit": "%",       // 单位,可以不传
    "data": [
      {
        "name": "首页",
        "value": 12323,
        "url": "www.baidu.com" // 这个字段供超链接类型的下钻使用,在配置下钻时的「绑定超链接的数据字段」处填写url即可
      },
      {
        "name": "首页->列表页",
        "value": 23457,
        "url": "www.baidu.com"
      },
      {
        "name": "首页->列表页->下单页",
        "value": 23457,
        "url": "www.baidu.com"
      },
      ......
    ]
  }
}

字符云

API 示例:/openapi/demo/chart?type=wordCloud

response:


{
  "status": 0,  // 0表示成功,非0表示失败
  "msg": "",    // 失败时的提示信息
  "data": [
    {
      "name": "热词1",
      "value": 46,
      "url": "www.baidu.com" // 这个字段供超链接类型的下钻使用,在配置下钻时的「绑定超链接的数据字段」处填写url即可
    },
    {
      "name": "热词2",
      "value": 32,
      "url": "www.baidu.com"
    },
    {
      "name": "热词3",
      "value": 16,
      "url": "www.baidu.com"
    },
    {
      "name": "热词4",
      "value": 15,
      "url": "www.baidu.com"
    },
    ......
  ]
}

雷达图

API 示例:/openapi/demo/chart?type=radar

response:


{
  "status": 0,  // 0表示成功,非0表示失败
  "msg": "",    // 失败时的提示信息
  "data": {
    indicators:[
      {
        "text": "顶点1",  // 顶点展示的文字
        "max": 10,       // 该顶点的最大值
        "min": 0         // 该顶点的最小值,可不传,默认为0
      },
      {
        "text": "顶点2",  // 顶点展示的文字
        "max": 20,       // 该顶点的最大值
        "min": 5         // 该顶点的最小值,可不传,默认为0
      },
      {
        "text": "顶点3",  // 顶点展示的文字
        "max": 10,       // 该顶点的最大值
        "min": 2         // 该顶点的最小值,可不传,默认为0
      },
      ......
    ],
    "series": [
      {
        "name": "预算开支",
        "value": [8, 18, 9, ...] // 数组元素个数和indicators相同
      },
      {
        "name": "实际开销",
        "value": [9, 15, 7, ...] // 数组元素个数和indicators相同
      },
      ......
    ]
  }
}

里程碑

API 示例:/openapi/demo/chart?type=milestones

支持以下 3 种类型:

1.1 个日期维度,1 个非日期维度

response:


{ "status": 0, // 0表示成功,非0表示失败
  "msg": "",
  "data": {
    "date": { // 日期维度描述
      "name": "date",
      "alias": "发货日期"
    },
    "x2": [ // 非日期维度描述
      {
        "name": "x2",
        "alias": "地区"
      }
    ],
    "y": [], // 指标度量描述
    "data": [
      {
        "date": "2013年",
        "date_sugar_origin": 2013,
        "date_sugar_date_type": "YEAR",
        "x2": [
          "东北",
          "中南",
          "华东",
          "华北",
          "西北",
          "西南"
        ]
      },
      ...
      {
        "date": "2017年",
        "date_sugar_origin": 2017,
        "date_sugar_date_type": "YEAR",
        "x2": [
          "东北",
          "中南"
        ]
      }
    ]
  }
}

2.1 个日期维度,1 个非日期维度,1 个指标

response:


{
  "status": 0, // 0表示成功,非0表示失败
  "msg": "",
  "data": {
    "date": {
      "name": "date",
      "alias": "年份" // 日期维度名称
    },
    "x2": [
      {
        "name": "x2",
        "alias": "地区" // 非日期维度名称
      }
    ],
    "y": [
      {
        "name": "y",
        "alias": "销售额", // 指标字段名称
        "unit": "元" // 指标字段单位
      }
    ],
    "data": [
      {
        "date": "2013年",
        "x2": ["东北", "中南", "华东", "华北", "西北", "西南"],
        "y": [9322, 9050, 1579, 7942, 5072, 8310]
      },
      {
        "date": "2014年",
        "x2": ["东北","中南","华东","华北","西北","西南"],
        "y": [6513, 1731, 8109, 2547, 6470, 699]
      },
      ...
    ]
  }
}

3. 1 个日期维度,1-3 个指标

response:


{
  "status": 0, // 0表示成功,非0表示失败
  "msg": "",
  "data": {
    {
      "date": { // 日期维度描述
        "name": "date",
        "alias": "发货日期"
      },
      "x2": [], // 非日期维度描述
      "y": [ // 指标度量描述
        {
          "name": "y",
          "alias": "数量",
          "unit": "个", // 单位
          "dataFormat": "" // 格式化
        },
        {
          "name": "y",
          "alias": "销售额",
          "unit": "", // 单位
          "dataFormat": "percent" // 格式化
        },
        {
          "name": "y",
          "alias": "成本",
          "unit": "", // 单位
          "dataFormat": "" // 格式化
        }
      ],
      "data": [
        {
          "date": "2013年",
          "y": [
            598,
            293175,
            256095
          ]
        },
        ...
        {
          "date": "2017年",
          "y": [
            19,
            16584,
            8950
          ]
        }
      ]
    }
  }
}

旭日图

API 示例:/openapi/demo/chart?type=sunburst

response:


{
    "status": 0,
    "msg": "",
    // data是一个数组,表示了一个树状结构
    "data": [
      {
        // 每个节点必须有name属性,其值为字符串
        "name": "Fruity",
        // 非叶子节点必须有children字段,其值为包含其子节点的数组,不需要有value字段
        "children": [
          {
            "name": "Berry",
            "children": [
              {
                "name": "Blackberry",
                // 叶子节点必须有value字段,其值为数字
                "value": 1,
              },
              {
                "name": "Raspberry",
                "value": 1,
              }
            ]
        }]
      },
      {
        "name": "Sour/
Fermented",
        "children": [
          {
            "name": "Sour",
            "children": [
              {
                "name": "Sour Aromatics",
                "value": 1,
              },
              {
                "name": "Acetic Acid",
                "value": 1,
              }
            ]
          }
        ]
      },
      ......
    ]
}

矩形树图

API 示例:/openapi/demo/chart?type=treemap

response:


{
    "status": 0,
    "msg": "",
    // data是一个数组,表示了一个树状结构
    "data": [
      {
        // 每个节点必须有name属性,其值为字符串
        "name": "Fruity",
        // 非叶子节点必须有children字段,其值为包含其子节点的数组,不需要有value字段
        "children": [
          {
            "name": "Berry",
            "children": [
              {
                "name": "Blackberry",
                // 叶子节点必须有value字段,其值为数字
                "value": 1,
              },
              {
                "name": "Raspberry",
                "value": 1,
              }
            ]
        }]
      },
      {
        "name": "Sour/Fermented",
        "children": [
          {
            "name": "Sour",
            "children": [
              {
                "name": "Sour Aromatics",
                "value": 1,
              },
              {
                "name": "Acetic Acid",
                "value": 1,
              }
            ]
          }
        ]
      },
      ......
    ]
}

气泡图

API 示例:/openapi/demo/chart?type=bubble

response:


{
  "status": 0,  // 0表示成功,非0表示失败
  "msg": "",    // 失败时的提示信息
  "data": [
    {
      "name": "热词1",
      "value": 46,
      "cat": "cat1",            // 气泡所属的类别,不同类别的气泡颜色不同,若不传,则用name作为气泡名称
      "url": "www.baidu.com" // 这个字段供超链接类型的下钻使用,在配置下钻时的「绑定超链接的数据字段」处填写url即可
    },
    {
      "name": "热词2",
      "value": 32,
      "cat": "cat1",
      "url": "www.baidu.com"
    },
    {
      "name": "热词3",
      "value": 16,
      "cat": "cat2",
      "url": "www.baidu.com"
    },
    {
      "name": "热词4",
      "value": 15,
      "cat": "cat2",
      "url": "www.baidu.com"
    },
    ......
  ]
}

拓扑图

API 示例:/openapi/demo/chart?type=topology

response:


{
  "status": 0,
  "msg": "",
  "data": {
    "nodes": [ //表示各个节点
      {
        "id": "node1",  //结点的id, 用于唯一标识1个节点,必传
        "title": "node1Title", //节点的标题,可不填,
        "data": [       //节点主体的数据,可用数组表示,数组每一项会分行。
          "hello",
          "<button>world</button>"
        ],  //data数据也可不填,但title和data最好保留至少1个, 当然数据也可以写为html的内容
        "tooltip": "hi, 我是tooltip" //字符串格式的tooltip
      },
      {
        "id": "node2",  //结点的id, 用于唯一标识1个节点,必传
        "title": "node2Title", //节点的标题,可不填
        "data": "hello, world", //data字段为字符串表示只占1行数据
        "fontColor": "#ff0000", //自定义的字体颜色,可不传
        "bgColor": "bgColor", //自定义的背景颜色,可不传
        "tooltip": ["hi", "我是tooltip"] //数组格式的tooltip
      },
      ...
    ],
    "links": [
      {
        "source": "node1",  // 表示从id为`node1`的结点出发,必传
        "target": "node2",  // 表示到id为`node2`的结点结束,必传
        "text": "15%",      // 折线上的数据,可不传
        "tooltip": ["hi", "我是tooltip"] //数组格式的tooltip
      },
      {
        "source": "node1",  // 表示从id为`node1`的结点出发,必传
        "target": "node3",  // 表示到id为`node3`的结点结束,必传
        "text": "15%",      // 折线上的数据,可不传
        "tooltip": "hi, 我是tooltip" //字符串格式的tooltip
      },
      ...
    ]
  }
}

河流图

API 示例:/openapi/demo/chart?type=river

response:


{
    "status": 0,
    "msg": "",
    "data": {
        // legend 字段必填,代表一共有几个系列
        "legend": ["华为", "联想", "微星", "宏基", "戴尔", "惠普"],
        // data 字段是一个二维数组,每个子数组必须有三项:
        // 0:用于横轴的序列。以 - 或 / 分隔的日期,以 : 分隔的时间,符合前面格式要求的日期时间组合,数字
        // 1:数据的大小。数字或有效的数字字符串
        // 2:数据属于哪个系列,需要与 legend 中的字段对应
        "data": [
          ["2015/11/08",10,"华为"],["2015/11/09",15,"华为"],["2015/11/10",35,"华为"],
          ["2015/11/08",35,"联想"],["2015/11/09",36,"联想"],["2015/11/10",37,"联想"],
          ["2015/11/08",21,"微星"],["2015/11/09",25,"微星"],["2015/11/10",27,"微星"],
          ["2015/11/08",10,"宏基"],["2015/11/09",15,"宏基"],["2015/11/10",35,"宏基"],
          ["2015/11/08",10,"戴尔"],["2015/11/09",15,"戴尔"],["2015/11/10",35,"戴尔"],
          ["2015/11/08",10,"惠普"],["2015/11/09",15,"惠普"],["2015/11/10",35,"惠普"]
          .....
        ]
    }
}

日历热力图

API 示例:/openapi/demo/chart?type=calHmap

response:


{
    "status": 0,
    "msg": "",
    "data": [
      // 每一项都是一个数组,代表某天的数据,数据可以不按日期顺序返回
      // 第一个元素是日期,格式要求yyyy-mm-dd
      // 第二个元素是取值,要求是数字或有效的数字字符串
      ["2020-02-10", 186],
      ["2020-02-10", 877],
      ......
    ]
}

Sugar BI支持免费试用,欢迎大家前来体验

猜你喜欢

转载自blog.csdn.net/Foolforuuu/article/details/130206872