Frame 常见操作

简介创建 Frame使用 Frame 处理数据合并多列 Frame.combinColumns调试时输出更多简介在 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。

  1.                     当前内容版权归 蚂蚁金服 或其关联方所有，如需对内容或内容相关联开源项目进行关注与资助，请访问 蚂蚁金服 .
  4.                         上一篇:
  7.                         下一篇:
  10.             <div class="