A method of mapping data values ​​to the color of the geometry.
chart.line().color('red'); // Color
chart.line().color('fieldName'); // use the built-in colors to map field
chart.line().color('fieldName', [ 'red', 'blue' ]) // specify colors
chart.line().color('fieldName', (type) => { // use callback to map data to colors
if (type === 'a') {
return 'red';
}
return 'blue';
});
chart.line().color('fieldName*value', (type, value) => { // multiple parameters, use callback to map
if (type === 'a' && value > 100) {
return 'red';
}
return 'blue';
});
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'.
chart.point().position('x*y').color('x'); // use the built-in color to map the data field of x-axis
chart.point().position('x*y').color('red'); // all points are mapped to red
chart.area().position('x*y').color('l(0) 0:#ffffff 0.5:#7ec2f3 1:#1890ff'); // fill a gradient
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.
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:
A method of mapping data values ​​to the shape of the geometry.
chart.point().shape('circle'); // a specific shape
chart.point().shape('fieldName'); // use the built-in shapes to map the data field
chart.point().shape('fieldName', [ 'circle', 'hollowCircle', 'rect' ]); // specify shapes
chart.point().shape('fieldName', (type) => { // use callback do the mapping
if(type === 'a') {
return 'circle';
}
return 'rect';
});
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
chart.point().position('x*y').shape('rect'); // all the points's shapes are rectangles
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.
// use default point shapes, 'circle', 'hollowCircle', 'rect'
chart.point().position('x*y').shape('z');
Users can also specify shapes to render. The specific shapes are listed above.
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:
A method of mapping data values ​​to the size of the geometry.
chart.point().size(10); // specific size
chart.point().size('fieldName'); // the value mapped to the size
chart.point().size('fieldName', [ 0, 10 ]); // the value mapped to the size, and specify maximum and minimum values
chart.point().size('fieldName', val => { // 回调函数
if (val > 5) {
return 10;
}
return 5;
});
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.
// map the value in field z to size, the maximum mapped value is 100, minimum mapped value is 10.
chart.point().position('x*y').size('z', [ 10, 100 ]);
size(field, callback)
Use callback function to calculate the size of the geometry.
chart.point().position('x*y').size('z', value => {
if (value === 1) {
return 5;
}
return 10;
});
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.
chart.interval().adjust('stack');
chart.interval().adjust({
type: 'stack'
});
chart.interval().adjust([{
type: 'dodge',
marginRatio: 0, // Values from 0 to 1 are used to adjust the space between bars in a group
}]);
Configuration for geometry's animation.Includes animation type, duration time and easing function and so on.
chart.point().animate(false); // turn off animation
chart.point().animate({
appear: {
animation: {String}, // animation name
easing: {String}, // easing function
duration: {Number}, // duration time of the animation, ms is the unit
delay: {Number} // delay of the animation, ms is the unit
}, // entrance animation
update: {
animation: {String},
easing: {String},
duration: {Number},
delay: {Number}
}, // updating animation
enter: {
animation: {String},
easing: {String},
duration: {Number},
delay: {Number}
}, // animation for the change of the source data
leave: {
animation: {String},
easing: {String},
duration: {Number},
delay: {Number}
} // destroy animation
});
