https://github.com/hustcc/g2-for-react

📈g2 在 React 上的简单组件包装。React component wrapper of @antvis g2.
https://github.com/hustcc/g2-for-react

antv antvis g2 g2-for-react react-component react-g2

Last synced: about 2 months ago
JSON representation

📈g2 在 React 上的简单组件包装。React component wrapper of @antvis g2.

• Host: GitHub
• URL: https://github.com/hustcc/g2-for-react
• Owner: hustcc
• Created: 2018-08-24T09:06:05.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2018-08-31T11:15:24.000Z (about 6 years ago)
• Last Synced: 2024-06-20T18:33:37.740Z (3 months ago)
• Topics: antv, antvis, g2, g2-for-react, react-component, react-g2
• Language: JavaScript
• Homepage: https://git.hust.cc/g2-for-react
• Size: 2.42 MB
• Stars: 11
• Watchers: 3
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-github-star - g2-for-react

README

        
# g2-for-react

> 一个简单的 g2 包装，便于在 React 上使用。

>

> A simple react component wrapper for [antv/g2](https://github.com/antvis/g2). Demo click [here](https://git.hust.cc/g2-for-react).

[![npm](https://img.shields.io/npm/v/g2-for-react.svg)](https://www.npmjs.com/package/g2-for-react)

[![npm](https://img.shields.io/npm/dm/g2-for-react.svg)](https://www.npmjs.com/package/g2-for-react)

## Install

> npm i --save g2-for-react

## Usage

```jsx

import GFR from 'g2-for-react';

const creator = chart => {

  chart.tooltip({

    crosshairs: {

      type: 'line'

    }

  });

  chart.axis('temperature', {

    label: {

      formatter: function formatter(val) {

        return val + '°C';

      }

    }

  });

  chart.line().position('month*temperature').color('city');

  chart.point().position('month*temperature').color('city').size(4).shape('circle').style({

    stroke: '#fff',

    lineWidth: 1

  });

};

const onReady = chart => {

  console.log('Ready', chart);

};

ReactDOM.render(

  ,

  document.getElementById('root'),

);

```

Full demo in `Example`.

## Component Props

 - `className`: class of dom container.

 - `data`: G2 chart data.

 - `creator`: create function for G2 chart.

 - `onReady`: call after rendered.

Other props `padding`, `background`, `plotBackground`, `forceFit`, `animate`, `pixelRatio`, `theme`, `renderer` are the parameters of `G2.Chart`.

Document of g2 [here](https://antv.alipay.com/zh-cn/g2/3.x/api/chart.html#_Chart).

## Feature

 - Basically consistent with the original usage.

 - Adaptive width and height.

 - Customization ability.

# License

ISC@[hustcc](https://github.com/hustcc).