antvis/G2
posted by interstellarmt about 2 months ago
posted by github-actions[bot] about 2 months ago
posted by sanye-huang about 2 months ago
posted by interstellarmt about 2 months ago
posted by sanye-huang about 2 months ago
Do you want to work on this issue?
You can request for a bounty in order to promote it!
5.0新增api对应4.0的getXY #6620
sanye-huang posted onGitHub
主要用于给某一些x的特定位置(比如max、min)添加标注。目前设置text要么是data要么是x y的百分比像素,无法做到对应的功能。
感觉需要的是text标记的data语法糖(max,min),getXY方法的优先级可能不高?
📝 To help us better understand and address your issue, please provide more information, or use the standard format, otherwise we will not process this issue.
Reference document:
📝 为了帮助我们更好地理解和解决你的问题,请提供更多信息,或者使用规范的格式,否则我们不会处理这个 issue。
参考文档:
需要感觉的是文本标记的数据语法糖(max,min),getXY方法的优先级可能不高?
优先级都不是很高,getxy和min、max我觉得对一些灵活场景都非常有必要
如果是上面说的这种场景,给某一些x的特定位置(比如max、min)添加标注,其实内置的transform
已经支持
type Selector =
| 'min'
| 'max'
| 'first'
| 'last'
| 'mean'
| 'median'
| ((I: number[], V: number[]) => number[]);
以下是示例
import { Chart } from '@antv/g2';
const chart = new Chart({
container: 'container',
autoFit: true,
});
chart
.data({
type: 'fetch',
value:
'https://gw.alipayobjects.com/os/antvdemo/assets/data/blockchain.json',
transform: [
{
type: 'fold',
fields: ['blockchain', 'nlp'],
key: 'type',
value: 'value',
},
],
})
.axis('x', { labelAutoHide: 'greedy' });
chart
.line()
.encode('x', (d) => new Date(d.date))
.encode('y', 'value')
.encode('color', 'type');
chart
.text()
.encode('x', (d) => new Date(d.date))
.encode('y', 'value')
.transform({ type: 'select', channel: 'y', selector: 'max' })
.style({
text: `2017-12-17, 受比特币影响,blockchain 搜索热度达到峰值:100`,
wordWrap: true,
wordWrapWidth: 164,
dx: -174,
dy: 30,
fill: '#2C3542',
fillOpacity: 0.65,
fontSize: 10,
background: true,
backgroundRadius: 2,
connector: true,
startMarker: true,
startMarkerFill: '#2C3542',
startMarkerFillOpacity: 0.65,
})
.tooltip(false);
chart.render();
假设我希望画一个图形,如下
可能是一个点到另外一个点的箭头,可能是三个点的三角形关系,在4里面只需要获取各个点的xy,然后render一个自定义shape就可以