ConversionTag

1 min read

Applicable to base bar charts and base bar charts, the Conversion Rate component allows the user to focus on the rate of change in the data.

ConversionTagCfg

optional object | false
PropertiesTypeDefaultDescription
sizenumber-Conversion rate Component dimensions
spacingnumber-Component and column spacing
offsetnumber-Component and axis spacing
arrowArrowCfg | false-Arrow shape configuration, false does not display arrows
textTextCfg | falseNo-Text configuration, false does not display text

ArrowCfg configuration is as follows:

PropertiesTypeDefaultDescription
headSizenumber-Size of the arrow
styleobject-Arrow style

TextCfg configuration is as follows:

PropertiesTypeDefaultDescription
headSizenumber-Size of the arrow
styleobject-Arrow style
formatter(prev:number, next:number) => string-Custom conversion rate calculation

Please refer to the style configuration ShapeAttrs

Events and interactions

转化标签的图形组成包含 conversion-tag-arrowconversion-tag-text。同一个图表的转化标签组件都放置于一个 group 下,也就是 conversion-tag-group,我们可以通过监听 conversion-tag-group 事件来进行一些定制交互。

转化标签携带的原始数据信息包含:上一个图形元素(element)和下一个图形元素(nextElement),可通过下列方式获取:

plot.on('conversion-tag-group:mouseenter', (evt) => {
  const { element, nextElement } = evt.target?.get('origin');
  // custom by yourself. details of element API, see: https://g2.antv.vision/en/docs/api/general/element
});

Example: