Vega/Altair 时间与日期数据处理完全指南-CSDN博客

Vega/Altair 时间与日期数据处理完全指南

altair Declarative statistical visualization library for Python 项目地址: https://gitcode.com/gh_mirrors/alt/altair

前言

在数据可视化中，时间与日期数据的处理一直是个复杂而微妙的话题。Vega/Altair 作为基于 Python 的声明式可视化工具链，在处理时间数据时需要跨越 Python、JSON 和 JavaScript 三个不同的环境，每个环节都可能出现时区转换、格式解析等问题。本文将深入探讨如何在 Vega/Altair 中正确处理时间与日期数据。

基础概念

时间数据类型

在 Vega/Altair 中，时间数据主要通过以下方式表示：

本地时间：不包含时区信息的日期时间
时区感知时间：明确指定时区的日期时间
UTC 时间：协调世界时，全球统一的时间标准

核心处理流程

Python 端：使用 pandas 处理时间数据
序列化：将时间数据转换为 JSON 格式
JavaScript 端：Vega-Lite 解析并渲染时间数据

pandas 时间数据处理

基本用法

Vega/Altair 与 pandas 的时间序列处理深度集成。一个标准的无时区 pandas 日期时间列会被解释并显示为用户本地时间。

import altair as alt
from vega_datasets import data

# 加载示例数据集（西雅图每小时温度数据）
temps = data.seattle_temps()
temps.head()

检查数据类型可以看到时间列是标准的 64 位 datetime 类型，没有指定时区：

temps.dtypes

时间数据可视化

绘制时间序列图表时，建议显式指定时间类型编码（使用 :T）：

# 限制为前两周的数据
temps = temps[temps.date < '2010-01-15']

alt.Chart(temps).mark_line().encode(
    x='date:T',  # 显式指定时间类型
    y='temp:Q'
)

时间单位转换

Vega/Altair 提供了强大的时间单位转换功能，可以提取特定的时间单位（如小时、日、月等）。

热力图示例

alt.Chart(temps).mark_rect().encode(
    alt.X('hoursminutes(date):O').title('小时'),
    alt.Y('monthdate(date):O').title('日期'),
    alt.Color('temp:Q').title('温度(°F)')
)

时区处理

本地时区处理

默认情况下，无时区的时间数据会被视为本地时间。要为数据指定时区：

# 将时间本地化为太平洋时区
temps['date_pacific'] = temps['date'].dt.tz_localize('US/Pacific')
temps.dtypes

使用时区感知数据绘制图表时，渲染结果会根据浏览器的时区自动调整：

alt.Chart(temps).mark_rect().encode(
    alt.X('hoursminutes(date_pacific):O').title('小时'),
    alt.Y('monthdate(date_pacific):O').title('日期'),
    alt.Color('temp:Q').title('温度(°F)')
)

UTC 时间处理

为确保图表在不同时区用户间显示一致，可以使用 UTC 时间：

alt.Chart(temps).mark_rect().encode(
    alt.X('utchoursminutes(date_pacific):O').title('UTC小时'),
    alt.Y('utcmonthdate(date_pacific):O').title('UTC日期'),
    alt.Color('temp:Q').title('温度(°F)')
)

更彻底的做法是在 pandas 和 Vega-Lite 中都使用 UTC：

temps['date_utc'] = temps['date'].dt.tz_localize('UTC')

alt.Chart(temps).mark_rect().encode(
    alt.X('utchoursminutes(date_utc):O').title('小时'),
    alt.Y('utcmonthdate(date_utc):O').title('日期'),
    alt.Color('temp:Q').title('温度(°F)')
)

浏览器兼容性说明

不同浏览器对时间字符串的解析方式存在差异：

ES6 兼容浏览器：将无时区时间字符串视为本地时间
非 ES6 浏览器：将无时区时间字符串视为 UTC 时间

可以通过以下代码测试浏览器的兼容性：

import pandas as pd

df = pd.DataFrame({
    'local': ['2018-01-01T00:00:00'],
    'utc': ['2018-01-01T00:00:00Z']
})

alt.Chart(df).transform_calculate(
    compliant="hours(datum.local) != hours(datum.utc) ? true : false",
).mark_text(size=20, baseline='middle').encode(
    text=alt.condition('datum.compliant', alt.value('OK'), alt.value('not OK')),
    color=alt.condition('datum.compliant', alt.value('green'), alt.value('red'))
).properties(width=80, height=50)

如果显示红色"not OK"，表示浏览器不符合 ES6 标准，建议使用 UTC 时间以确保一致性。