装载数据

如何装载数据

chart 对象支持两种数据载入的方式：

  • 方式 1：data 属性传入
  1. const chart = new G2.Chart({
  2.   id: 'c1',
  3.   width: 600,
  4.   height: 300,
  5.   data: [
  6.     { x: 'a', y: 1 },
  7.     { x: 'b', y: 2 },
  8.     ...
  9.   ]
  10. });
  • 方式 2：调用 chart.source(data) 方法，每个字段的列定义也可以在这里传入
  1. chart.source(data, {
  2.   x: {
  3.     type: 'cat'
  4.   },
  5.   y: {
  6.     min: 0
  7.   }
  8. })

支持的数据格式

G2 支持两种格式的数据源：

JSON 数组

G2 接收的数据格式非常简单：标准的 JSON 数组，其中每个数组元素是一个标准的 JSON 对象：

Example:

  1. const data = [
  2.   { gender: '男', count: 40 },
  3.   { gender: '女', count: 30 }
  4. ];
  5.  
  6. chart.source(data);

DataView 对象

详见 DataSet 教程。

更新数据

G2 更新数据的方式主要有三种：

  • 仅仅是更新图表的数据
  • 清理所有，重新绘制
  • 使用 DataView 时的更新

更新数据

如果需要马上更新图表，使用 chart.changeData(data) 即可

  1. chart.changeData(newData);
  • view 也支持 view.changeData(data)
    如果仅仅是更新数据，而不需要马上更新图表，可以调用 chart.source(data)，需要更新图表时调用 chart.repaint()
  1. chart.source(newData);
  2.  
  3. chart.guide().clear();// 清理guide
  4. chart.repaint();

清理图形语法

更新数据时还可以清除图表上的所有元素，重新定义图形语法，重新绘制

  1. chart.line().position('x*y');
  2.  
  3. chart.render();
  4.  
  5. chart.clear(); // 清理所有
  6. chart.souce(newData); // 重新加载数据
  7. chart.interval().position('x*y').color('z');
  8. chart.render();

使用 DataView 更新

由于 DataSet 支持状态量 state，一旦更改状态量，图表即一起刷新，详情查看 DataSet 教程。

创建图表 DataSet

原文: https://antv.alipay.com/zh-cn/g2/3.x/tutorial/load-data.html