imgui-plot 使用指南

imgui-plot 使用指南

imgui-plot An improved plot widget for Dear ImGui, aimed at displaying audio data 项目地址: https://gitcode.com/gh_mirrors/im/imgui-plot

imgui-plot 是一个针对 Dear ImGui 的增强版图表控件，专为显示音频数据设计。它弥补了Dear ImGui中原有PlotLines()功能在显示细节上的不足，添加了如网格线、对数缩放以及自定义提示等实用特性。

安装指南

简易方法：最简单的集成方式是手动拷贝。只需将include/imgui_plot.h和src/imgui_plot.cpp文件放置于您的Dear ImGui库同级目录下即可完成整合。

CMake集成：对于使用CMake作为构建系统的项目，推荐通过FetchContent模块自动化拉取并整合imgui-plot。在您的CMakeLists.txt中加入以下代码：

include(FetchContent)
FetchContent_Declare(imgui_plot
    GIT_REPOSITORY https://github.com/soulthreads/imgui-plot.git
    GIT_TAG v0.1.0
)
FetchContent_MakeAvailable(imgui_plot)
target_link_libraries(${PROJECT_NAME} PRIVATE imgui_plot)

记得适当地配置IMGUI_INCLUDE_DIR指向您的Dear ImGui源码位置（如果不同于默认路径）。

项目使用说明

imgui-plot强调通过结构体PlotConfig来配置图表参数，而非直接函数调用传递大量参数，以提升代码可读性。

简单示例

首先，初始化一个PlotConfig对象，设定必要的参数，然后调用ImGui::Plot来显示图表。

ImGui::PlotConfig conf;
conf.values.xs = x_data; // 可选：指定X轴数据
conf.values.ys = y_data; // 必须设置Y轴数据
conf.values.count = data_count; // 数据点数量
conf.scale.min = -1; // Y轴最小值
conf.scale.max = 1; // Y轴最大值
conf.tooltip.show = true; // 显示工具提示
conf.tooltip.format = "x=%.2f, y=%.2f"; // 提示信息格式
conf.grid_x.show = true; // 显示X轴网格
conf.grid_y.show = true; // 显示Y轴网格
conf.frame_size = ImVec2(400, 400); // 图表大小
conf.line_thickness = 2.f; // 折线宽度

ImGui::Plot("plot title", conf);

多数据流绘制

可以展示多个数据流，每个数据流使用不同的颜色。下面的代码演示了如何实现这一点，同时展示了选择区域的功能。

// 在draw_multi_plot函数中...
conf.values.ys_list = y_data; // 数据列表
conf.values.ys_count = 3; // 数据流数量
conf.values.colors = colors; // 配置每条线的颜色
conf.selection.show = true; // 开启选择区域
// ...更多配置...
ImGui::Plot("plot1", conf);

API使用文档

主要API围绕PlotConfig展开，关键字段包括但不限于：

• values.xs: X轴数据指针。
• values.ys, values.ys_list: 分别用于单线或多线绘图的Y轴数据。
• values.count: 数据点总数。
• scale.min/max: 设置Y轴的最小/最大值。
• tooltip.{show, format}: 控制和定制工具提示。
• grid_{x,y}.{show,size,subticks}: 控制网格线的显示和细分。
• frame_size: 图表的尺寸。
• line_thickness: 折线的粗细。
• selection.{show,start,length}: 用于控制和反馈选择区域。

通过这些配置项，您可以高度自定义图表的外观和行为。

以上即为imgui-plot的基本使用和技术文档概览，通过这些步骤您应该能够顺利地将其集成到自己的应用中，并利用其强大的功能进行复杂数据的可视化展示。如果有更深入的问题或者需求，欢迎查看项目的GitHub仓库并参与讨论。

imgui-plot An improved plot widget for Dear ImGui, aimed at displaying audio data 项目地址: https://gitcode.com/gh_mirrors/im/imgui-plot