AntV
Search…
Guide
Line
Text
Rect
Point
Tag
RegionFilter
Arc
Html
​​
​​
​​
​​
​​
​​
​​
​​
​​
​​
​​
​​
​​
​​
​​
​​
Guide component is used for annotations of chart. In F2, annotations are driven by data. Being driven by data means that the aesthetics of an annotation object are linked to variables in a dataset in a similar manner to that for a graphic. A text annotation, for example, might be positioned according to a value of a variable, or its color might be determined by a variable value, or its content might be determined by statistical parameters.
We provide 8 types of guide components, we will introduce them and their usage below.

How to Register Guide Plugin

F2 has modular structure provides best tree-shaking results and package size optimization.
If you just import F2 from '@antv/f2', then it has included 6 types Guide by default, they are Arc, Html, Line, Rect, Tag and Text. But if you want a better package size optimization, you can register manually:
    If you want to use all types of guide, you can:
1
const F2 = require('@antv/f2/lib/core');
2
3
// Step 1: require guide components
4
require('@antv/f2/lib/component/guide'); // require all guide components
5
6
// Step 2: require guide plugin
7
const Guide = require('@antv/f2/lib/plugin/guide');
8
9
// Step 3:register Guide plugin
10
F2.Chart.plugins.register(Guide); // Global registeration here, for all chart instances.
11
12
// Or just for current chart instance
13
const chart = new F2.Chart({
14
id: 'canvas',
15
plugins: Guide
16
});
Copied!
    or you just want to use several types, you can:
1
const F2 = require('@antv/f2/lib/core');
2
3
// All guide types are listed below, and you can choose one according to your needs.
4
// Guide.Arc
5
require('@antv/f2/lib/component/guide/arc');
6
7
// Guide.Html
8
require('@antv/f2/lib/component/guide/html');
9
10
// Guide.Text
11
require('@antv/f2/lib/component/guide/text');
12
13
// Guide.Rect
14
require('@antv/f2/lib/component/guide/rect');
15
16
// Guide.Line
17
require('@antv/f2/lib/component/guide/line');
18
19
// Guide.Point
20
require('@antv/f2/lib/component/guide/point');
21
22
// Guide.Tag
23
require('@antv/f2/lib/component/guide/tag');
24
25
// Guide.RegionFilter
26
require('@antv/f2/lib/component/guide/region-filter');
27
28
// Step 2: require guide plugin
29
const Guide = require('@antv/f2/lib/plugin/guide');
30
31
// Step 3:register Guide plugin
32
F2.Chart.plugins.register(Guide); // Global registeration here, for all chart instances.
33
34
// Or just for current chart instance
35
const chart = new F2.Chart({
36
id: 'canvas',
37
plugins: Guide
38
});
Copied!

Line

Example Usage

1
chart.guide().line({
2
start: [ 'Feb.', 100 ],
3
end: [ 'Aug.', 300 ],
4
style: {
5
lineWidth: 2,
6
stroke: 'red'
7
}
8
});
Copied!

Properties

The global options for the chart guide line is defined in F2.Global.guide.line.
Name
Type
Default
Description
top
Boolean
true
Wether draw the guide line to the top layer of the canvas, defaults to true.
start
Array/Function
Starting position of the guide line. Detail usage see here.
end
Array/Function
Ending point of guide line, use the same way as start.
style
Object
Style for guide line, see Canvas(todo) for more details.

Text

Example Usage

1
chart.guide().text({
2
position: ['2018-05-19', 'max'],
3
content: 'weekend',
4
style: {
5
textAlign: 'start',
6
textBaseline: 'top',
7
fill: '#fa541c'
8
},
9
offsetX: -8
10
});
Copied!

Properties

The global options for the chart guide text is defined in F2.Global.guide.text.
Name
Type
Default
Description
top
Boolean
true
Wether draw the guide text to the top layer of the canvas, defaults to true
position
Array/Function
Position of the guide text, see detail usage here.
content
String
text content
style
Object
text style
offsetX
Number
0
offset of guide text in x-axis
offsetY
Number
0
offset of guide text in y-axis

Tag

Example Usage

1
chart.guide().tag({
2
position: [6, 2800],
3
content: '最高点',
4
offsetY: -5,
5
direct: 'tl'
6
});
Copied!

Properties

The global options for the chart guide tag is defined in F2.Global.guide.tag.
Name
Type
Default
Description
top
Boolean
true
Wether draw the guide tag to the top layer of the canvas, defaults to true
position
Array/Function
Position of the guide tag, see detail usage here.
content
String
tag content, if you want a text wrapping, just write '\n' in the text, such as 'maximum \n200'.
direct
String
'tl'
direction of tag, if autoAdjust is true,when the tag is outside the chart [plot](todo) area, the direct will be automatically corrected and guaranteed to be in the plot area.
autoAdjust
Boolean
true
If value is true, when the tag is outside the chart plot area, the direct will be automatically corrected and guaranteed to be in the plot area.
side
Number
4
The length of tag arrow.
style
Object
text style
offsetX
Number
0
offset of guide tag in x-axis
offsetY
Number
0
offset of guide tag in y-axis
background
Object
The background style of guide tag. See below.
textStyle
Object
style for tag's label.
withPoint
Boolean
true
wether to draw a point at the dataset.
pointStyle
Object
If the withPoint is true, configure the style for the point shape.

direct

backgroud configuration

1
background: {
2
padding: 20, // padding of the tag, just use as css padding
3
radius: 5, // the box-radius of tag
4
fill: '#1890FF', // the background color of tag
5
}
Copied!

Rect

Example Usage

1
chart.guide().rect({
2
start: ['2018-05-19', 'max'],
3
end: ['2018-05-20', 'min'],
4
style: {
5
fillOpacity: 0.1,
6
fill: '#fa541c',
7
lineWidth: 1,
8
stroke: '#ccc'
9
}
10
});
Copied!

Properties

The global options for the chart guide rect is defined in F2.Global.guide.rect.
Name
Type
Default
Description
top
Boolean
false
Wether draw the guide rect to the top layer of the canvas, defaults to false.
start
Array/Function
Starting position of the guide tag, see detail usage here.
end
Array/Function
Ending position of the guide tag, see detail usage here.
style
Object
rect box style

Point

Example Usage

1
chart.guide().point({
2
position: ['2018-05-19', 'max'],
3
style: {
4
fill: '#1890FF',
5
r: 3,
6
lineWidth: 1,
7
stroke: '#fff'
8
},
9
offsetX: 5
10
offsetY: 5
11
});
Copied!

Properties

The global options for the chart guide point is defined in F2.Global.guide.point.
Name
Type
Default
Description
top
Boolean
true
Wether draw the guide point to the top layer of the canvas, defaults to true
position
Array/Function
Position of the guide point, see detail usage here.
style
Object
point style
offsetX
Number
0
offset of guide point in x-axis
offsetY
Number
0
offset of guide point in y-axis

Arc

Works in polar coordinate.

Example Usage

1
chart.guide().arc({
2
start: [0, 0],
3
end: [1, 99.98],
4
top: false,
5
style: {
6
lineWidth: 15,
7
stroke: '#ccc'
8
}
9
}); // draw a cricle
Copied!

Properties

The global options for the chart guide arc is defined in F2.Global.guide.arc.
Name
Type
Default
Description
top
Boolean
true
Wether draw the guide arc to the top layer of the canvas, defaults to true
start
Array/Function
starting position of the guide arc, see detail usage here.
end
Array/Function
ending position of the guide arc, see detail usage here.
style
Object
arc style

RegionFilter

Example Usage

1
chart.guide().regionFilter({
2
start: ['min', 95],
3
end: ['max', 'max'],
4
color: '#FF4D4F'
5
});
Copied!

Properties

The global options for the chart guide regionFilter is defined in F2.Global.guide.regionFilter.
Name
Type
Default
Description
start
Array/Function
starting position of the guide regionFilter, see detail usage here.
end
Array/Function
ending position of the guide regionFilter, see detail usage here.
color
String
the filled color for the filtered region.
style
Object
additional style settings for the shape in the filter region.

Html

Example Usage

1
chart.guide().html({
2
position: ['Samsung', 21.2],
3
html: '<div style="background: #1890ff;font-size: 10px;color: #fff;padding: 2px;text-align: center;border-radius: 2px;">21.2%</div>',
4
alignX: 'center',
5
alignY: 'bottom',
6
offsetY: -8
7
});
Copied!

Properties

The global options for the chart guide html is defined in F2.Global.guide.html.
Name
Type
Default
Description
position
Array/Function
position of the guide html, see detail usage here.
html
String
html code that needs to be displayed
alignX
String
'center'
alignment of html in horizontal direction, can be set to: 'left', 'center', 'right', defaults to 'center'
alignY
String
'middle'
alignment of html in vertical direction, can be set to: 'top', 'middle', 'bottom', defaults to 'middle'
offsetX
Number
0
offset of the guide html in x-axis
offsetY
Number
0
offset of the guide html in y-axis

start , end , position usage

The values of the three parameters passed in can be following type:
    Array,the value in the array can be the data in dataset, or can be percentage, or keyword(they are 'max', 'min', 'median')
1
// this is the dataset of chart
2
const data = [
3
{ name: 'a', value: 300 },
4
{ name: 'b', value: 250 },
5
{ name: 'c', value: 180 }
6
];
7
8
chart.guide().line({
9
start: [ 'a', 300 ],
10
end: [ 'c', 180 ]
11
});
12
13
chart.guide().text({
14
position: [ '50%', 'max' ],
15
content: 'Hi'
16
});
Copied!
    Function: Callback can used to dynamically locate the position. It is often used in the scenario where position of the guide element changes according to the change of the data. Detail demo and code here.
1
chart.guide().line({
2
/**
3
* @param {Scale} xScale scale of x-axis
4
* @param {Array} yScales scale array of y-axis
5
* @return {Array} return value must be an array
6
*/
7
start(xScale, yScales) {
8
return []; // position information
9
},
10
/**
11
* ending point of guide line
12
* @param {Scale} xScale scale of x-axis
13
* @param {Array} yScales scale array of y-axis
14
* @return {Array} return value must be an array
15
*/
16
end(xScale, yScales) {
17
return []; // position information
18
}
19
});
Copied!

Repaint a guide component

guide.repaint()
1
const guide = chart.guide().text({
2
position: [ 'min', 'median' ],
3
content: '12345'
4
});
5
6
chart.render();
7
8
// update guide configuration
9
guide.position = [ '50%', '50%' ];
10
guide.content = 12;
11
guide.repaint();
Copied!

How to clear guides

1
chart.guide().clear();
Copied!
Last modified 3yr ago