Slider

      使用前提：

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

      1. new Slider({
      2.   container: {string} | {HTMLElement},
      3.   width?: {number} | {string},
      4.   height?: {number},
      5.   padding?: {object} | {number} | {array},
      6.   xAxis: {string},
      7.   yAxis: {string},
      8.   start: {string} | {number},
      9.   end: {string} | {number},
      10.   data: {array} | {dataview},
      11.   fillerStyle?: {object},
      12.   backgroundStyle?: {object},
      13.   textStyle?: {object},
      14.   handleStyle?: {object},
      15.   backgroundChart?: {object}
      16. });

      属性

      container

      (string | HTMLElement)

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

      width

      (string | number)

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

      height

      (number)

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

      padding

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

      xAxis

      (string)

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

      yAxis

      (string)

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

      data

      (array | dataview)

      必须声明，数据源。

      start

      (number | string)

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

      end

      (number | string)

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

      scales

      (object)

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

      示例代码：

      1. scales: {
      2.   [`${xAxis}`]: {
      3.     type: 'time',
      4.     mask: 'MM-DD'
      5.   }
      6. }

      onChange

      (function)

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

      1. onChange: (obj) => {
      2.   const { startValue, endValue, startText, endText } = obj;
      3. }

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

      说明：之所以区分 text 和 value，是因为大部分情况下用户会对数值进行格式化，所以在设置状态量和更新状态量时，需要保证前后数值类型的一致。

      fillerStyle

      (object)

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

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

      图中红框框选区域： Slider - 图1

      backgroundStyle

      (object)

      slider 整体背景样式。

      textStyle

      (object)

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

      handleStyle

      (object)

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

      1. {
      2.   img: 'https://gw.alipayobjects.com/zos/rmsportal/QXtfhORGlDuRvLXFzpsQ.png', // 可以使图片地址也可以是 data urls
      3.   width: 5,
      4.   height: 26
      5. }

      backgroundChart

      (object)

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

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

      方法

      render

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

      changeData

      slider.changeData(data) 更新数据源。

      • 示例

      1. $.getJSON('/assets/data/top2000-disc.json',function(data) {
      2.   const ds = new DataSet({
      3.     state: {
      4.       from: 1970,
      5.       to: 1990
      6.     }
      7.   });
      8.   const dv = ds.createView();
      9.   dv.source(data)
      10.     .transform({
      11.       type: 'filter',
      12.       callback: obj => {
      13.         return obj.release >= ds.state.from && obj.release <= ds.state.to;
      14.       }
      15.     });
      16.  
      17.   const chart = new G2.Chart({
      18.     container: 'mountNode',
      19.     forceFit: true,
      20.     height: 350,
      21.     animate: false,
      22.     padding: [ 20, 100, 60 ]
      23.   });
      24.   chart.source(dv, { 
      25.     count: {
      26.       alias: 'top2000 唱片总量'
      27.     },
      28.     release: {
      29.       alias: '唱片发行年份'
      30.     }
      31.   });
      32.   chart.interval().position('release*count').color('#e50000');
      33.   chart.render();
      34.  
      35.   const slider = new Slider({
      36.     container: document.getElementById('slider'),
      37.     padding: [ 20, 100, 60 ],
      38.     start: ds.state.from,
      39.     end: ds.state.to,
      40.     data,
      41.     xAxis: 'release',
      42.     yAxis: 'count',
      43.     scales: {
      44.       release: {
      45.         formatter: (val) => {
      46.           return parseInt(val, 10);
      47.         }
      48.       }
      49.     },
      50.     backgroundChart: {
      51.       type: 'interval',
      52.       color: 'rgba(0, 0, 0, 0.3)'
      53.     },
      54.     onChange: ({ startText, endText }) => {
      55.       // !!! 更新状态量
      56.       ds.setState('from', startText);
      57.       ds.setState('to', endText);
      58.     }
      59.   });
      60.  
      61.   slider.render();
      62.  
      63.   // 更新数据源示例
      64.   $('#changeData').click( ev => {
      65.     const newData = data.slice(10, 90);
      66.     ds.setState('from', 2000);
      67.     ds.setState('to', 2015);
      68.     dv.source(newData); // dv 重新装载数据即可
      69.     slider.start = 2000;
      70.     slider.end = 2015;
      71.     slider.changeData(newData);
      72.   });
      73. });

      repaint

      slider.repaint() 重绘。

      destroy

      slider.destroy() 销毁。

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