logoCreated with Sketch.

G2

Slider 滑块插件

6 min read

提示：Slider 滑块插件已经不再维护，请使用 [chart.interaction('slider')](/zh/docs/api/interaction/#slider- 滑块） 接口。

用于数据范围的选择插件，尤其适用于大数据量的图表绘制，帮助用户更好地关注某一范围的数据可视化结果。

如下图所示：

image | left

Slider 工作原理

Slider 组件是完全基于数据的交互组件，同 chart 并无任何关联，无论是你的滑动条想要操纵多少个 chart 或者 view 都没有关系。其滑动时与图表的联动行为，需要同 DataSet 中的状态量相结合，通过定义每个 Slider 对象的 onChange 回调函数，在其中动态更新 DataSet 的状态量来实现数据过滤，下面会通过具体的例子来详细说明，但是首先我们需要了解如何引入 Slider 组件。

如何使用 Slider 组件

引入 Slider 组件

有两种引入 Slider 组件的方式：

（1）方式 1： 通过使用 <script type="text/javascript"></script> 标签引入。

<!-- 引入 Slider 组件脚本 -->
<script src="{{ url['g2-plugin-slider'] }}"></script>

（2）方式 2：npm 模块引入。

首先需要安装 Slider 模块：npm install @antv/g2-plugin-slider，然后按照如下代码引入

import G2 from '@antv/g2';
import '@antv/g2-plugin-slider';

! 注意：Slider 组件作为 G2 的交互插件，必须在 G2 引入的前提下使用哦。

创建 Slider 的 dom 容器

然后还需要创建一个展示 Slider 插件的 DOM 容器，如：

<div id="slider"></div>

创建 Slider 组件对象并渲染

// 创建 Slider
const slider = new Slider({
  container: 'slider', // dom 容器 id 或者 dom 容器对象
  width: 600, // slider 的宽度，默认为 'auto'，即自适应宽度
  height: 26, // slider 的高度，默认为 '26px'
  padding: [ 20, 120, 100 ], // slider 所在画布 canvas 的内边距，用于对齐图表，默认与图表默认的 padding 相同
  start: '2015-04-07', // 和状态量对应，滑块的起始点数值，如果是时间类型，建议将其转换为时间戳，方便数据过滤
  end: '2015-08-01', // 和状态量对应，滑块的结束点数值，如果是时间类型，建议将其转换为时间戳，方便数据过滤
  minSpan: 30 * 24 * 60 * 60 * 1000, // 可选，用于设置滑块的最小范围，时间类型的数值必须使用时间戳，这里设置最小范围为 30 天
  maxSpan: 120 * 24 * 60 * 60 * 1000, // 可选，用于设置滑块的最大范围，时间类型的数值必须使用时间戳，这里设置最大范围为 120 天
  data: [], // slider 的数据源
  xAxis: 'time', // 背景图的横轴对应字段，同时为数据筛选的字段
  yAxis: 'volumn', // 背景图的纵轴对应字段
  onChange: ({ startValue, endValue }) => {
    ds.setState('start', startValue);
    ds.setState('end', endValue);
  } // 更新数据状态量的回调函数
});
slider.render(); // 渲染

快速上手

说明：重要并且必须声明的步骤，我在代码中使用 // !!! 这种格式的注释标注。

当用户没有设置 start end 两个参数时（即数据的选择范围），slider 会使用默认的选择范围，即展示全部数据。

完整的代码：

$.getJSON('/assets/data/peking-aqi.json', data => {
    // !!! 创建 DataSet，并设置状态量 start end
    const ds = new DataSet({
      state: {
        start: '2004-01-01',
        end: '2007-09-24'
      }
    });
    // !!! 通过 ds 创建 DataView
    const dv = ds.createView();
    dv.source(data)
      .transform({ // !!! 根据状态量设置数据过滤规则，
        type: 'filter',
        callback: obj => {
          return obj.date <= ds.state.end && obj.date >= ds.state.start;
        }
      });
    const chart = new G2.Chart({
      id: 'c1',
      forceFit: true,
      height: 400,
      animate: false
    });

    chart.scale({
      date: {
        type: 'time',
        mask: 'MM-DD',
        alias: '日期'
      }
    });

    const view1 = chart.view({
      start: {
        x: 0,
        y: 0
      },
      end: {
        x: 1,
        y: 0.45
      }
    });
    view1.source(dv);  // !!! 注意数据源是 ds 创建 DataView 对象
    view1.line().position('date*aqi');

    const view2 = chart.view({
      start: {
        x: 0,
        y: 0.55
      },
      end: {
        x: 1,
        y: 1
      }
    });
    view2.source(dv); // !!! 注意数据源是 ds 创建 DataView 对象
    view2.interval().position('date*aqi');
    chart.render();

    // !!! 创建 slider 对象
    const slider = new Slider({
      container: 'slider',
      start: '2004-01-01',
      end: '2007-09-24',
      data, // !!! 注意是原始数据，不要传入 dv
      xAxis: 'date',
      yAxis: 'aqi',
      onChange: ({ startText, endText }) => {
        // !!! 更新状态量
        ds.setState('start', startText);
        ds.setState('end', endText);
      }
    });
    slider.render();
});