G2plot-column NPM

G2Plot-Column

Plugin based on G2Plot v2.LIVE DEMO

Install

$ npm i --save g2plot-column

Usage

import { P } from '@antv/g2plot';
import { defaultOptions, adaptor } from '../src';

const data = [
  { name: 'Internet Explorer', value: 26, symbol: 'https://gw.alipayobjects.com/zos/rmsportal/eOYRaLPOmkieVvjyjTzM.png'}
  { name: 'Chrome', value: 40, symbol: 'https://gw.alipayobjects.com/zos/rmsportal/dWJWRLWfpOEbwCyxmZwu.png' },
  { name: 'Firefox', value: 30, symbol: 'https://gw.alipayobjects.com/zos/rmsportal/ZEPeDluKmAoTioCABBTc.png' },
  { name: 'Safari', value: 24, symbol: 'https://gw.alipayobjects.com/zos/rmsportal/eZYhlLzqWLAYwOHQAXmc.png' },
  { name: 'Opera', value: 15, symbol: 'https://gw.alipayobjects.com/zos/rmsportal/vXiGOWCGZNKuVVpVYQAw.png' },
  { name: 'Undetectable', value: 8, symbol: 'https://gw.alipayobjects.com/zos/rmsportal/NjApYXminrnhBgOXyuaK.png' },
];

const options = {
  data,
  xField: 'name',
  yField: 'value',
  height: 600,
  curvature: 0.8,
  autoFit: true,
  symbolSize: [40, 40],
  color:'red',
  shapeAttrs:{
      fill:'green',
  }
  //padding: 40, //发现顶部图标被挡住的时候 暂时可以设置一个padding解决
};
const column = new P('app', options, adaptor, defaultOptions);
column.render();

// column.update({data}); // update chart

Attributes

options

Name	Type	Description
data	Array	data source,example:{xField},{yField},symbol,color,shapeAttrs
xField	string	x-axis field name in data
yField	string	y-axis field name in data
height	number	chart height
width	number	chart width
autoFit	Boolean	fit width,default:false
curvature	number	curvature,ranges:0-1,default:0.8,curvature=0 is triangle
symbolSize	Array	symbol size,default:30,30
padding	Array \| number	padding,default:0
color	string	shape common color/fill
shapeAttrs	object	shape common shape attrs

options.data

Name	Type	Description
symbol	string	image path
color	string	current shape color, priority is higher than common color
shapeAttrs	object	current shape attrs,priority is higher than common shapeStyle