进度条

ScrollBar - 图1
Scroll bar 是一个静态插件，主要用于辅助 pan 和 pinch 交互以。

API

如何引入

  1. const F2 = require('@antv/f2/lib/index');
  2. const ScrollBar = require('@antv/f2/lib/plugin/scroll-bar');
  3.  
  4. // 注册插件 ScrollBar
  5. F2.Chart.plugins.register(ScrollBar); // 这里进行全局注册，也可以给 chart 的实例注册
  6.  
  7. // 或者给具体的 chart 实例注册
  8. const chart = new F2.Chart({
  9.   id: 'canvas',
  10.   plugins: ScrollBar
  11. });

引入插件之后，就可以调用 chart.scrollBar() 方法了。

  1. chart.scrollBar({
  2.   // 一些配置项
  3. });

配置项

属性名
类型
默认值
说明
mode
String
‘x’
用于确定进度条的渲染方向，可选值为 ‘x’, ‘y’, ‘xy’
xStyle
Object
  1. {
        backgroundColor: ‘rgba(202, 215, 239, .2)’,
        fillerColor: ‘rgba(202, 215, 239, .5)’,
        size: 4,
        lineCap: ‘round’,
        offsetX: 0,
        offsetY: 8
      }
用于设置 x 轴方向进度条的样式，其中：
  • backgroundColor：进度条背景色
  • fillColor: 范围进度条的背景色
  • size: 进度条线宽
  • lineCap: line 的图形属性
  • offsetX: 进度条 x 方向的偏移量
  • offsetY: 进度条 y 方向的偏移量
yStyle
Obect
  1. {
        backgroundColor: ‘rgba(202, 215, 239, .2)’,
        fillerColor: ‘rgba(202, 215, 239, .5)’,
        size: 4,
        lineCap: ‘round’,
        offsetX: 8,
        offsetY: 0
      }
用于设置 y 轴方向进度条的样式，其中：
  • backgroundColor：进度条背景色
  • fillColor: 范围进度条的背景色
  • size: 进度条线宽
  • lineCap: line 的图形属性
  • offsetX: 进度条 x 方向的偏移量
  • offsetY: 进度条 y 方向的偏移量

实例

原文: https://antv.alipay.com/zh-cn/f2/3.x/api/scroll-bar.html