简介

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

如下图所示:Slider 滑块插件 - 图1

Slider 工作原理

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

如何使用 Slider 组件

引入 Slider 组件

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

(1)方式 1: 通过使用 <script type="text/javascript"></script> 标签引入。

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

(2)方式 2:npm 模块引入。

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

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

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

创建 Slider 的 dom 容器

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

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

创建 Slider 组件对象并渲染

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

快速上手

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

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

Slider 滑块插件 - 图2

完整的代码:

  1. $.getJSON('/assets/data/peking-aqi.json', data => {
  2. // !!! 创建 DataSet,并设置状态量 start end
  3. const ds = new DataSet({
  4. state: {
  5. start: '2004-01-01',
  6. end: '2007-09-24'
  7. }
  8. });
  9. // !!! 通过 ds 创建 DataView
  10. const dv = ds.createView();
  11. dv.source(data)
  12. .transform({ // !!! 根据状态量设置数据过滤规则,
  13. type: 'filter',
  14. callback: obj => {
  15. return obj.date <= ds.state.end && obj.date >= ds.state.start;
  16. }
  17. });
  18. const chart = new G2.Chart({
  19. id: 'c1',
  20. forceFit: true,
  21. height: 400,
  22. animate: false
  23. });
  24. chart.scale({
  25. date: {
  26. type: 'time',
  27. mask: 'MM-DD',
  28. alias: '日期'
  29. }
  30. });
  31. const view1 = chart.view({
  32. start: {
  33. x: 0,
  34. y: 0
  35. },
  36. end: {
  37. x: 1,
  38. y: 0.45
  39. }
  40. });
  41. view1.source(dv); // !!! 注意数据源是 ds 创建 DataView 对象
  42. view1.line().position('date*aqi');
  43. const view2 = chart.view({
  44. start: {
  45. x: 0,
  46. y: 0.55
  47. },
  48. end: {
  49. x: 1,
  50. y: 1
  51. }
  52. });
  53. view2.source(dv); // !!! 注意数据源是 ds 创建 DataView 对象
  54. view2.interval().position('date*aqi');
  55. chart.render();
  56. // !!! 创建 slider 对象
  57. const slider = new Slider({
  58. container: 'slider',
  59. start: '2004-01-01',
  60. end: '2007-09-24',
  61. data, // !!! 注意是原始数据,不要传入 dv
  62. xAxis: 'date',
  63. yAxis: 'aqi',
  64. onChange: ({ startText, endText }) => {
  65. // !!! 更新状态量
  66. ds.setState('start', startText);
  67. ds.setState('end', endText);
  68. }
  69. });
  70. slider.render();
  71. });