Recently, in a small application project, a chart was needed to record the user’s daily data. Last time I saw ANTV /F2 was focused on mobile visualization, so I’m going to use this for the effect.

Because the small program is to use taro to develop, so, looking for a component written by another big man taro- ANTV-F2 to directly use, but, maybe because the author has not updated for a long time, or I use the method has a problem, has been error.

To the back, directly to look at the source code of the component, but also to change the source code for some modifications, made a simplified version (if there is involved in infringement, you can contact me to delete)

Without further ado, let’s get started.

Create an taro project and then download ANTV/F2 for the diagram display:

taro init my_canvas

// Then go all the way down and select React
// After creating the project, let's download antv/f2

npm install @antv/f2 -D

// Download dependencies
npm install
Copy the code

SRC /pages/index.jsx: SRC /pages/index.jsx: 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';

// Chart component
function F2Canvas(props) {
    return (
        <Canvas
            style="width: 100%; height: 300px;"
            canvasId='canvas'
            id="canvas"
            className="f2-canvas"
        >
        </Canvas>)};// Export the component
export default function Index() {
    return (
        <View style='width:100%; height:600px'>
            <F2Canvas onInit={initChart.bind(null)}></F2Canvas>
        </View>)};// Since the function component does not have this, we write null here


// We can use the example from NPM directly
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;
}
Copy the code

After we have completed the above steps, the canvas has been added to the page structure, now let’s make it display:

function F2Canvas(props) {
  useEffect(() => {
    setTimeout(() => {
      const query = Taro.createSelectorQuery();
      query.select('#canvas').fields({
-node: true, // the NPM source code is intended to fetch node, but when I fetch node, the display is null, so the error is reported
        size: true,
+ context: true, // We take node to get the context, so we take it directly here
      }).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>
  )
}
Copy the code

Now our data can be displayed as follows:

Just a Node error, I don’t know if it’s my usage or what. Once again, if there is infringement, contact me to delete, thank you.