f2react

简单封装 F2 以便在React中使用.

示例Demo

• 简单使用及自适应宽度的例子
• 结合Antd Mobile和Dva的例子

组件安装

$ npm i @antv/f2 --save
$ npm i f2react --save

组件使用

import React, { Component } from 'react';
import createF2 from 'f2react';

const data = [
  { x: '1951 年', y: 38 },
  { x: '1952 年', y: 52 },
  { x: '1956 年', y: 61 },
  { x: '1957 年', y: 145 },
  { x: '1958 年', y: 48 },
  { x: '1959 年', y: 38 },
  { x: '1960 年', y: 38 },
  { x: '1962 年', y: 38 },
];

const Bar = createF2((chart) => {
  chart.interval().position('x*y');
  chart.render();
});

React.render(
  <Bar
    width={this.state.width}
    height={this.state.height}
    data={data}
  />
);

若在React工程中使用，建议看examples里的例子。

属性说明

名称	类型	默认值	描述
width	number(必须，若不使用autoWidth组件)		图表宽度
height	number(必须)		图表高度
data	arrayOf(object) (必须)		数据源
configs	any		createF2((chart, configs))中的参数

• 图表详细使用请查看 F2官方API