如何在Kibana插件中将Elasticsearch相对时间转为绝对时间？

问题场景 #

使用EUI日期选择器时，选择相对时间（如「最近30天」）会得到now-30d、now这类Elasticsearch专属的相对时间字符串，直接传入dateFormatter会返回「Invalid date」，导致横轴标题显示异常；仅选择绝对日期时能正常显示。

解决方案 #

1. 编写ES相对时间转换函数 #

利用Kibana内置的moment库（无需额外安装），编写函数将相对时间转为指定格式的绝对日期：

import moment from 'moment';

// 转换ES相对时间为中文格式的绝对日期
const formatAxisDateTitle = (timeStr: string): string => {
  // 处理相对时间格式
  if (timeStr.startsWith('now')) {
    const parsedTime = moment(timeStr);
    if (parsedTime.isValid()) {
      return parsedTime.format('YYYY年MM月DD日');
    }
  }
  // 处理绝对时间格式
  const absoluteTime = moment(timeStr);
  return absoluteTime.isValid() 
    ? absoluteTime.format('YYYY年MM月DD日') 
    : '无效日期';
};

2. 修改组件代码 #

将横轴Axis的title属性替换为上述转换函数的调用：

<Chart>
  <Axis
    id="bottom"
    title={formatAxisDateTitle(startDate)}
    position={Position.Bottom}
    tickFormat={dateFormatter}
  />
  <Axis
    id="left"
    position={Position.Left}
    tickFormat={(d: any) => Number(d).toFixed(0)}
  />
  <BarSeries
    id="data"
    xScaleType={ScaleType.Time}
    yScaleType={ScaleType.Linear}
    xAccessor={["x"]}
    yAccessors={["y"]}
    stackAccessors={["x"]}
    data={chartData}
  /> 
</Chart>

额外说明 #

• moment原生支持Elasticsearch的相对时间语法，包括now-30d、now/d、now+1w等格式
• 可根据需求调整日期格式字符串，比如YYYY-MM-DD HH:mm:ss来显示时分秒
• 如果需要更贴合Kibana原生逻辑，也可以使用@kbn/data-plugin中的parseRelativeDate工具函数

内容的提问来源于stack exchange，提问作者Mohammad Rezaei