AntV
Search…
Geometry
The type of the chart is determined by geometry.
1
chart.<geomType>()
2
.position()
3
.size()
4
.color()
5
.shape()
6
.adjust()
7
.style()
8
.animate();
Copied!
The following is a simple grammar for a basic bar chart..
1
chart.interval().position('x*y').color('x');
Copied!
NOTE: The return of the above method chart.interval() is a geom instance, not a chart instance.
Currently we support 7 geometry types:
Type
Description
point
point, used for drawing point chart, scatter chart, bubble chart.
path
path, a line of unordered connected.
line
line, used for drawing line chart, and the data will be ordered.
area
area, used for drawing area chart
interval
used to form a bar chart or a pie chart.
polygon
It is usually used to form heat map chart or map.
schema
Used to form a candlesticks chart or box chart.

Properties

1
chart.<geomType>({
2
generatePoints: {Boolean},
3
sortable: {Boolean},
4
startOnZero: {Boolean},
5
connectNulls: {Boolean}
6
})
Copied!

generatePoints

    type: Boolean
    description: Wether to generate multiple points to draw charts, if true, multiple points will be generated.
    default: false for line and path, other geometry types default to be true.
1
chart.line({
2
generatePoints: true
3
})
Copied!

sortable

    type: Boolean
    description: Whether to sort the data according to the corresponding field of the x-axis, and sort it when true
    default: true for area and line, other geometry types default to be false.
Note: When drawing a line or area chart, if your data has been sorted, you can set this property to false to improve performance.
1
chart.line({
2
sortable: false
3
})
Copied!

startOnZero

    type: Boolean
    description: Wether to set the baseline of the y-axis starting from 0, default to be true, means starts from 0.
    default: true
1
chart.line({
2
startOnZero: false
3
})
Copied!
The usage scenarios for this property are as follows:
startOnZero: true
startOnZero: false

connectNulls

    type: Boolean
    description: Used to set whether to connect empty data (for line, area and path types)
    default: false
1
chart.line({
2
connectNulls: true // connect empty data
3
});
Copied!
connectNulls: true
connectNulls: false

Methods

position()

Declare the two data fields which determine the position of data points. Choose one of the following two ways to declare:
1
chart.line().position('x*y');
2
chart.line().position([ 'x', 'y' ]);
Copied!
The following code will render a bar chart, which the x-axis representing the fruit and the y-axis representing the price.
1
const data = [
2
{ fruit: 'apple', price: 2 },
3
{ fruit: 'orange', price: 1.5 },
4
{ fruit: 'banana', price: 0.8 }
5
];
6
const chart = new F2.Chart({
7
id: 'mountNode',
8
pixelRatio: window.devicePixelRatio
9
});
10
chart.source(data);
11
chart.interval().position('fruit*price');
12
chart.render();
Copied!

color()

A method of mapping data values ​​to the color of the geometry.
1
chart.line().color('red'); // Color
2
chart.line().color('fieldName'); // use the built-in colors to map field
3
chart.line().color('fieldName', [ 'red', 'blue' ]) // specify colors
4
chart.line().color('fieldName', (type) => { // use callback to map data to colors
5
if (type === 'a') {
6
return 'red';
7
}
8
return 'blue';
9
});
10
chart.line().color('fieldName*value', (type, value) => { // multiple parameters, use callback to map
11
if (type === 'a' && value > 100) {
12
return 'red';
13
}
14
return 'blue';
15
});
Copied!

color(value)

    value: String
At this time, value can be:
    The data field mapped to the color attribute. If the field name does not exist in the data, it will be parsed as a constant. This time, the default color provided by F2 will be used.
    also can be a specific color value, such as 'red', '#ddd', '#dddddd', 'rgb(255, 10, 30)' or 'l(0) 0:#ffffff 0.5:#7ec2f3 1:#1890ff'.
1
chart.point().position('x*y').color('x'); // use the built-in color to map the data field of x-axis
2
chart.point().position('x*y').color('red'); // all points are mapped to red
3
chart.area().position('x*y').color('l(0) 0:#ffffff 0.5:#7ec2f3 1:#1890ff'); // fill a gradient
Copied!

color(fieldName, colors)

    fieldName: String
    Data field name mapped to colors, multiple fields are supported.
    colors: String / Array / Function
      If colors is null, the built-in colors are used;
      If you need to specify colors, you need to pass in an color array.
    1
    chart.point().position('x*y').color('z'); // use default colors
    2
    chart.point().position('x*y').color('z', [ 'red', 'blue' ]); // specify colors
    Copied!
      When the map field is a linear scale type(for continuous quantitative data), you can declare the gradient color as follows, detailed demo here.
    1
    chart.polygon().position('name*day').color('sales', '#BAE7FF-#1890FF-#0050B3')
    Copied!
    Colors can also be a callback function, the parameters of the callback are the data field values. If the function is going to map multiple data fields, parameters will be passed in the declared order, for example:
1
const data = [
2
{ fruit: "apple", price: 2 },
3
{ fruit: "orange", price: 1.5 },
4
{ fruit: "banana", price: 0.8 }
5
];
6
const chart = new F2.Chart({
7
id: 'mountNode',
8
pixelRatio: window.devicePixelRatio
9
});
10
chart.source(data);
11
chart.interval().position('fruit*price').color('fruit', val => {
12
if (val === 'apple') {
13
return '#CD0110';
14
} else if (val === 'orange') {
15
return '#F88825';
16
} else if (val === 'banana') {
17
return '#FAD639';
18
}
19
});
20
chart.render();
Copied!

shape()

A method of mapping data values ​​to the shape of the geometry.
1
chart.point().shape('circle'); // a specific shape
2
chart.point().shape('fieldName'); // use the built-in shapes to map the data field
3
chart.point().shape('fieldName', [ 'circle', 'hollowCircle', 'rect' ]); // specify shapes
4
chart.point().shape('fieldName', (type) => { // use callback do the mapping
5
if(type === 'a') {
6
return 'circle';
7
}
8
return 'rect';
9
});
Copied!

shape(shapeName)

    shapeName: String
Specify the shape that the geometry draws. The following table lists the shapes supported by different geometry types:
Geometry Type
Supported Shape
Description
point
'circle', 'hollowCircle', 'rect'
'circle' is default
line
'line', 'smooth', 'dash'
'line' is default, 'dash': dash line, 'smooth': smooth line
area
'area', 'smooth'
'area' is default
interval
'rect'
polygon
'polygon'
schema
'candle'
only candlestick chart is supported currently
1
chart.point().position('x*y').shape('rect'); // all the points's shapes are rectangles
Copied!

shape(fieldName, shapes)

    fieldName: String
    The name of the data field that maps to the shape attribute.
    shapes: String / Array / Function
    shapes is an optional parameter.
      If this parameter is not provided, shapes will be rendered defaultly.
    1
    // use default point shapes, 'circle', 'hollowCircle', 'rect'
    2
    chart.point().position('x*y').shape('z');
    Copied!
      Users can also specify shapes to render. The specific shapes are listed above.
    1
    chart.point().position('x*y').shape('z', [ 'circle', 'rect' ]); // specify shapes
    Copied!
      shapes can also be a callback function, the parameters of the callback are the data field values. If the function is going to map multiple data fields, parameters will be passed in the declared order, for example:
1
const data = [
2
{ fruit: "apple", price: 2 },
3
{ fruit: "orange", price: 1.5 },
4
{ fruit: "banana", price: 0.8 }
5
];
6
const chart = new F2.Chart({
7
id: 'mountNode',
8
pixelRatio: window.devicePixelRatio
9
});
10
chart.source(data);
11
chart.point().position('fruit*price').shape('fruit', val => {
12
if (val === 'apple') {
13
return 'rect';
14
} else if (val === 'orange') {
15
return 'hollowCircle';
16
} else if (val === 'banana') {
17
return 'circle';
18
}
19
});
20
chart.render();
21
Copied!

size()

A method of mapping data values ​​to the size of the geometry.
1
chart.point().size(10); // specific size
2
chart.point().size('fieldName'); // the value mapped to the size
3
chart.point().size('fieldName', [ 0, 10 ]); // the value mapped to the size, and specify maximum and minimum values
4
chart.point().size('fieldName', val => { // 回调函数
5
if (val > 5) {
6
return 10;
7
}
8
return 5;
9
});
Copied!
size(field, [ min, max ])
Map the size of the geometry based on the value of the field, the maximum value (default to 10) and minimum value (default to 1) are specified by max and min.
1
// map the value in field z to size, the maximum mapped value is 100, minimum mapped value is 10.
2
chart.point().position('x*y').size('z', [ 10, 100 ]);
Copied!

size(field, callback)

Use callback function to calculate the size of the geometry.
1
chart.point().position('x*y').size('z', value => {
2
if (value === 1) {
3
return 5;
4
}
5
return 10;
6
});
Copied!

adjust()

Declare the data adjustment method for the geometry instance, which can be used to draw stacked charts, grouped charts, etc.
F2 supports two kinds of data adjustment: stack and dodge.
1
chart.interval().adjust('stack');
2
chart.interval().adjust({
3
type: 'stack'
4
});
5
chart.interval().adjust([{
6
type: 'dodge',
7
marginRatio: 0, // Values from 0 to 1 are used to adjust the space between bars in a group
8
}]);
Copied!
1
const data =[
2
{ city: 'London', month: 'Jan.', rainfall: 18.9 },
3
{ city: 'London', month: 'Feb.', rainfall: 28.8 },
4
{ city: 'London', month: 'Mar.', rainfall: 39.3 },
5
{ city: 'London', month: 'Apr.', rainfall: 81.4 },
6
{ city: 'London', month: 'May.', rainfall: 47 },
7
{ city: 'London', month: 'Jun.', rainfall: 20.3 },
8
{ city: 'London', month: 'Jul.', rainfall: 24 },
9
{ city: 'London', month: 'Aug.', rainfall: 35.6 },
10
{ city: 'Berlin', month: 'Jan.', rainfall: 12.4 },
11
{ city: 'Berlin', month: 'Feb.', rainfall: 23.2 },
12
{ city: 'Berlin', month: 'Mar.', rainfall: 34.5 },
13
{ city: 'Berlin', month: 'Apr.', rainfall: 99.7 },
14
{ city: 'Berlin', month: 'May.', rainfall: 52.6 },
15
{ city: 'Berlin', month: 'Jun.', rainfall: 35.5 },
16
{ city: 'Berlin', month: 'Jul.', rainfall: 37.4 },
17
{ city: 'Berlin', month: 'Aug.', rainfall: 42.4 }
18
];
19
const chart = new F2.Chart({
20
id: 'mountNode',
21
pixelRatio: window.devicePixelRatio
22
});
23
chart.source(data, {
24
rainfall: {
25
tickCount: 5
26
}
27
});
28
29
chart.interval().position('month*rainfall').color('city').adjust('stack');
30
chart.render();
Copied!

style()

Used to configure the display the geometries, see Canvas for more details.
There are two ways to use style() method:

style(cfg)

    cfg: Object, configuration for graphical attributes, see Canvas for more details.
1
chart.line().style({ // style for all shapes
2
lineWidth: 2
3
});
Copied!

style(field, cfg)

Mapping from data fields to style configuration.
    field: String, field name of data
    cfg: Object, configuration for graphical attributes, callback is also supported here
1
chart.ling().style('city', {
2
lineDash(val) {
3
if (val === 'HZ') {
4
return [ 2, 2 ];
5
}
6
return null;
7
}
8
})
Copied!

animate()

Configuration for geometry's animation.Includes animation type, duration time and easing function and so on.
1
chart.point().animate(false); // turn off animation
2
3
chart.point().animate({
4
appear: {
5
animation: {String}, // animation name
6
easing: {String}, // easing function
7
duration: {Number}, // duration time of the animation, ms is the unit
8
delay: {Number} // delay of the animation, ms is the unit
9
}, // entrance animation
10
update: {
11
animation: {String},
12
easing: {String},
13
duration: {Number},
14
delay: {Number}
15
}, // updating animation
16
enter: {
17
animation: {String},
18
easing: {String},
19
duration: {Number},
20
delay: {Number}
21
}, // animation for the change of the source data
22
leave: {
23
animation: {String},
24
easing: {String},
25
duration: {Number},
26
delay: {Number}
27
} // destroy animation
28
});
Copied!
For more about animations, see Animation.
Last modified 3yr ago