简介

在 data 数据章节我们了解了 Frame 数据集对象，通过将 JSON 数组转换为 Frame 对象，可以方便快捷得进行数据的各种操作。

创建 Frame

通过 G2.Frame 来获取 Frame 对象。

Example: 

  1. var data = [
  2.   {gender:'男',count:40},
  3.   {gender:'女',count:30}
  4. ];
  5. var Frame = G2.Frame;
  6. var frame = new Frame(data); // 将 data 转换为 Frame 对象
  7. console.log(frame); // {data: Array[2], names: Array[2], arr: Array[2]}

使用 Frame 处理数据

我们为 Frame (数据集合)对象封装了大量的数据操作方法，基本上都是列操作，方便用户快捷得对数据进行增删查改。

下例通过调用 addCol 为数据集添加新列以表示股票的涨跌情况。

完整的代码如下：

  1. var data = [
  2.   {"time":"2015-11-19","start":8.18,"max":8.33,"min":7.98,"end":8.32},
  3.   {"time":"2015-11-18","start":8.37,"max":8.6,"min":8.03,"end":8.09},
  4.   {"time":"2015-11-17","start":8.7,"max":8.78,"min":8.32,"end":8.37},
  5.   {"time":"2015-11-16","start":8.18,"max":8.69,"min":8.05,"end":8.62},
  6.   {"time":"2015-11-13","start":8.01,"max":8.75,"min":7.97,"end":8.41}
  7. ];
  8. var Frame = G2.Frame;
  9. var frame = new Frame(data);
  10. frame.addCol('trend', function(obj) {
  11.   return (obj.start <= obj.end) ? 0 : 1;
  12. });
  13. console.log(frame.colNames()); // ["time", "start", "max", "min", "end", "trend"]
  14. var chart = new G2.Chart({
  15.   id: 'c1',
  16.   forceFit: true, // 图表自适应宽度
  17.   height: 350
  18. });
  19. chart.source(frame, {
  20.   'trend': {
  21.     type: 'cat',
  22.     alias: '趋势',
  23.     values: ['上涨','下跌']
  24.   },
  25.   'time': {
  26.     type: 'timeCat',
  27.     mask: 'mm-dd',
  28.   },
  29. });
  30. chart.schema().position('time*(start+end+max+min)').color('trend', ['#C00000','#19B24B']).shape('candle').tooltip('start*end*max*min').size(20);
  31. chart.render();

合并多列 Frame.combinColumns

同时 Frame 还提供了大量的静态方法，用于数据的统计、合并、排序等操作，详见 Frame API。

有时候在进行可视化的时候我们需要将原始数据的多条记录进行合并，同时又要保持原有的属性名，这个时候 Frame.combinColumns 方法就非常有用。

Frame.combinColumns(frame, cols, name, typeName, retains)，其中各个参数的含义如下

  • cols：array，是要合并的列；
  • name：string，合并的新列的名称；
  • typeName：string，存储原先字段的名字作为分类；
  • retains：array，除了合并的列之外保留的列。

Example:

如下数据：

[{"date":1186444800000,"start":22.75,"end":23.44,"lowest":22.69,"mean":23.335}]

通过调用

Frame.combineColumns(frame, ['start', 'end', 'lowest'], 'value', 'type', ['date', 'mean']);

可将数据转换为：

  1. [
  2.   {"date":1186444800000,"value":22.75,"type":"start","mean":23.335},
  3.   {"date":1186444800000,"value":23.44,"type":"end","mean":23.335},
  4.   {"date":1186444800000,"value":22.69,"type":"lowest","mean":23.335},
  5.   {"date":1186444800000,"value":23.335,"type":"mean","mean":23.335},
  6. ]

完整的代码如下：

  1. var data = [
  2.   {"date":1186444800000,"start":22.75,"end":23.44,"lowest":22.69,"mean":23.335},
  3.   {"date":1186358400000,"start":23.03,"end":22.97,"lowest":22.44,"mean":23.285},
  4.   {"date":1186099200000,"start":23.2,"end":22.92,"lowest":22.87,"mean":23.2945},
  5.   {"date":1186012800000,"start":22.65,"end":23.36,"lowest":22.65,"mean":23.332},
  6.   {"date":1185926400000,"start":23.17,"end":23.25,"lowest":22.85,"mean":23.367},
  7.   {"date":1185840000000,"start":23.88,"end":23.25,"lowest":23.24,"mean":23.4035},
  8.   {"date":1185753600000,"start":23.55,"end":23.62,"lowest":23.38,"mean":23.433},
  9.   {"date":1185494400000,"start":23.98,"end":23.49,"lowest":23.47,"mean":23.428},
  10.   {"date":1185408000000,"start":24.4,"end":24.03,"lowest":23.62,"mean":23.473},
  11.   {"date":1185321600000,"start":25.01,"end":24.68,"lowest":24.59,"mean":23.5455},
  12.   {"date":1185235200000,"start":24.8,"end":24.84,"lowest":24.73,"mean":23.6355},
  13.   {"date":1185148800000,"start":25.43,"end":24.99,"lowest":24.98,"mean":23.718}
  14. ];
  16. var Frame = G2.Frame;
  17. var frame = new Frame(data);
  18. frame = Frame.combineColumns(frame, ['start', 'end', 'lowest'], 'value', 'type', ['date', 'mean']);
  19. var chart = new G2.Chart({
  20.   id: 'c2',  // 指定图表容器 ID
  21.   height : 300,     // 指定图表高度
  22.   forceFit: true, // 图表自适应宽度
  23.   plotCfg: {
  24.     background: {
  25.       stroke: '#ccc', // 边颜色
  26.       lineWidth: 1, // 边框粗细
  27.     }
  28.   }
  29. });
  31. chart.source(frame, {
  32.   date: {
  33.     type: "timeCat",
  34.     mask: "mm-dd"
  35.   }
  36. });
  38. // 绘制线图
  39. chart.line().position('date*value').color('type').shape('type', function(val) {
  40.   if (val === 'end') {
  41.     return 'line';
  42.   } else {
  43.     return 'dash'; // 满足该条件设置为虚线
  44.   }
  45. });
  46. chart.render();

调试时输出

由于Frame对象主要有三个属性：

  • data 输入的数据，是一个对象数组，数据变化时不受影响
  • names 数据的列，如果未设置，按照第一行的数据存在的字段自动抽取
  • arr 将data按照列的形式进行组织

一旦对Frame对象进行操作后，data中的数据跟Frame对象不一致，arr中的数据是一个个的数组不方便查看，所以Frame 提供了格式化函数 .s()

  1. var data = [
  2.   {gender:'男',count:40},
  3.   {gender:'女',count:30}
  4. ];
  5. var Frame = G2.Frame;
  6. var frame = new Frame(data); // 将 data 转换为 Frame 对象
  8. console.log(frame.s());
  10. /** 结果
  11. "gender count
  12. 男 40
  13. 女 30"
  14.  */

更多

本章仅介绍Frame的基本用法和常用方法，更多 Frame 的方法详见 Frame api。