Shape

AntV
Search…
Installation
Getting Started
Data
Understanding F2 charts
Shape
F2.Shape
F2.Shape provide an ability to customize shapes. With this, we can create a lot of interesting charts.
How to register
1
const Shape = F2.Shape;
2
const shapeObj = Shape.registerShape('geomType', 'shapeName', { 
3
  getPoints(pointInfo) {
4
    // get the key points for drawing the shape
5
  },
6
  draw(cfg, container) {
7
    // custom the final drawing routine
8
​
9
    return shape; // return the customed shape instance
10
  }
11
});
Copied!
The explanation of the main methods are described below:
getPoints(pointInfo)
getPoints is used to calculate the key points of each shape. Each shape in F2 is connected by a number of key points.
Parameters:
pointInfo: Object
The values of the pointInfo are all normalized (range from 0 to 1), and the structure of the pointInfo is shown below:
1
{
2
  size: 0.1, // size of the shape, different shapes have different meanings
3
  x: 0.2, // the x-axis coordinate after normalization
4
  y: 0.13, // the y-axis coordinate after normalization
5
  y0: 0.1 // minimum value of the data corresponding to the y-axis after normalization.
6
}
Copied!
The following table lists the key point information mechanisms for each geometry shape in F2:
geom type
Explanation
point
Drawing a point is very simple, just get its position and size, where the size attribute represents the radius of the point.
​
line
The line is actually make up of plenty of points. In F2, we convert the data involved in the drawing into points and then connect the points one by one through the line to form a line chart. The size attribute represents the thickness of the line.
​
area
The area is formed on the basis of the line. Area uses color or texture to fill the area between the polyline and the x axis.
​
interval
The default shape for the interval is a rectangle, and the rectangle is actually composed of four points. In F2 we calculate the four points from the x, y, size, and y0 in the pointInfo, and then connect them clock wisely to form a rectangle.
​
polygon
Polygons are actually connected by multiple points. In pointInfo, both x and y are arrays. 
​
schema
Schema is a custom shape type. F2 provides a customized shape called candle (i.e. stock chart or k-line chart) to draw stock chart. The connection order of the rectangle is clockwise, and the starting point is the bottom left point so that you can seamlessly switch to polar coordinate.
​
​
draw(cfg, container)
getPoints used to calculate the key points of each shape, so the draw method is used to define how the points are connected and construct a shape.
NOTE: the draw method must return the shape instance.
Parameters
cfg: Object
This parameter contains all the data after mapping and corresponding raw data. The structure of the parameter is shown below:
     1. The original data is store in cfg.origin._origin
     2. The key points that calculated by getPoints is stored in points
     3. color, size and shape in cfg are all graph attributes after mapping and can be used directly.
container: F2.G.Group instance, the container for shapes.
It is a container. The customized shape must first be added to the container.
In addition, we provide some utility methods to help users quickly convert normalized data to canvas coordinates. You can call these methods in the above two methods:
1
Shape.registerShape('interval', 'rect', {
2
  getPoints(pointInfo) {
3
    // ...
4
  },
5
  draw(cfg, container) {
6
    // ...
7
    path = this.parsePath(path);
8
    // ...
9
    // 
10
    return shape; 
11
  }
12
});
Copied!
parsePoint(point)
Convert the point in the range of [0, 1] to the actual coordinate on the canvas.
Parameters:
point: Object
The structure of the point is shown below:
1
{
2
  x: 0.3,
3
  y: 0.34
4
}
Copied!
parsePoints(points)
Convert the points in the range of [0, 1] to the actual coordinates on the canvas.
The structure of points:
1
[
2
  { x: 0.3, y: 0.34 },
3
  { x: 0.3, y: 0.34 }
4
]
Copied!
Code Demo
1
const Shape = F2.Shape;
2
Shape.registerShape('interval', 'triangle', {
3
  getPoints: function(cfg) {
4
    const x = cfg.x;
5
    const y = cfg.y;
6
    const y0 = cfg.y0;
7
    const width = cfg.size;
8
    return [
9
      { x: x - width / 2, y: y0 },
10
      { x: x, y: y },
11
      { x: x + width / 2, y: y0 }
12
    ]
13
  },
14
  draw: function(cfg, group) {
15
    const points = this.parsePoints(cfg.points); // 将0-1空间的坐标转换为画布坐标
16
    const polygon = group.addShape('polygon', {
17
      attrs: {
18
        points: [
19
          { x:points[0].x, y:points[0].y },
20
          { x:points[1].x, y:points[1].y },
21
          { x:points[2].x, y:points[2].y }
22
        ],
23
        fill: cfg.color
24
      }
25
    });
26
    return polygon; // 将自定义Shape返回
27
  }
28
});
29
​
30
const data = [
31
  { genre: 'Sports', sold: 275 },
32
  { genre: 'Strategy', sold: 115 },
33
  { genre: 'Action', sold: 120 },
34
  { genre: 'Shooter', sold: 350 },
35
  { genre: 'Other', sold: 150 }
36
];
37
​
38
const chart = new F2.Chart({
39
  id: 'mountNode',
40
  width: 500,
41
  height: 320,
42
  pixelRatio: window.devicePixelRatio
43
});
44
​
45
chart.source(data);
46
chart.interval().position('genre*sold').color('genre').shape('triangle');
47
chart.render();
Copied!
Animate
Changelog
Last modified 3yr ago
Copy link
Contents
F2.Shape
How to register
Code Demo
`F2.Shape`

How to register

`getPoints(pointInfo)`

`draw(cfg, container)`

`parsePoint(point)`

`parsePoints(points)`

Code Demo
