数据异步加载与动态更新

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

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

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

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

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

  1. var 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. ];
  9. setTimeout(function() {
  10.   chart.changeData(newData); // 使用 setTimeout 动态模拟下
  11. }, 1000);

image 动态更新数据 chart.changeData(data)注意需要说明的是，chart.changeData(data) 方法只支持具备相同数据结构的数据进行更新，因为不同的数据结构包含的属性不同，原先声明的图形绘制语法是不能生效做到一一映射的。 下面的例子展示了初始数据为空以及动态更新数据的例子：

数据源定时载入的时候调用 chart.changeData(data) 方法实时更新即可，非常简单。 完整代码如下：

  1. // 模拟数据
  2. var base = +new Date(2014, 9, 3);
  3. var oneDay = 24 * 3600 * 1000;
  4. var date = [];
  6. var data = [];
  7. var values = [Math.random() * 150];
  8. var now = new Date(base);
  10. function addData(shift) {
  11.   var item = {};
  12.   now = [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/');
  13.   item.date = now;
  14.   item.value = (Math.random() - 0.4) * 10 + values[values.length - 1];
  15.   values.push(item.value);
  16.   now = new Date(+new Date(now) + oneDay);
  17.   data.push(item);
  18. }
  20. // 创建图表
  21. var chart = new G2.Chart({
  22.   id: 'c3',
  23.   forceFit: true, // 宽度自适应
  24.   height: 400,
  25. });
  26. // 声明字段度量类型
  27. chart.source(data);
  28. chart.tooltip({
  29.   crosshairs: true,
  30. });
  31. chart.line().position('date*value').color('#f80').size(3);
  32. chart.area().position('date*value').color('#f80');
  33. chart.render();
  35. var init = true;
  36. setInterval(function () {
  37.   if (init) { // 第一次载入数据
  38.     for (var i = 1; i < 100; i++) {
  39.       addData();
  40.     }
  41.     init = false;
  42.   }
  43.   addData();
  44.   chart.changeData(data); // 动态更新数据
  45. }, 700);
  1.                     当前内容版权归 蚂蚁金服 或其关联方所有，如需对内容或内容相关联开源项目进行关注与资助，请访问 蚂蚁金服 .
  4.                         上一篇:
  7.                         下一篇:
  10.             <div class="