很多场景下图表的数据源是需要异步加载获取的,在 G2 中实现异步数据的更新也是非常的简单,你只需要通过 jquery 等工具异步获取数据后,按照正常的创建图表步骤绘制即可。

  1. $.getJSON('data.json',function (data) {
  2. const chart = new G2.Chart({
  3. container: 'c1',
  4. width: 1000,
  5. height: 500,
  6. padding: [ 40, 80, 80, 80 ]
  7. });
  8. chart.source(data);
  9. chart.point().position('x*y').color('z');
  10. chart.render();
  11. });

空数据源图表绘制

有时候我们需要先绘制图表,然后再加载完整的数据,即刚开始的时候数据源是个空的。如下例:

  1. // 数据将会包含 genre 和 sold 字段
  2. const data = [];
  3. const chart = new G2.Chart({
  4. container: 'c1', // 指定图表容器 ID
  5. height: 300,
  6. width: 400
  7. });
  8. chart.source(data);
  9. chart.interval().position('genre*sold').color('genre');
  10. chart.render();

数据异步加载与动态更新 - 图1

当数据加载进来之后,再调用 chart.changeData(data); 即可绘制。

  1. const newData = [
  2. { genre: 'Sports', sold: 275 },
  3. { genre: 'Strategy', sold: 115 },
  4. { genre: 'Action', sold: 120 },
  5. { genre: 'Shooter', sold: 350 },
  6. { genre: 'Other', sold: 150 }
  7. ];
  8. setTimeout(function() {
  9. chart.changeData(newData); // 使用 setTimeout 动态模拟下
  10. }, 1000);

数据异步加载与动态更新 - 图2

动态更新数据 chart.changeData(data)

注意

需要说明的是,chart.changeData(data) 方法 只支持具备相同数据结构的数据 进行更新,因为不同的数据结构包含的属性不同,原先声明的图形绘制语法是不能生效做到一一映射的。

下面的例子展示了初始数据为空以及动态更新数据的例子:

  • 数据源定时载入的时候调用 chart.changeData(data) 方法实时更新即可,非常简单。

数据异步加载与动态更新 - 图3

完整代码如下:

  1. // 模拟数据
  2. const base = +new Date(2014, 9, 3);
  3. const oneDay = 24 * 3600 * 1000;
  4. const date = [];
  5. const data = [];
  6. const values = [Math.random() * 150];
  7. let now = new Date(base);
  8. function addData(shift) {
  9. const item = {};
  10. now = [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/');
  11. item.date = now;
  12. item.value = (Math.random() - 0.4) * 10 + values[values.length - 1];
  13. values.push(item.value);
  14. now = new Date(+new Date(now) + oneDay);
  15. data.push(item);
  16. }
  17. // 创建图表
  18. const chart = new G2.Chart({
  19. container: 'c3',
  20. forceFit: true, // 宽度自适应
  21. height: 400,
  22. animate: false
  23. });
  24. // 声明字段度量类型
  25. chart.source(data);
  26. chart.tooltip({
  27. crosshairs: {
  28. type: 'line'
  29. }
  30. });
  31. chart.line().position('date*value').color('#f80').size(3);
  32. chart.area().position('date*value').color('#f80');
  33. chart.render();
  34. let init = true;
  35. setInterval(function () {
  36. if (init) { // 第一次载入数据
  37. for (let i = 1; i < 100; i++) {
  38. addData();
  39. }
  40. init = false;
  41. }
  42. addData();
  43. chart.changeData(data); // 动态更新数据
  44. }, 700);

使用 DataSet 的状态量

使用 DataSet 的状态量也可以动态的进行图表的更新、联动,查看 DataSet 章节