滚动条（Scrollbar）

概述

Ant Design Charts 中 滚动条（Scrollbar） 可以用于过滤数据，可以和 x 或者 y 通道绑定的，滚动条默认都是关闭的。解决图表信息过于密集而无法完全展示的问题。

何时使用：内容是否超出显示区域取决于内容的多少以及显示区域的尺寸，当需要显示的内容在纵向方向上超过显示区域的大小时，应当使用垂直滚动条以控制显示的部分，横向滚动条同理。

{
  "autoFit": true,
  "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轴滚动条
  },
});

滚动条也可以在 View 层级配置。滚动条具有传递性。视图上声明的滚动条会传递给 children 声明的标记，如果该标记有对应通道的滚动条，就合并；否则不影响。

({
  scrollbar: {
    x: {},
    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

{
  "autoFit": true,
  "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

style 滚动条样式配置，内部做了处理，可以直接在配置项配置样式。具体样式配置，可参考滚动条滑块(thumb)、滚动条滑轨(track)。

滚动条滑块(thumb)

属性	描述	类型	默认值
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: {},
  },
});

滚动条滑轨(track)

属性	描述	类型	默认值
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,
  "scale": {
    "y": {
      "type": "log"
    }
  },
  "scrollbar": {
    "x": true
  }
}