教程

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

创建 Frame

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

Example: 

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

使用 Frame 处理数据

我们为 Frame (数据集合)对象封装了大量的数据操作方法，基本上都是列操作，方便用户快捷得对数据进行增删查改。 下例通过调用 addCol 为数据集添加新列以表示股票的涨跌情况。

完整的代码如下：

var data = [
  {"time":"2015-11-19","start":8.18,"max":8.33,"min":7.98,"end":8.32},
  {"time":"2015-11-18","start":8.37,"max":8.6,"min":8.03,"end":8.09},
  {"time":"2015-11-17","start":8.7,"max":8.78,"min":8.32,"end":8.37},
  {"time":"2015-11-16","start":8.18,"max":8.69,"min":8.05,"end":8.62},
  {"time":"2015-11-13","start":8.01,"max":8.75,"min":7.97,"end":8.41}
];
var Frame = G2.Frame;
var frame = new Frame(data);
frame.addCol('trend', function(obj) {
  return (obj.start <= obj.end) ? 0 : 1;
});
console.log(frame.colNames()); // ["time", "start", "max", "min", "end", "trend"]
var chart = new G2.Chart({
  id: 'c1',
  forceFit: true, // 图表自适应宽度
  height: 350
});
chart.source(frame, {
  'trend': {
    type: 'cat',
    alias: '趋势',
    values: ['上涨','下跌']
  },
  'time': {
    type: 'timeCat',
    mask: 'mm-dd',
  },
});
chart.schema().position('time*(start+end+max+min)').color('trend', ['#C00000','#19B24B']).shape('candle').tooltip('start*end*max*min').size(20);
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.combinColumns(frame, ['start', 'end', 'lowest'], 'value', 'type', ['date', 'mean']);

可将数据转换为：

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

完整的代码如下：

var data = [
  {"date":1186444800000,"start":22.75,"end":23.44,"lowest":22.69,"mean":23.335}, 
  {"date":1186358400000,"start":23.03,"end":22.97,"lowest":22.44,"mean":23.285},
  {"date":1186099200000,"start":23.2,"end":22.92,"lowest":22.87,"mean":23.2945},
  {"date":1186012800000,"start":22.65,"end":23.36,"lowest":22.65,"mean":23.332},
  {"date":1185926400000,"start":23.17,"end":23.25,"lowest":22.85,"mean":23.367},
  {"date":1185840000000,"start":23.88,"end":23.25,"lowest":23.24,"mean":23.4035},
  {"date":1185753600000,"start":23.55,"end":23.62,"lowest":23.38,"mean":23.433},
  {"date":1185494400000,"start":23.98,"end":23.49,"lowest":23.47,"mean":23.428},
  {"date":1185408000000,"start":24.4,"end":24.03,"lowest":23.62,"mean":23.473},
  {"date":1185321600000,"start":25.01,"end":24.68,"lowest":24.59,"mean":23.5455},
  {"date":1185235200000,"start":24.8,"end":24.84,"lowest":24.73,"mean":23.6355},
  {"date":1185148800000,"start":25.43,"end":24.99,"lowest":24.98,"mean":23.718}
];

var Frame = G2.Frame;
var frame = new Frame(data);
frame = Frame.combinColumns(frame, ['start', 'end', 'lowest'], 'value', 'type', ['date', 'mean']);
var chart = new G2.Chart({
  id: 'c2',  // 指定图表容器 ID
  height : 300,     // 指定图表高度
  forceFit: true, // 图表自适应宽度
  plotCfg: {
    background: {
      stroke: '#ccc', // 边颜色
      lineWidth: 1, // 边框粗细
    }
  }
});

chart.source(frame, {
  date: {
    type: "timeCat",
    mask: "mm-dd"
  }
});

// 绘制线图
chart.line().position('date*value').color('type').shape('type', function(val) {
  if (val === 'end') {
    return 'line'; 
  } else {
    return 'dash'; // 满足该条件设置为虚线
  }
});
chart.render();