AntV | G2Plot 开箱即用的图表库

简介:

G2Plot 是一套简单、易用、并具备一定扩展能力和组合能力的统计图表库，基于图形语法理论搭建而成，"G2Plot"中的 G2 即意指图形语法 (the Gramma of Graphics)

简单使用:

浏览器引入 引入在线资源

<script type="text/javascript" src="https://unpkg.com/@antv/g2plot@latest/dist/g2plot.min.js"></script>
<script>

  

引入本地资源:将https://unpkg.com/@antv/g2plot@latest/dist/g2plot.min.js另存为js文件

<script src="另存js文件的本地路径"></script>
<script>

步骤1:

<div id="container"></div>

设置一个容器,图表将在这个容器存放,id是这个容器的标识

步骤2:

引入g2plot图表,Column为柱状图

  const { Column } = G2Plot;

步骤2:

引入图表所需要的数据,

const data = [
  { year: '1991', value: 3 },
  { year: '1992', value: 4 },
  { year: '1993', value: 3.5 },
  { year: '1994', value: 5 },
 
];

步骤3:

绘制图表

//new 一个柱状图对象
const line = new Column('container', {
  data,
  xField: 'year',
  yField: 'value',
});
//渲染
column.render();

这里''container'为容器的id ,data为之前创建的数据,column.render渲染图表

渲染结果:

 可以给容器设置样式改变图表大小等属性