Skip to content

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

Notifications You must be signed in to change notification settings

hustcc/g2-for-react

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

1 Commit
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

g2-for-react

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

A simple react component wrapper for antv/g2. Demo click here.

npm npm

Install

npm i --save g2-for-react

Usage

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(
  <GFR
    data={this.state.data}
    creator={creator}
    onReady={onReady}
  />,
  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.

Feature

  • Basically consistent with the original usage.
  • Adaptive width and height.
  • Customization ability.

License

ISC@hustcc.

About

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

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published