Antv wx-F2异步请求示例

原创

逝水经年

修改于 2021-08-03 14:25:53

6240

修改于 2021-08-03 14:25:53

文章被收录于专栏：数据可视化数据可视化

官方给出的例子是静态的，研究了一晚上的异步请求...测试过很多方法，终于成功了！！写篇文章记录一下我走过弯路。

一、环境

小程序基础库：2.18.0

开发者工具：Stable 1.05.2106300

二、一些弯路（可跳过）

今天才刚开始接触Antv，来做微信小程序的图表。

在官方的示例中，整个实现方法是放在data里的，我一直尝试通过传参改变chart的data（做了一晚上做懵了，已经开始胡言乱语，我可能表述的也不太清楚）

如果根据官方的 API文档来创建实例，微信开发者工具这边会报错缺少关键js文件（maybe 是npm 构建工具的锅？把相关文件复制进微信npm重新构建的文件夹，照样还是出错，可能是因为新的是component组件了吧）

搞来搞去，在官方的Github里面逛来逛去，发现issue里面有很多相关的问题，点进去看基本都是关于k的异步请求示例，但是那个不是master分支里的了。

百度也很少相关结果。

搞到这，心态崩了，这时候不死心有去逛了AntV图例，在其中发现了异步调用的数据，发现它写在主方法的内部去进行调用，这时候便有了后面的实现。

以上纯个人琢磨一天的观点，如果有错误请大佬在评论区指正！

三、实现

1.对官方示例的改造（仅改造js，其他的依照官方示例来）

onInitChart: (F2, config)=>{
        const chart = new F2.Chart(config);
    	// 异步请求
        wx.request({
          // 异步请求地址（如果失效，请更换自己测试的地址即可）
          url: 'https://api.jniantic.cn/test/test.json',
          success: res=>{
              const data = res.data
          chart.source(data, {
            value: {
              range: [0, 1],
              type: 'linear',
            }
          });
          chart.coord({
            // 反转坐标系
            transposed: true
          }).interval({
            // 关掉排序
            sortable: false
          }).style({ radius: 5 }).position('name*value').color('name');
          chart.legend(false);
          // 添加文本标注
          data.forEach(function (obj) {
            chart.guide().text({
              position: [obj.name, obj.value],
              content: obj.value,
              style: {
                fill: '#333',
                fontWeight: 'bold',
                fontSize: 10
              },
              offsetX: 10
            });
          });
          chart.render();
          // 注意：需要把chart return 出来
          return chart;
          }
        })
}