在 taro 中使用 antv/f2

最近在一个小程序的项目中，需要一个图表来记录用户每天的数据。上次看到了 antv/F2 是专注于移动端的可视化的，所以打算用这个来实现效果。

因为小程序是用 taro 来开发的，所以，找了一个其他大佬写好的组件 taro-antv-f2 想着直接拿来用的，但是，可能是因为作者太久没有更新，或者是我的使用方法有问题，一直报错。

到后面，就直接去看那个组件的源码了，也对改源码进行了一些修改，弄了一个简化版的（如果有涉及到侵权的话，可以联系我删除）

废话也不多说了，我们就开始吧。

新建一个 taro 项目，然后在下载 antv/f2 用于图表的显示：

taro init my_canvas

// 然后一路下去，选择 react 
// 创建好项目之后，我们来下载 antv/f2

npm install @antv/f2 -D

// 下载依赖
npm install
复制代码

然后进入到 src/pages/index.jsx，进行初始化，初始化之后是下面这个样子的：

import React, { useEffect } from 'react';
import Taro from '@tarojs/taro';
import { Canvas, View } from '@tarojs/components';
import F2 from '@antv/f2';

// 图表组件
function F2Canvas(props) {
    return (
        <Canvas
            style="width: 100%; height: 300px;"
            canvasId='canvas'
            id="canvas"
            className="f2-canvas"
        >
        </Canvas>
    )
};

// 导出组件
export default function Index() {
    return (
        <View style='width:100%;height:600px'>
            <F2Canvas onInit={initChart.bind(null)}></F2Canvas>
        </View>
    )
};
// 由于函数组件是没有this的，所以我们这里写null


// 我们就直接拿 npm 上的示例直接用了
const initChart = (F2, config) => {
  const chart = new F2.Chart(config);
  const data = [
    { genre: 'Sports', sold: 275 },
    { genre: 'Strategy', sold: 115 },
    { genre: 'Action', sold: 120 },
    { genre: 'Shooter', sold: 350 },
    { genre: 'Other', sold: 150 },
  ];
  chart.source(data);
  chart.interval().position('genre*sold').color('genre');
  chart.render();
  return chart;
}
复制代码

当我们在完成上面的步骤之后，canvas 已经添加到了页面结构上，现在我们来让它显示出来：

function F2Canvas(props) {
  useEffect(() => {
    setTimeout(() => {
      const query = Taro.createSelectorQuery();
      query.select('#canvas').fields({
-       node: true, // npm 的源码中是想获取到node的，但是当我获取node时，显示的是null，所以才会报错
        size: true,
+       context: true, // 我们拿 node 是为了获取上下文，那么我们直接在这里拿也是一样的
      }).exec(res => {
-       const { node, width, height } = res[0];
+       const { context, width, height } = res[0];
        const pixelRatio = wx.getSystemInfoSync().pixelRatio;
        context.width = width * pixelRatio;
        context.height = height * pixelRatio;
        const config = { context, width, height, pixelRatio };
        props.onInit(F2, config);
      })
    }, 100)
  }, [])

  return (
    <Canvas
      style="width: 100%; height: 300px;"
      canvasId='canvas'
      id="canvas"
      className="f2-canvas"
    >
    </Canvas>
  )
}
复制代码

现在，我们的数据就可以显示出来啦，显示的效果如下：

就是一个 node 引发的错误，我也不知道是我的使用问题还是什么。
再次说明一下，要是有侵权，联系我删除，谢谢了。