g2-react初体验

  |   0 评论   |   144 浏览

背景

本文使用AntV中的g2库,来绘制折线图和饼图。

官方最终效果如下:

本文从头开始,实现了其中基础部分。

初体验

建立reactjs框架

$ npx create-react-app my-g2-app

测试

$ cd my-g2-app
$ npm start

可以在浏览器中打开默认页面

安装g2模块

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

浏览器页面创建容器

index.html 中,加入root容器。这时的root名称可以命名。

<div id="root"></div>

折线图

准备数据

下载文件 https://raw.githubusercontent.com/antvis/g2-react/master/examples/data.json 到本地。

编辑 js 文件

import createG2 from 'g2-react';
import { Stat } from 'g2';
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import linedata from './data.json';

const Line = createG2(chart => {
  chart.line().position('time*price').color('name').shape('spline').size(2);
  chart.render();
});

class LineComponent extends Component {

  state =  {
    data: linedata.slice(0, linedata.length / 2 - 1),
    width: 500,
    height: 250,
    plotCfg: {
      margin: [10, 100, 50, 120],
    },
  }

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

ReactDOM.render(<LineComponent />, document.getElementById('root'));

饼图

准备数据

下载文件 https://raw.githubusercontent.com/antvis/g2-react/master/examples/diamond.json 到本地。

编辑 js 文件

import createG2 from 'g2-react';
import { Stat } from 'g2';
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import piedata from './diamond.json';

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

class PieComponent extends Component {

  state =  {
    data: piedata.slice(0, piedata.length / 2 - 1),
    width: 500,
    height: 250,
    plotCfg: {
      margin: [10, 100, 50, 120],
    },
  }

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

ReactDOM.render(<LineComponent />, document.getElementById('root'));

打包

$ npm run build

参考

评论

发表评论

validate