Coordinate

Search…
Coordinate
F2 supports two kinds of coordinates, Cartesian coordinate and polar coordinate. Cartesian coordinate is used by default.
Configuration
Cartesian Coordinate
1
// use Cartesian coordinate
2
chart.coord('rect');
3
// transpose coordinate, needed when drawing bar chart(horizontal)
4
chart.coord({
5
  transposed: true
6
});
7
chart.coord('rect', {
8
  transposed: true
9
});
Copied!
Polar Coordinate
1
// use polar coordinate
2
chart.coord('polar');
3
// more configurations
4
chart.coord('polar', {
5
  transposed: true, // transpose coordinate
6
  startAngle: {Number}, // starting angle
7
  endAngle: {Number}, // ending angle
8
  innerRadius: {Number}, // Inner ring radius, range of [0, 1]
9
  radius: {Number} // radius, range of [0, 1]
10
});
Copied!
Get Coordinate Instance
1
chart.get('coord')
Copied!
The method will return the coordinate instance of current chart. Different coordinate types contain different properties.
Cartesian Coordinate 
If it is a cartesian coordinate instance, it will contain the following properties:
Name
Type
Description
start
Object
The starting point of the coordinate in canvas, the origin of the coordinate in F2 chart is located in the lower left corner. The value is like { x: 10, y: 10 }
end
Object
The position of upper right corner of the coordinate system in canvas. The value is like { x: 100, y: 100 }
transposed
Boolean
Wether the coordinate is transposed, true means it is transposed.
isRect
Boolean
Indicating that it is a Cartesian coordinate.
Polar Coordinate
If it is a polar coordinate instance, it will contain the following properties:
Name
Type
Description
startAngle
Number
The starting angle of polar coordinate
endAngle
Number
The ending angle of polar coordinate
innerRadius
Number
The internal hollow radius when a ring is drawn, relative value, range of [0, 1]
radius
Number
The radius of the circle, relative value, range of [0, 1]
isPolar
Boolean
Wether it is a polar coordinate, true if it is
transposed
Boolean
Wether it is transposed, true means it is
center
Object
The canvas coordinates of the center of the polar coordinates
circleRadius
Number
radius of the polar coordinate
Demos
Donut Chart
1
const data = [
2
  { name: '芳华', proportion: 0.4, a: '1' },
3
  { name: '妖猫传', proportion: 0.2, a: '1' },
4
  { name: '机器之血', proportion: 0.18, a: '1' },
5
  { name: '心理罪', proportion: 0.15, a: '1' },
6
  { name: '寻梦环游记', proportion: 0.05, a: '1' },
7
  { name: '其他', proportion: 0.02, a: '1' },
8
];
9
const chart = new F2.Chart({
10
  id: 'ring',
11
  width: 300,
12
  height: 192,
13
  pixelRatio: window.devicePixelRatio,
14
});
15
chart.source(data);
16
chart.legend({
17
  position: 'right'
18
});
19
chart.coord('polar', {
20
  transposed: true,
21
  innerRadius: 0.7,
22
});
23
chart.axis(false);
24
chart.interval().position('a*proportion')
25
  .color('name', [ '#1890FF', '#13C2C2', '#2FC25B', '#FACC14','#F04864', '#8543E0' ])
26
  .adjust('stack');
27
chart.render();
Copied!
Draw a semicircle pie chart
1
const data = [
2
  { name: '芳华', proportion: 0.4, a: '1' },
3
  { name: '妖猫传', proportion: 0.2, a: '1' },
4
  { name: '机器之血', proportion: 0.18, a: '1' },
5
  { name: '心理罪', proportion: 0.15, a: '1' },
6
  { name: '寻梦环游记', proportion: 0.05, a: '1' },
7
  { name: '其他', proportion: 0.02, a: '1' },
8
];
9
const chart = new F2.Chart({
10
  id: 'pie',
11
  width: 300,
12
  height: 193,
13
  pixelRatio: window.devicePixelRatio,
14
});
15
chart.source(data);
16
chart.legend({
17
  position: 'bottom',
18
  align: 'center'
19
});
20
chart.coord('polar', {
21
  transposed: true,
22
  startAngle: -Math.PI, // set the starting angle
23
  endAngle: 0 // set the ending angle
24
});
25
chart.axis(false);
26
chart.interval().position('a*proportion')
27
  .color('name', [ '#1890FF', '#13C2C2', '#2FC25B', '#FACC14', '#F04864', '#8543E0' ])
28
  .adjust('stack');
29
chart.render();
Copied!
Scale
Axis
Last modified 3yr ago
Copy link
Contents
Configuration
Get Coordinate Instance
Demos