如何转换JSON格式适配Ant Design折线图，实现多指标折线绘制需求

你需要做的核心是把当前宽表结构的原始数据，转换为AntD Charts要求的长表结构，以下是两种可直接落地的实现方案：

方案1：Pandas实现（推荐） #

代码简洁、处理效率高，适合绝大多数场景，尤其是数据量较大的情况：

import pandas as pd

# raw_data为你从BigQuery拉取到的原始数据列表
df = pd.DataFrame(raw_data)
# 合并date和hour为统一的x轴时间字段，可按需调整时间格式
df['time'] = df.apply(lambda x: f"{x['date']} {int(float(x['hour'])):02d}:00", axis=1)

# 宽表转长表
result_df = df.melt(
    # 保留作为x轴的维度字段，需要保留原始date、hour可直接追加到数组中
    id_vars=['time'],
    # 指定要拆分为独立折线的所有指标字段
    value_vars=['predict', 'lower_80', 'upper_80', 'lower_90', 'upper_90', 'lower_95', 'upper_95'],
    var_name='category', # 对应AntD Charts要求的分类字段
    value_name='value' # 对应AntD Charts要求的数值字段
)

# 转换为JSON格式返回前端即可
formatted_json = result_df.to_dict('records')

方案2：原生Python实现 #

适合不想额外引入Pandas依赖、数据量较小的场景：

# 要生成独立折线的指标列表
metrics = ['predict', 'lower_80', 'upper_80', 'lower_90', 'upper_90', 'lower_95', 'upper_95']
formatted_data = []

for item in raw_data:
    # 拼接x轴时间字段，按需调整格式即可
    time_str = f"{item['date']} {int(float(item['hour'])):02d}:00"
    # 遍历每个指标生成对应条目
    for metric in metrics:
        formatted_data.append({
            'time': time_str,
            'category': metric,
            'value': item[metric]
        })

前端调用说明 #

拿到转换后的数据直接传入AntD Charts的Line组件即可，核心配置参考：

import { Line } from '@ant-design/charts';

const config = {
  data: formattedJson, // 后端返回的转换后数据
  xField: 'time',
  yField: 'value',
  seriesField: 'category',
  // 其他样式、交互配置按需添加
};

export default () => <Line {...config} />;

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