滚动条(Scrollbar)
上一篇
图例(Legend)
下一篇
缩略轴(Slider)
Loading...
Ant Design Charts 中 滚动条(Scrollbar) 可以用于过滤数据,可以和 x 或者 y 通道绑定的,滚动条默认都是关闭的。解决图表信息过于密集而无法完全展示的问题。
何时使用:内容是否超出显示区域取决于内容的多少以及显示区域的尺寸,当需要显示的内容在纵向方向上超过显示区域的大小时,应当使用垂直滚动条以控制显示的部分,横向滚动条同理。
{autoFit: true,height: 300,data: {type: 'fetch',value:'https://gw.alipayobjects.com/os/bmw-prod/fb9db6b7-23a5-4c23-bbef-c54a55fee580.csv',},xField: 'letter',yField: 'frequency',y1Field: 0.000001,scale: { y: { type: 'log' } },scrollbar: {x: {ratio: 0.2,trackSize: 14,trackFill: '#000',trackFillOpacity: 1,},y: {ratio: 0.5,trackSize: 12,value: 0.1,trackFill: '#000',trackFillOpacity: 1,},}}
滚动条可以在 Mark 层级配置。在 Ant Design Charts 中,每个标记(Mark)都有自己的滚动条。如果标记对应的比例尺是同步的,那么滚动条也会合并。
({scrollbar: {x: {}, // x轴滚动条y: {}, // y轴滚动条},});
属性 | 描述 | 类型 | 默认值 | 必选 |
---|---|---|---|---|
ratio | 滚动条的比例,为单页显示数据在总数据量上单比例 | number | 0.5 | |
value | 滚动条的起始位置, x 轴默认值为 0 , y 轴默认为 1 | [0, 1] | ||
slidable | 是否可以拖动 | boolean | true | |
scrollable | 是否支持滚轮滚动 | boolean | true | |
position | 滚动条相对图表方位 | string | bottom | |
isRound | 滚动条样式是否为圆角 | boolean | true | |
style | 滚动条样式配置,样式都可以直接在配置项中配置 | style |
{type: 'area',autoFit: true,height: 300,data: {type: 'fetch',value: 'https://assets.antv.antgroup.com/g2/unemployment-by-industry.json',},xField: (d) => new Date(d.date),yField: 'unemployed',colorField: 'industry',shapeField: 'smooth',transform: [{ type: 'stackY' }],scrollbar: {x: {// 配置项ratio: 0.2,value: 0.1,scrollable: true,slidable: true,isRound: true,position: 'top',// 滚动条滑快样式thumbFillOpacity: 0.2,thumbFill: '#000',thumbStroke: '#000',// 滚动条滑轨样式trackFill: '#fa0',trackStroke: '#f00',trackLineWidth: 2,trackFillOpacity: 1,trackSize: 14,trackLength: 300,},}}
style
滚动条样式配置,内部做了处理,可以直接在配置项配置样式。具体样式配置,可参考 滚动条滑块(thumb)、滚动条滑轨(track)。
属性 | 描述 | 类型 | 默认值 | 必选 |
---|---|---|---|---|
thumbFill | 滚动条滑块填充色 | string | #000 | |
thumbFillOpacity | 滚动条滑块填充色透明度 | number | 0.15 | |
thumbStroke | 滚动条滑块描边色 | string | – | |
thumbLineWidth | 滚动条滑块描边宽度 | number | – | |
thumbStrokeOpacity | 滚动条滑块描边色透明度 | number | – |
({scrollbar: {x: {thumbFill: '#1173a1',thumbFillOpacity: 1,thumbStroke: 'red',thumbLineWidth: 2,thumbStrokeOpacity: 0.9,},y: {},},});
属性 | 描述 | 类型 | 默认值 | 必选 |
---|---|---|---|---|
trackSize | 滚动条的轨道宽度 | number | 10 | |
trackLength | 滚动条的轨道长度 | number | ||
trackFill | 滚动条轨道填充色 | string | - | |
trackFillOpacity | 滚动条轨道填充色透明度 | number | 0 | |
trackLineWidth | 滚动条轨道描边宽度 | number | – | |
trackStroke | 滚动条轨道描边色 | string | – | |
trackStrokeOpacity | 滚动条轨道描边色透明度 | number | – |
({scrollbar: {x: {trackSize: 20,trackLength: 300,trackFillOpacity: 1,trackFill: 'red',trackLineWidth: 2,trackStroke: 'red',trackStrokeOpacity: 0.4,},y: {},},});
属性 | 描述 | 类型 |
---|---|---|
valuechange | 发生滚动变化时触发,通过事件监听 | ({detail: { oldValue: any; value: any }}) => void |
{autoFit: true,height: 300,data: {type: 'fetch',value:'https://gw.alipayobjects.com/os/bmw-prod/fb9db6b7-23a5-4c23-bbef-c54a55fee580.csv',},xField: 'letter',yField: 'frequency',y1Field: 0.000001,scale: { y: { type: 'log' } },scrollbar: { x: true }}