图表统计数据标准

2021-06-30 by uino 138 编码规范

作者:雷庭

1. API数据结构,其中“data”对象为下述各类图表数据

{
	"success": true,
	"code": 200,
	"message": "",
	"data": {
            图表统计数据
	},
	"version": "v1"
}

2. 各类图表数据说明

2.1 对象类数据

对象类数据使用{key:value}形式表达的数据

  • name:被描述对象的种类名称
  • value:被描述对象的值 这类数据一般用于饼图、环状图、雷达图、玫瑰图

样例一:

{
    data:[
        {value: 1048, name: '搜索引擎'},
        {value: 735, name: '直接访问'},
        {value: 580, name: '邮件营销'},
        {value: 484, name: '联盟广告'},
        {value: 300, name: '视频广告'}
    ],
    unit:'单位符号或名称'
}

样例一效果图:

样例一数据说明:

  • 这类数据一般描述不同类别的占比/数量,适用于饼图、环状图、雷达图、玫瑰图
  • name和value组成一个对象,表示类别(name)的数量(value)
  • value一般是Number类型数值
  • unit 单位符号或名称

样例二:

{
    dimension:["销售","管理","信息技术","客服","研发","市场"],
    data:[
      {
        value: [4200, 3000, 20000, 35000, 50000, 18000],
        name: '预算分配(Allocated Budget)'
      },
      {
        value: [5000, 14000, 28000, 26000, 42000, 21000],
        name: '实际开销(Actual Spending)'
      }
    ],
    unit:'单位符号或名称'
}

样例二效果图:

样例二数据说明:

  • 这类数据一般用于描述不同类别的不同维度数量,适用于雷达图
  • dimension是数据的统计维度
  • name和value组成一个对象,表示某类别的不同维度数量
  • name是商品的类别
  • value是一个数值型的数组,用于描述维度的数量
  • unit 单位符号或名称

2.2 统计类数据

统计类数据一般用于统计N个类别商品(以商品为例)在D个维度下的数量,比较的结果可以是曲线图(趋势图)、面积图、柱状图等。

统计类数据的可视化绘制一般都会伴随着X轴或者Y轴的出现;一般X轴表示维度,Y轴表示某类别商品的数量。

样例一

{
    xData:['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    yData:null,
    data:[150, 230, 224, 218, 135, 147, 260],
    unit:'单位符号或名称'
}

样例一效果图

样例一数据说明

  • 这类数据一般用于描述单个类别的商品,在不同维度下的数据趋势/数量
  • xData:x轴数据,用于表示维度
  • yData:和xData任传一个,yData可不传,可传null
  • data:某一类别的商品不同维度的一组Number类型数据,一般是数组
  • x/yData:坐标轴可以互换,例如柱状图可以是横着的
  • unit 单位符号或名称

样例二

{
    xData:['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
    yData:null,
    data:{
    '邮件营销':[120, 132, 101, 134, 90, 230, 210],
    '联盟广告':[220, 182, 191, 234, 290, 330, 310],
    '视频广告':[150, 232, 201, 154, 190, 330, 410],
    '直接访问':[320, 332, 301, 334, 390, 330, 320],
    '搜索引擎':[820, 932, 901, 934, 1290, 1330, 1320],
    },
    unit:'单位符号或名称'
}

样例二效果图

样例二数据说明:

  • 这类数据一般用于描述多个类别的商品,在不同维度下的数据趋势/数量
  • xData:x轴数据,用于表示维度
  • yData:和xData任传一个,yData可不传,可传null
  • data是一个{key:value},用于描述多个类别的数据
    • key:商品的类别名称
    • value:某一类别商品多个不同维度的数据,这里的维度就是对应到xData中的维度
  • unit 单位符号或名称

2.3 二维坐标类数据

坐标类数据一般用于N个类别的商品,在2个坐标轴上的分布情况,2个坐标轴分别表示不同的维度,这类数据的可视化结果一般是不同类型的气泡图

这类数据的可视化描述,一般都会伴随X和Y轴的出现

样例数据

{
    xData:['12a', '1a', '2a', '3a', '4a', '5a', '6a',
        '7a', '8a', '9a','10a','11a',
        '12p', '1p', '2p', '3p', '4p', '5p',
        '6p', '7p', '8p', '9p', '10p', '11p'],
    yData:['Saturday', 'Friday', 'Thursday',
        'Wednesday', 'Tuesday', 'Monday', 'Sunday'],
    data:[[0,0,5],[0,1,1],[0,2,0],[0,3,0],[0,4,0],[0,5,0],[0,6,0],            [0,7,0],[0,8,0],[0,9,0],[0,10,0],[0,11,2],[0,12,4],[0,13,1],[0,14,1],[0,15,3],[0,16,4],[0,17,6],[0,18,4],[0,19,4],[0,20,3],[0,21,3],[0,22,2],[0,23,5],[1,0,7],[1,1,0],[1,2,0],[1,3,0],...后续省略]
}

样例效果图

样例数据说明

  • xData:描述数据在X轴上的维度
  • yData:描述数据在Y轴上的维度
  • data:data是一个二维数组,数组的每一项表示1个类别商品的数据
    • 其中每一项的数据也是一个一维数组[x,y,value]
      • 数组第一项是对应x轴的维度索引/值
      • 数组第二项是对应y轴的维度索引/值
      • 数组第三项是对应商品本身在这两个维度上的数值大小(这项不传的话就所有气泡大小相同)