Coordinate
F2 supports two kinds of coordinates, Cartesian coordinate and polar coordinate. Cartesian coordinate is used by default.
// use Cartesian coordinatechart.coord('rect');// transpose coordinate, needed when drawing bar chart(horizontal)chart.coord({transposed: true});chart.coord('rect', {transposed: true});
// use polar coordinatechart.coord('polar');// more configurationschart.coord('polar', {transposed: true, // transpose coordinatestartAngle: {Number}, // starting angleendAngle: {Number}, // ending angleinnerRadius: {Number}, // Inner ring radius, range of [0, 1]radius: {Number} // radius, range of [0, 1]});
chart.get('coord')
The method will return the coordinate instance of current chart. Different coordinate types contain different properties.
If it is a cartesian coordinate instance, it will contain the following properties:
Name | Type | Description |
| 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 |
| Object | The position of upper right corner of the coordinate system in canvas. The value is like |
| Boolean | Wether the coordinate is transposed, true means it is transposed. |
| Boolean | Indicating that it is a Cartesian coordinate. |
If it is a polar coordinate instance, it will contain the following properties:
Name | Type | Description |
| Number | The starting angle of polar coordinate |
| Number | The ending angle of polar coordinate |
| Number | The internal hollow radius when a ring is drawn, relative value, range of [0, 1] |
| Number | The radius of the circle, relative value, range of [0, 1] |
| Boolean | Wether it is a polar coordinate, true if it is |
| Boolean | Wether it is transposed, true means it is |
| Object | The canvas coordinates of the center of the polar coordinates |
| Number | radius of the polar coordinate |
const data = [{ name: '芳华', proportion: 0.4, a: '1' },{ name: '妖猫传', proportion: 0.2, a: '1' },{ name: '机器之血', proportion: 0.18, a: '1' },{ name: '心理罪', proportion: 0.15, a: '1' },{ name: '寻梦环游记', proportion: 0.05, a: '1' },{ name: '其他', proportion: 0.02, a: '1' },];const chart = new F2.Chart({id: 'ring',width: 300,height: 192,pixelRatio: window.devicePixelRatio,});chart.source(data);chart.legend({position: 'right'});chart.coord('polar', {transposed: true,innerRadius: 0.7,});chart.axis(false);chart.interval().position('a*proportion').color('name', [ '#1890FF', '#13C2C2', '#2FC25B', '#FACC14','#F04864', '#8543E0' ]).adjust('stack');chart.render();
const data = [{ name: '芳华', proportion: 0.4, a: '1' },{ name: '妖猫传', proportion: 0.2, a: '1' },{ name: '机器之血', proportion: 0.18, a: '1' },{ name: '心理罪', proportion: 0.15, a: '1' },{ name: '寻梦环游记', proportion: 0.05, a: '1' },{ name: '其他', proportion: 0.02, a: '1' },];const chart = new F2.Chart({id: 'pie',width: 300,height: 193,pixelRatio: window.devicePixelRatio,});chart.source(data);chart.legend({position: 'bottom',align: 'center'});chart.coord('polar', {transposed: true,startAngle: -Math.PI, // set the starting angleendAngle: 0 // set the ending angle});chart.axis(false);chart.interval().position('a*proportion').color('name', [ '#1890FF', '#13C2C2', '#2FC25B', '#FACC14', '#F04864', '#8543E0' ]).adjust('stack');chart.render();
