在 react 中使用 G2

简介

为了更好地在 react 组件中使用 G2，我们封装了 g2-react 组件。

具体的封装形式可查看源码： https://github.com/antvis/g2-react/blob/master/src/index.js

安装方式

$ npm install g2 --save
$ npm install g2-react --save

注：g2-react 对 g2 的依赖是 peerDeps, 你可以在项目中指定依赖的 g2 的具体版本。

使用方式

import createG2 from 'g2-react';
import { Stat } from 'g2';

const Pie = createG2(chart => {
  chart.coord('theta');
  chart.intervalStack().position(Stat.summary.proportion()).color('cut');
  chart.render();
});

React.render(
  <Pie
    data={this.state.data}
    width={this.state.width}
    height={this.state.height}
    plotCfg={this.state.plotCfg}
    ref="myChart"
  />
);

更多的配置请至 github 查看。

实例

参见 g2-react demo。

数据滑动条插件使用常见问题