Slider

    • Slider 组件作为 G2 的交互插件，必须在 G2 引入的前提下使用！
    • 为了做到纯粹和解耦，Slider 组件是完全基于数据的筛选操作，需要配合 以及状态量使用，当滑动条发生变化时，通过定义 onChange 更新状态量，来达到图表的自动更新。
      创建 Slider 的方式如下：

    (string | HTMLElement)

    对应 slider 的 DOM 容器，可以传入该 DOM 的 id 或者直接传入容器的 html 节点对象。

    width

    (string | number)

    设置 slider 组件的宽度，默认为 ，表示自适应容器的宽度。

    height

    (number)

    设置 slider 组件的高度，默认为 26，单位为 'px'。

    padding

    设置 slider 组件所在画布 canvas 的内边距，用于与图表对齐（默认图表的 canvas 容器也是带了内边距），默认值同 G2 默认主题的 padding 相同，[ 20, 20, 95, 80 ]。

    xAxis

    (string)

    必须声明，我们的 Slider 是带有背景图表的滑动条组件，该字段用于声明该背景图表的横轴映射字段，同时该字段也是数据过滤字段。

    yAxis

    (string)

    必须声明，我们的 Slider 是带有背景图表的滑动条组件，该字段用于声明该背景图表的纵轴轴映射字段。

    (array | dataview)

    start

    (number | string)

    声明滑动条起始滑块的位置对应的数据值，默认为最小值。

    end

    (number | string)

    声明滑动条结束滑块的位置对应的数据值，默认为最大值。

    scales

    (object)

    用于对 xAxis 和 字段进行，用于同操作的图表中对应的列定义相同。

    示例代码：

    1. scales: {
    2.   [`${xAxis}`]: {
    3.     type: 'time',
    4.   }
    5. }

    onChange

    (function)

    当滑动条滑块发生变化时，触发该回调函数，主要用于更新 ds 的状态量。该回调函数会提供一个参数，该参数是一个对象，包含如下属性：

    • startValue 起点滑块当前对应的原始数据值，如果是 time 或者 timeCat 类型是，该值为时间戳，请注意。
    • endValue 终点滑块当前对应的原始数据值，如果是 time 或者 timeCat 类型是，该值为时间戳，请注意。
    • startText 起点滑块当前的显示文本值
    • endText 终点滑块当前的显示文本值

    fillerStyle

    (object)

    选中区域的样式配置，默认配置如下：

    1. {
    2.   fill: '#BDCCED',
    3.   fillOpacity: 0.3
    4. }

    图中红框框选区域：

    slider 整体背景样式。

    textStyle

    (object)

    slider 辅助文本字体样式配置。

    handleStyle

    (object)

    slider 滑块的样式配置，可配置的属性如下：

    backgroundChart

    (object)

    slider 滑块的背景图表配置，可配置其图表类型以及颜色：

    1. {
    2.   type: [ 'area' ], // 图表的类型，可以是字符串也可是是数组
    3.   color: '#CCD6EC'

    方法

    render

    slider.render() 渲染组件，即将其绘制到页面上。

    changeData

    更新数据源。

    • 示例点击更新数据

    slider.repaint() 重绘。

    destroy

    销毁。

    原文: https://antv.alipay.com/zh-cn/g2/3.x/api/slider.html