F2

F2 H5 node, weex README

The Grammar of Graphics Leland Wilkinson F2

$ npm install @antv/f2

• ---

  

  

• ****F2 50+ gzip 44k 56k

• **** H5 Node.jsReact Native Weex

  

50+

Shape

• API

<canvas id="mountNode"></canvas>

// F2  JSON  JSON 
const data = [
  { genre: 'Sports', sold: 275 },
  { genre: 'Strategy', sold: 115 },
  { genre: 'Action', sold: 120 },
  { genre: 'Shooter', sold: 350 },
  { genre: 'Other', sold: 150 },
];

//  canvas context
const context = document.getElementById('mountNode').getContext('2d');
const { props } = (
  <Canvas context={context} pixelRatio={window.devicePixelRatio}>
    <Chart data={data}>
      <Axis field="genre" />
      <Axis field="sold" />
      <Interval x="genre" y="sold" color="genre" />
      <Tooltip />
    </Chart>
  </Canvas>
);

const canvas = new Canvas(props);
canvas.render();

demos

** demos**

$ npm install

#  monorepo
$ npm run bootstrap

# 
$ npm run test

#  demo 
$ npm run dev

# 
$ npm run test-watch -- 'TestFileName'

issues bug

F2 3.1.122018-06-20 F2.tracktrue 3.3.4 F2

License

MIT license.