Scale

度量 Scale,是数据空间到图形空间的转换桥梁,负责原始数据到 [0, 1] 区间数值的相互转换工作。针对不同的数据类型对应不同类型的度量。

根据数据的类型,F2 支持以下几种度量类型:

  • identity,常量类型的数值,也就是说数据的某个字段是不变的常量;
  • linear,连续的数字 [1, 2, 3, 4, 5];
  • cat,分类, ['男','女'];
  • timeCat,时间类型;
    在 F2 的使用中,我们主要通过列定义操作来接触度量:
  1. const data =[
  2. { a:'a', b:20},
  3. { a:'b', b:12},
  4. { a:'c', b:8},
  5. ];
  6. const defs ={
  7. a:{
  8. type:'cat'// 声明 a 字段的类型
  9. },
  10. b:{
  11. min:0,// 手动指定最小值
  12. max:100// 手动指定最大值
  13. }
  14. };
  15.  
  16. chart.source(data, defs);

通用属性

  1. chart.scale('fieldName',{
  2. // 各个属性配置
  3. });

下面列出的是通用的属性:

属性名类型说明
typeString指定不同的度量类型,支持的 type 为 identitylinearcattimeCat
formatterFunction回调函数,用于格式化坐标轴刻度点的文本显示,会影响数据在坐标轴 axis、图例 legend、提示信息 tooltip 上的显示。
rangeArray输出数据的范围,默认[0, 1],格式为 [min, max],min 和 max 均为 0 至 1 范围的数据。
aliasString该数据字段的显示别名,一般用于将字段的英文名称转换成中文名。
tickCountNumber坐标轴上刻度点的个数,不同的度量类型对应不同的默认值。
ticksArray用于指定坐标轴上刻度点的文本信息,当用户设置了 ticks 就会按照 ticks 的个数和文本来显示。

代码示例:

  1. chart.scale('aqi',{
  2. min:0,
  3. ticks:[0,50,100,150,200,300,500],
  4. alias:'AQI(空气质量指数)',
  5. });

各个 Scale 类型对应的属性

linear

属性名类型说明
aliasString别名。
niceBoolean默认为 true,用于优化数值范围,使绘制的坐标轴刻度线均匀分布。例如原始数据的范围为 [3, 97],如果 nice 为 true,那么就会将数值范围调整为 [0, 100]。
minNumber定义数值范围的最小值。
maxNumber定义数值范围的最大值。
rangeArray输出数据的范围,默认[0, 1],格式为 [min, max],min 和 max 均为 0 至 1 范围的数据。
formatterFunction回调函数,用于格式化坐标轴刻度点的文本显示,会影响数据在坐标轴 axis、图例 legend、tooltip 上的显示。
ticksArray用于指定坐标轴上刻度点的文本信息,当用户设置了 ticks 就会按照 ticks 的个数和文本来显示。
tickCountNumber定义坐标轴刻度线的条数,默认为 5。
tickIntervalNumber用于指定坐标轴各个标度点的间距,是原始数据之间的间距差值,tickCount 和 tickInterval 不可以同时声明。

cat

属性名类型说明
aliasString别名。
rangeArray输出数据的范围,默认[0, 1],格式为 [min, max],min 和 max 均为 0 至 1 范围的数据。
formatterFunction回调函数,用于格式化坐标轴刻度点的文本显示,会影响数据在坐标轴 axis、图例 legend、tooltip 上的显示。
ticksArray用于指定坐标轴上刻度点的文本信息,当用户设置了 ticks 就会按照 ticks 的个数和文本来显示。
tickCountNumber定义坐标轴刻度线的条数,默认为 5。
valuesArray具体的分类的值,一般用于指定具体的顺序和枚举的对应关系。
isRoundingBoolean默认值为 false, 在计算 ticks 的时候是否允许取整以满足刻度之间的均匀分布,取整后可能会和用户设置的 tickCount 不符合。

values 属性常用于 2 个场景:

  • 需要制定分类的顺序时,例如:c 字段有'最大','最小'和'适中'3种类型,我们想指定这些数值在坐标轴或者图例上的显示顺序时:
  1. const defs ={
  2. c:{
  3. type:'cat',
  4. values:['最小','适中','最大']
  5. }
  6. };
  • 数据字段中的数据是数值类型,但是需要转换成分类类型,这个时候需要注意原始数据必须是索引值
  1. const data =[
  2. { month:0, tem:7, city:'Tokyo'},
  3. { month:1, tem:6.9, city:'Tokyo'},
  4. { month:2, tem:9.5, city:'Tokyo'},
  5. { month:3, tem:14.5, city:'Tokyo'},
  6. { month:4, tem:18.2, city:'Tokyo'},
  7. { month:5, tem:21.5, city:'Tokyo'},
  8. { month:6, tem:25.2, city:'Tokyo'}
  9. ];
  10. const defs ={
  11. month:{
  12. type:'cat',
  13. values:['一月','二月','三月','四月','五月','六月','七月']// 这时候 month 的原始值是索引值
  14. }
  15. };
  16.  
  17. const chart =new F2.Chart({
  18. id:'c1',
  19. width:400,
  20. height:250,
  21. pixelRatio: window.devicePixelRatio
  22. });
  23. chart.source(data, defs);
  24. chart.legend({
  25. align:'center',
  26. itemWidth:null
  27. });
  28. chart.interval().position('month*tem');
  29. chart.render();

timeCat

时间分类类型,默认会对数据做排序

属性名类型说明
niceBoolean是否将 ticks 进行优化,变更数据的最小值、最大值,使得每个 tick 都是用户易于理解的数据。
maskString数据的格式化格式 默认:'YYYY-MM-DD'。
tickCountNumber坐标点的个数,默认是 5。但不一定是准确值。
valuesArray具体的分类的值,一般用于指定具体的顺序和枚举的对应关系。
aliasString别名。
rangeArray输出数据的范围,默认[0, 1],格式为 [min, max],min 和 max 均为 0 至 1 范围的数据。
formatterFunction回调函数,用于格式化坐标轴刻度点的文本显示,会影响数据在坐标轴 axis、图例 legend、tooltip 上的显示。
ticksArray用于指定坐标轴上刻度点的文本信息,当用户设置了 ticks 就会按照 ticks 的个数和文本来显示。
isRoundingBoolean默认值为 false, 在计算 ticks 的时候是否允许取整以满足刻度之间的均匀分布,取整后可能会和用户设置的 tickCount 不符合。

注意:maskformatter 这两个属性不可共用,如果同时设置了,会根据 formatter 进行格式化,mask 属性将不生效。

性能小提示:

当图表的数据源已经过排序,可以通过在列定义中设置 sortable: false 来提升性能,默认情况下,会对 timeCat 类型的度量进行数据排序操作。

  1. chart.scale('fieldName',{
  2. type:'timeCat',
  3. sortable:false
  4. })

原文: https://antv.alipay.com/zh-cn/f2/3.x/api/scale.html