如何在ue5.1里根据已有的json文件生成实时折线图，横轴时间两个竖轴

Question

如题
，如何在ue5.1里根据已有的json文件生成实时折线图，横轴时间两个竖轴，用的是蓝图类项目

Answer 1

下午好🌅🌅🌅
本答案参考通义千问

在 Unreal Engine 5.1（UE5.1） 中，根据已有的 JSON 文件生成 实时折线图，并实现 横轴为时间，两个纵轴 的图表显示，是一个涉及数据解析、UI 绘制和动态更新的综合任务。以下是一个详细的解决方案：

---

✅ 一、整体流程概述

1. 解析 JSON 数据
2. 创建 UI 控件（如 Line Chart）
3. 动态绘制折线图
4. 实现时间轴与双 Y 轴功能
5. 实时更新数据（可选）

---

🧩 二、具体步骤详解

1. 解析 JSON 数据

首先，你需要从 JSON 文件中读取数据，并将其转换为 UE5 的数据结构（如 TArray<FVector2D> 或自定义结构体）。

✅ 示例 JSON 格式：

{
  "data": [
    {"time": 0, "value1": 10, "value2": 20},
    {"time": 1, "value1": 15, "value2": 25},
    {"time": 2, "value1": 20, "value2": 30}
  ]
}

✅ C++ 解析代码示例（在 Actor 或 Blueprint 中调用）：

#include "Json.h"
#include "JsonUtilities.h"

void UMyBlueprintFunctionLibrary::ParseJSON(const FString& JsonString)
{
    TSharedPtr<FJsonObject> JsonObject;
    TJsonReaderFactory<>::Create(JsonString)->ReadObject(JsonObject);

    if (JsonObject.IsValid())
    {
        TArray<TSharedPtr<FJsonValue>> DataArray = JsonObject->GetArrayField("data");
        for (const auto& Item : DataArray)
        {
            TSharedPtr<FJsonObject> DataObj = Item->AsObject();
            float Time = DataObj->GetNumberField("time");
            float Value1 = DataObj->GetNumberField("value1");
            float Value2 = DataObj->GetNumberField("value2");

            // 存储到数组中
            MyDataArray.Add(FVector2D(Time, Value1));
            MyDataArray2.Add(FVector2D(Time, Value2));
        }
    }
}

---

2. 创建 UI 控件（Line Chart）

UE5 提供了 Canvas Panel 和 Widget Blueprint 来构建 UI。你可以使用以下方式实现折线图：

✅ 方法一：使用 Custom Widget + Draw Canvas

• 创建一个 Widget Blueprint，在其 OnPaint 事件中使用 DrawLine 或 DrawRect 绘制折线。
• 使用 FCanvas 类进行绘图。

✅ 方法二：使用 Third-party 插件（推荐）

• 使用 UWLineChart 或 UE5 Chart Plugin 等插件，简化开发流程。

---

3. 动态绘制折线图

在 Widget Blueprint 中，通过 DrawLine 方法绘制两条折线。

✅ 示例代码（在 Widget Blueprint 的 OnPaint 事件中）：

FCanvas* Canvas = ...; // 获取 Canvas 指针

for (int i = 0; i < MyDataArray.Num() - 1; ++i)
{
    FVector2D StartPoint = MyDataArray[i];
    FVector2D EndPoint = MyDataArray[i + 1];

    // 绘制第一根折线
    Canvas->DrawLine(StartPoint, EndPoint, FLinearColor::Red);
}

for (int i = 0; i < MyDataArray2.Num() - 1; ++i)
{
    FVector2D StartPoint = MyDataArray2[i];
    FVector2D EndPoint = MyDataArray2[i + 1];

    // 绘制第二根折线
    Canvas->DrawLine(StartPoint, EndPoint, FLinearColor::Blue);
}

---

4. 实现时间轴与双 Y 轴功能

为了实现 横轴为时间，双 Y 轴，需要做以下处理：

✅ 实现步骤：

• 横轴（X轴）：将时间值映射到屏幕宽度上。
• Y轴1（左轴）：将 value1 映射到屏幕高度。
• Y轴2（右轴）：将 value2 映射到屏幕高度，但使用不同的比例。

✅ 映射公式示例：

float XScale = ScreenWidth / MaxTime; // 假设最大时间为 100
float Y1Scale = ScreenHeight / MaxValue1;
float Y2Scale = ScreenHeight / MaxValue2;

FVector2D XPos = FVector2D(Time * XScale, 0);
FVector2D Y1Pos = FVector2D(0, (MaxValue1 - Value1) * Y1Scale);
FVector2D Y2Pos = FVector2D(ScreenWidth, (MaxValue2 - Value2) * Y2Scale);

---

5. 实时更新数据（可选）

如果需要 实时更新 折线图，可以：

• 使用定时器（Timer）定期更新数据。
• 在每次更新后重新绘制图形。

✅ 示例代码（在 Actor 中设置定时器）：

FTimerHandle TimerHandle;

void AMyActor::BeginPlay()
{
    GetWorld()->GetTimerManager().SetTimer(TimerHandle, this, &AMyActor::UpdateChart, 1.0f, true);
}

void AMyActor::UpdateChart()
{
    // 从 JSON 中读取新数据
    ParseJSON(NewJsonString);

    // 通知 Widget 更新
    MyWidget->Invalidate();
}

---

📦 三、最终建议

| 步骤 | 推荐方式 | |------|----------| | JSON 解析 | 使用 TJsonReader 或第三方库 | | 图表绘制 | 使用 FCanvas 自定义或第三方插件 | | 双 Y 轴 | 手动计算坐标映射 | | 实时更新 | 使用定时器或数据监听机制 |

---

🔧 四、完整代码片段（C++）

// 假设你有一个 Widget Blueprint，名为 MyLineChartWidget
void AMyActor::UpdateChart()
{
    // 从 JSON 中读取数据
    ParseJSON(JsonData);

    // 通知 Widget 更新
    MyLineChartWidget->Invalidate();
}

---

⚠️ 注意事项

• 性能优化：频繁调用 Invalidate() 可能影响性能，建议控制更新频率。
• 坐标映射：确保时间与数值的范围合理，避免超出屏幕边界。
• UI 适配：不同分辨率下需调整坐标比例。

---

✅ 总结

在 UE5.1 中根据 JSON 文件生成 实时折线图，关键是：

1. 正确解析 JSON 数据；
2. 在 Widget 中绘制折线图；
3. 实现时间轴与双 Y 轴逻辑；
4. 支持实时更新（可选）。

如果你有具体的 JSON 数据格式或 UI 设计需求，可以进一步提供，我可以帮助你定制更详细的实现方案。