ImPlot 使用教程

ImPlot 使用教程

implotImmediate Mode Plotting项目地址:https://gitcode.com/gh_mirrors/im/implot

项目介绍

ImPlot 是一个为 Dear ImGui 设计的即时模式 GPU 加速绘图库。它旨在提供一流的 API，让 ImGui 的粉丝喜爱。ImPlot 非常适合实时可视化程序数据，创建交互式图表，并且只需最少的代码即可集成。就像 ImGui 一样，它不将最终用户负担在 GUI 状态管理上，避免 STL 容器和 C++ 头文件，并且没有外部依赖，除了 ImGui。

项目快速启动

安装 ImPlot

你可以通过 vcpkg 安装 ImPlot：

git clone https://github.com/Microsoft/vcpkg
cd vcpkg
./bootstrap-vcpkg.sh
./vcpkg integrate install
./vcpkg install implot

集成 ImPlot

在你的项目中添加以下文件：

• implot.h
• implot_internal.h
• implot.cpp
• implot_items.cpp
• 可选：implot_demo.cpp

创建和销毁 ImPlot 上下文：

ImGui::CreateContext();
ImPlot::CreateContext();

// 你的代码

ImPlot::DestroyContext();
ImGui::DestroyContext();

示例代码

以下是一个简单的示例，展示如何在 ImGui 窗口中绘制一个折线图：

ImGui::Begin("My Plot Window");
if (ImPlot::BeginPlot("My Line Plot")) {
    ImPlot::PlotLine("My Line Plot", x_data, y_data, 1000);
    ImPlot::EndPlot();
}
ImGui::End();

应用案例和最佳实践

实时数据可视化

ImPlot 非常适合实时数据可视化。例如，你可以使用 ImPlot 来绘制实时传感器数据或性能指标。

float x_data[1000];
float y_data[1000];

// 填充数据
for (int i = 0; i < 1000; ++i) {
    x_data[i] = i;
    y_data[i] = sin(i * 0.01);
}

ImGui::Begin("Real-time Plot");
if (ImPlot::BeginPlot("Sine Wave")) {
    ImPlot::PlotLine("Sine Wave", x_data, y_data, 1000);
    ImPlot::EndPlot();
}
ImGui::End();

交互式图表

ImPlot 提供了丰富的交互功能，如缩放、平移和数据点选择。

ImGui::Begin("Interactive Plot");
if (ImPlot::BeginPlot("Interactive Line Plot")) {
    ImPlot::PlotLine("Interactive Line", x_data, y_data, 1000);
    ImPlot::EndPlot();
}
ImGui::End();

典型生态项目

DearPyGui

DearPyGui 是一个为 Python 提供的 ImGui 绑定，它也支持 ImPlot。你可以使用 DearPyGui 在 Python 中创建交互式图表。

from dearpygui.core import *
from dearpygui.simple import *

with window("Main Window"):
    add_plot("My Plot")
    add_line_series("My Plot", "My Line", [0, 1, 2, 3, 4], [0, 1, 4, 9, 16])

start_dearpygui()

imgui-java

imgui-java 是一个为 Java 提供的 ImGui 绑定，它也支持 ImPlot。你可以使用 imgui-java 在 Java 中创建交互式图表。

ImGui.createContext();
ImPlot.createContext();

ImGui.begin("My Plot Window");
if (ImPlot.beginPlot("My Line Plot")) {
    float[] x_data = {0, 1, 2, 3, 4};
    float[] y_data = {0, 1, 4, 9, 16};
    ImPlot.plotLine("My Line", x_data, y_data);
    ImPlot.endPlot();
}
ImGui.end();

ImPlot.destroyContext();
ImGui.destroyContext();

通过

implotImmediate Mode Plotting项目地址:https://gitcode.com/gh_mirrors/im/implot