简介

所谓的列定义,即是对度量 scale 的操作。

G2 默认提供了一套生成度量的机制,我们会根据每个数据属性的第一个数值类型生成对应的度量。但是这套机制并不能满足全部的需求,因此我们为用户提供了手动指定度量类型的方法,以满足多样的可视化需求,这种使用方式我们称之为列定义。

列定义上的操作可以理解为直接修改源数据中的数据,因此它会影响坐标轴、tooltip 提示信息、图例、辅助元素 guide 以及几何标记的标签文本 label 的数据内容显示。

如何操作

G2 提供了两种列定义操作方式:

  • chart.source(data, defs); 用于多个数据字段的列定义。

  • chart.col('dim', defs); 用于一个字段的列定义,该方法会覆盖 chart.source() 中定义的对应字段的列定义且必须先于图形语法语句(chart.<geomType>.position()…)进行声明。

chart.source(data, defs)

这种方式可以一次性为多个数据列进行度量类型的定义。

Example:

  1. var defs = {
  2. 'a': {
  3. type: 'time', // 指定 time 类型
  4. mask: 'yyyy-mm-dd HH:MM:ss' // 指定时间的输出格式
  5. },
  6. 'b': {
  7. type: 'linear', // 指定 linear 连续类型
  8. min: 0 // 指定度量的最小值
  9. },
  10. 'c': {
  11. type: 'cat', // 指定 cat 分类类型
  12. values: ['一月','二月','三月'] // 重新指定 c 属性每一个的值
  13. }
  14. };
  15. chart.source(data, defs);

chart.col('dim', def)

为单独的数据字段进行度量类型的配置。

注意:该方法是对于数据进行定义,会影响后面图形的绘制,所以必须先于图形语法语句(chart.<geomType>.position()…)进行声明。

Example:

  1. var data = [
  2. {type: 0, value: 1},
  3. {type: 1, value: 2},
  4. {type: 2, value: 3},
  5. ];
  6. chart.col('type', {
  7. type: 'cat', // 声明 type 字段为分类类型
  8. values: ['A', 'B', 'C'] // 重新显示的值
  9. alias: '类型' // 设置属性的别名
  10. });

该实例为 x 轴和 y 轴的两个数据字段都进行了列定义,将 x 轴的数据指定为 time 类型并指定了时间的显示格式,而 y 轴格式化了显示形式,为其加上了单位 'k',观察图表,tooltip 和 坐标轴都受了列定义的影响。

完整代码:

  1. var data = [
  2. {"value":10,"time":"2015-03-01T16:00:00.000Z"},
  3. {"value":15,"time":"2015-03-01T16:10:00.000Z"},
  4. {"value":26,"time":"2015-03-01T16:20:00.000Z"},
  5. {"value":9,"time":"2015-03-01T16:30:00.000Z"},
  6. {"value":12,"time":"2015-03-01T16:40:00.000Z"},
  7. {"value":23,"time":"2015-03-01T16:50:00.000Z"},
  8. {"value":18,"time":"2015-03-01T17:00:00.000Z"},
  9. {"value":21,"time":"2015-03-01T17:10:00.000Z"},
  10. {"value":22,"time":"2015-03-01T17:20:00.000Z"}
  11. ];
  12. var chart = new G2.Chart({
  13. id : 'c1',
  14. forceFit: true,
  15. height : 300
  16. });
  17. var defs = {
  18. 'time': {
  19. type: 'time',
  20. nice: false,
  21. mask: 'HH:MM'
  22. },
  23. 'value': {
  24. formatter: function(val) {
  25. return val + ' k';
  26. }
  27. }
  28. };
  29. chart.source(data,defs);
  30. chart.line().position('time*value').color('red');
  31. chart.render();