支持时间通道

[pearmini]

Temporal Channel

目前 G2 里面只支持三种类型的通道

• 常量通道：{ x: 0}
• 转换通道：{ x: d => new Date(d) }
• 字段通道：{ x: 'name' }

对于时间类型的数据列没有太好的支持，所以这里希望增加一个时间通道，处理这种情况

开始使用

function render() {
  const data = [{ hour: '2020-12-02 23' }, { hour: '2020-12-03 23' }];
  chart.line().data(data).encode('x', {
    type: 'temporal', // 指定是一个时间通道
    value: 'hour',
    format: 'YYYY-MM-DD HH', // 内部使用 dayjs 去转换成 G2 scale 能使用的 Data 对象
  });
}

实现思路

在 encode 模块下增加一个：

// encode/temporal.ts

import dayjs from 'dayjs';

function Temporal({ value, format }) {
  return (data) => data.map((d) => dayjs(d[value], format).toDate());
}

[hustcc]

正式版本之前，暂不考虑。

因为还是没有办法内置，如果内置就需要找到一个日期库，这个日期库是否和 JavaScript 标准统一，业务数据的后端语言标准是不是符合 JavaScript。

[pearmini]

时间通道目前不内置的话，还有一个方法：自定义 Channel

// Temporal.js
import dayjs from 'dayjs';

function Temporal({ value, format }) {
  return (data) => data.map((d) => dayjs(d[value], format).toDate());
}

第一种使用形式：内联使用

import { Temporal } from './Temporal';

chart.line().data(data).encode("x", {
  type: Temporal, // 使用自定义的通道
  value: "hour",
  format: "YYYY-MM-DD HH",
});

第二种使用形式：注册使用

import { register } from '@antv/g2';
import { Temporal } from './Temporal';

register('encode.temporal', Temporal); // 注册

chart.line().data(data).encode("x", {
  type: 'temporal', // 使用
  value: "hour",
  format: "YYYY-MM-DD HH",
});

[hustcc]

chart
  .line()
  .encode("x", (d) => dayjs(d[props.x], "YYYY-MM-DD HH").toDate())
  .encode("y", props.y)
  .encode("tooltip", [props.y]) // 指定 tooltip 的数据
  .encode("color", props.series)
  .axis("x", {
    labelFormatter: (d) => dayjs(d[props.x], "YYYY-MM-DD HH").format("MM-DD HH")
  })
  .scale("x", {
    type: "time",
    format: (d) => "a"
  });

https://github.com/antvis/G2/issues/4454

上述代码，用户需要表达的是：怎么给一列数据定义一个格式，比如 format、parse，然后所有显示这列数据的地方统一使用这个格式定义。