使用滑块

使用滑块

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

如下图所示：

image.png

Slider 在 G2 4.0 中作为内置组件，方便使用。

使用方式

  • 按需引入

如果使用 G2 core 进行自定义按需引入，可以参考：

  1. import Slider from '@antv/g2/lib/chart/controller/slider';
  2. import { registerComponentController, Chart } from '@antv/g2/lib/core';
  4. // 引入 slider 组件
  5. registerComponentController('slider', Slider);
  7. const chart = new Chart({
  8.   container: 'container',
  9.   autoFit: true,
  10.   height: 440,
  11.   padding: [16, 32, 64, 32],
  12. });
  14. chart.data(DATA);
  16. chart.option('slider', {
  17.   end: 0.8,
  18. });
  20. chart.render();
  • 全量引入

如果全量引入，那么 Slider 作为 G2 内置组件，可以直接使用。

  1. import { Chart } from '@antv/g2';
  3. const chart = new Chart({
  4.   container: 'container',
  5.   autoFit: true,
  6.   height: 440,
  7.   padding: [16, 32, 64, 32],
  8. });
  10. chart.data(DATA);
  12. chart.option('slider', {
  13.   end: 0.8,
  14. });
  16. chart.render();

配置项

Slider 全量配置项如下：

  1. export interface TrendCfg {
  2.   // 数据
  3.   readonly data: number[];
  4.   // 样式
  5.   readonly smooth?: boolean;
  6.   readonly isArea?: boolean;
  7.   readonly backgroundStyle?: object;
  8.   readonly lineStyle?: object;
  9.   readonly areaStyle?: object;
  10. }
  12. export interface SliderOption {
  13.   // 缩略轴高度
  14.   readonly height?: number;
  16.   // 背景趋势的配置
  17.   readonly trendCfg?: TrendCfg;
  18.   readonly backgroundStyle?: any;
  19.   readonly foregroundStyle?: any;
  20.   readonly handlerStyle?: any;
  21.   readonly textStyle?: any;
  22.   // 允许滑动位置
  23.   readonly minLimit?: number;
  24.   readonly maxLimit?: number;
  25.   // 初始位置
  26.   readonly start?: number;
  27.   readonly end?: number;
  28. }

实例

线上地址。