G6 中的 TimeBar 组件

AntV G6 内置了三种形态的 TimeBar 组件：

• 带有趋势图的 TimeBar 组件；
• 简易版的 TimeBar 组件；
• 刻度 TimeBar 组件。

并且每种类型的 TimeBar 组件都可以配合播放、快进、后退等控制按钮组使用。

趋势图 TimeBar 组件

简易版 TimeBar 组件

刻度 TimeBar 组件

在趋势图 TimeBar 基础上，我们可以通过配置数据，实现更加复杂的趋势图 TimeBar 组件，如下图所示。

虽然 G6 提供了各种不同类型的 TimeBar 组件，但在使用的方式却非常简单，通过配置字段就可以进行区分。

关于 TimeBar 的使用案例，请参考这里。

使用 TimeBar 组件

使用 G6 内置的 TimeBar 组件，和使用其他组件的方式完全相同。

import G6 from '@antv/g6'
const timebar = new G6.TimeBar({
  width: 500,
  height: 150,
  padding: 10,
  type: 'trend',
  trend: {
    data: timeBarData
  },
});
const graph = new G6.Graph({
  container: 'container',
  width,
  height,
  plugins: [timebar],
});

通过上面的方式，我们就可以在图中使用 TimeBar 组件了，当实例化 TimeBar 时，type 参数值为 trend，表示我们实例化的是趋势图组件，效果如下图所示。

当设置 type 为 simple 时，就可以使用简易版的 TimeBar。

当设置 type 为 tick 时，表示我们要使用刻度 TimeBar 组件，但此时要注意的是，刻度时间轴的配置项是通过 tick 对象配置而不是 trend 对象，这也是刻度时间轴和趋势即简易时间轴不同的地方。

const timebar = new G6.TimeBar({
  width,
  height: 150,
  type: 'tick',
  tick: {
    data: timeBarData,
    width,
    height: 42,
    tickLabelFormatter: d => {
      const dateStr = `${d.date}`
      if ((count - 1) % 10 === 0) {
        return `${dateStr.substr(0, 4)}-${dateStr.substr(4, 2)}-${dateStr.substr(6, 2)}`;
      }
      return false;
    },
    tooltipFomatter: d => {
      const dateStr = `${d}`
      return `${dateStr.substr(0, 4)}-${dateStr.substr(4, 2)}-${dateStr.substr(6, 2)}`;
    }
  },
});

参数定义

接口定义

完整的 TimeBar 的接口定义如下：

interface TimeBarConfig extends IPluginBaseConfig {
  // position size
  readonly x?: number;
  readonly y?: number;
  readonly width?: number;
  readonly height?: number;
  readonly padding?: number;
  readonly type?: 'trend' | 'simple' | 'tick';
  // 趋势图配置项
  readonly trend?: TrendConfig;
  // 滑块、及前后背景的配置
  readonly slider?: SliderOption;
  // 刻度时间轴配置项
  readonly tick?: TimeBarSliceOption;
  // 控制按钮
  readonly controllerCfg?: ControllerCfg;
  rangeChange?: (graph: IGraph, minValue: string, maxValue: string) => void;
  valueChange?: (graph: IGraph, value: string) => void;
}

接口参数说明

TrendConfig 接口定义

暂不支持刻度文本的样式配置

interface TrendConfig {
  // 数据
  readonly data: {
    date: string;
    value: string;
  }[];
  // 位置大小
  readonly x?: number;
  readonly y?: number;
  readonly width?: number;
  readonly height?: number;
  // 样式
  readonly smooth?: boolean;
  readonly isArea?: boolean;
  readonly lineStyle?: ShapeStyle;
  readonly areaStyle?: ShapeStyle;
  readonly interval?: Interval;
}

TrendConfig 参数说明

SliderOption 接口定义

export type SliderOption = Partial<{
  readonly width?: number;
  readonly height?: number;
  readonly backgroundStyle?: ShapeStyle;
  readonly foregroundStyle?: ShapeStyle;
  // 滑块样式
  readonly handlerStyle?: {
    width?: number;
    height?: number;
    style?: ShapeStyle;
  };
  readonly textStyle?: ShapeStyle;
  // 初始位置
  readonly start: number;
  readonly end: number;
  // 滑块文本
  readonly minText: string;
  readonly maxText: string;
}>;

SliderOption 参数说明

TimeBarSliceOption

export interface TimeBarSliceOption {
  // position size
  readonly x?: number;
  readonly y?: number;
  readonly width?: number;
  readonly height?: number;
  readonly padding?: number;
  // styles
  readonly selectedTickStyle?: TickStyle;
  readonly unselectedTickStyle?: TickStyle
  readonly tooltipBackgroundColor?: string;
  readonly start?: number;
  readonly end?: number;
  // 数据
  readonly data: {
    date: string;
    value: string;
  }[];
  // 自定义标签格式化函数
  readonly tickLabelFormatter?: (d: any) => string | boolean;
  // 自定义 tooltip 内容格式化函数
  readonly tooltipFomatter?: (d: any) => string;
}

TimeBarSliceOption 参数说明

ControllerCfg 接口定义

暂不支持 控制按钮暂不支持配置样式 不支持循环播放

type ControllerCfg = Partial<{
  readonly x?: number;
  readonly y?: number;
  readonly width: number;
  readonly height: number;
  /** 播放速度，1 个 tick 花费时间 */
  readonly speed?: number;
  /** 是否循环播放 */
  readonly loop?: boolean;
  readonly hiddleToggle: boolean;
  readonly fill?: string;
  readonly stroke?: string;
  readonly preBtnStyle?: ShapeStyle;
  readonly nextBtnStyle?: ShapeStyle;
  readonly playBtnStyle?: ShapeStyle;
}>

ControllerCfg 参数说明