Comments (2)
import { Scatter } from '@ant-design/plots'
import React from 'react'
const data = [
{ x: 1, y: 0 },
{ x: 2, y: 1 },
{ x: 3, y: 1 },
{ x: 4, y: 1 },
{ x: 5, y: 2 },
{ x: 6, y: 3 },
{ x: 7, y: 2 },
{ x: 8, y: -1 },
{ x: 9, y: 0 },
{ x: 10, y: 1 },
{ x: 11, y: 2 },
{ x: 12, y: 2 },
{ x: 13, y: 2 },
{ x: 14, y: 3 },
{ x: 15, y: 2 },
{ x: 16, y: 0 },
{ x: 17, y: -1 },
{ x: 18, y: 2 },
{ x: 19, y: 4 },
{ x: 20, y: 3 },
{ x: 21, y: 0 },
{ x: 22, y: -1 },
{ x: 23, y: 2 },
{ x: 24, y: 2 },
{ x: 25, y: 1 },
{ x: 26, y: -2 },
{ x: 27, y: 1 },
{ x: 28, y: 3 },
{ x: 29, y: 1 },
{ x: 30, y: 2 },
]
const DemoScatter = () => {
const config = {
data,
xField: 'x',
yField: 'y',
sizeField: 5,
style: {
stroke: '#777777',
lineWidth: 1,
fill: '#5B8FF9',
},
line: {
data: [
{ x: 1, y: 2 },
{ x: 30, y: 5 },
{ x: 1, y: 0 },
{ x: 30, y: 2 },
{ x: 1, y: -1 },
{ x: 30, y: 1 },
],
xField: 'x',
yField: 'y',
style: { stroke: '#c7cbc7', lineWidth: 2 },
tooltip: false,
},
}
return <Scatter {...config} />
}
function App() {
return (
<>
</>
)
}
export default App
from g2.
参考这个 demo:https://g2.antv.antgroup.com/examples/general/link/#link-annotation
from g2.
Related Issues (20)
- 如何根据画布上的位置Point(x,y)信息获取对应的数据
- 5.X版本x轴旋转不使用默认自动旋转90度,如何设置自定义旋转角度 HOT 2
- 饼图动画优化
- axis 的 label WrapOverlapCfg 换行后第二行的内容不显示 HOT 1
- tooltip 是否支持自定义 marker?是否直接使用 legend 中的 itemMarker ? HOT 1
- 图例过长会导致图表UI显示有问题, 分页器也看不见了 HOT 2
- 如何使用 V5 实现V4中的分组层叠柱状图 HOT 1
- 当使用缩略轴(slider)并进行拖动时,图例(legend)的位置会发生偏移,甚至消失
- [v5] 如何实现 axis label 内容过长时, 换行 + 超出隐藏显示省略号 + tooltip显示完整内容 HOT 1
- treemap drilldown not working
- 双轴柱状图下,hover出现tooltips,会有部份偏移 HOT 1
- 官网示例 Spec 模式支持编辑
- 官网示例 API 和 Spec 互转
- Data 支持语法糖 HOT 1
- Theta 坐标系支持指定坐标中心以及能够限定角度
- 螺旋坐标系
- 日历色块图
- 图例聚焦能力
- 分面
- 分组柱形图表间距怎么调整
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from g2.