概念
Chart 控件提供常用数据可视化：
• 折线图：趋势展示，支持多系列
• 柱状图：分组/堆叠模式，水平/垂直方向
• 饼图：占比展示
• 坐标轴：数值/分类/时间轴类型
• 图例/Tooltip：自动图例 + 悬停数据提示
API 速查
| 函数 | 说明 |
|---|---|
int xuiChartCreate(xui_context pCtx, xui_widget* ppW, const xui_chart_desc_t* pDesc) | 创建图表 |
int xuiChartSetTitle(pW, sTitle) | 图表标题 |
int xuiChartSetColors(pW, iBg, iPlot, iGrid, iAxis, iText, iTip, iTipText) | 颜色配置 |
int xuiChartSetXAxis(pW, iAxisType) | X 轴类型 |
int xuiChartSetYAxis(pW, iAxisType) | Y 轴类型 |
int xuiChartSetBarMode(pW, iMode) | 柱状图模式 |
int xuiChartSetBarDirection(pW, iDir) | 柱状方向 |
int xuiChartSetLegendVisible(pW, bVisible) | 图例显隐 |
编译本章示例
gcc -O2 -I. -o ch180.exe ch180_main.c src\xui_*.c build\xge.lib -lm -lws2_32 -liphlpapi -lgdi32 -luser32 -lshell32 -lopengl32 -lole32 -lwinmm -lavrt
.\ch180.exe示例：创建折线图
xui_chart_desc_t desc = { 0 };
xui_widget pChart;
xuiChartCreate(pCtx, &pChart, &desc);
// 标题与颜色
xuiChartSetTitle(pChart, "FPS Monitor");
xuiChartSetColors(pChart,
0x1A1A2EFF, 0x16213EFF, 0x333355FF,
0x888888FF, 0xCCCCCCFF, 0x333333FF,
0xFFFFFFFF);
// 坐标轴
xuiChartSetXAxis(pChart, 1); // 时间轴
xuiChartSetYAxis(pChart, 0); // 数值轴
// 显示图例
xuiChartSetLegendVisible(pChart, 1);
xuiWidgetAddChild(pPanel, pChart);完整代码
将以下代码保存为 ch180_main.c，编译后运行即可看到一个 FPS 监控折线图：
#include "xge.h"
#include "xui.h"
static xui_context g_pCtx;
static int onFrame(void* pUser) {
(void)pUser;
xgeClear(0x1A1A2EFF);
xui_vec2_t pos;
xgeMouseGet(&pos.x, &pos.y);
xuiInputPointerMove(g_pCtx, pos.x, pos.y);
if (xgeMouseDown(XGE_MOUSE_LEFT))
xuiInputPointerDown(g_pCtx, pos.x, pos.y, 0);
else
xuiInputPointerUp(g_pCtx, pos.x, pos.y, 0);
xuiUpdate(g_pCtx, xgeGetDelta());
xuiLayout(g_pCtx);
xuiRender(g_pCtx, NULL, NULL, 0);
return XGE_OK;
}
int main(void) {
xge_desc_t d = { 0 };
d.iWidth = 800; d.iHeight = 600;
d.sTitle = "ch180 - Chart";
d.iFlags = XGE_INIT_VSYNC;
xgeInit(&d);
xuiCreate(&g_pCtx);
extern const xui_proxy_t tXgeProxy;
xui_proxy_t tXgeProxy = xuiProxyXge();
xuiSetProxy(g_pCtx, &tXgeProxy);
xuiSetViewportSize(g_pCtx, 800, 600);
// 创建图表
xui_chart_desc_t cdesc = { 0 };
xui_widget pChart;
xuiChartCreate(g_pCtx, &pChart, &cdesc);
// 标题与配色
xuiChartSetTitle(pChart, "FPS Monitor");
xuiChartSetColors(pChart,
0x1A1A2EFF, 0x16213EFF, 0x333355FF,
0x888888FF, 0xCCCCCCFF, 0x333333FF,
0xFFFFFFFF);
// 坐标轴：X=时间轴，Y=数值轴
xuiChartSetXAxis(pChart, 1);
xuiChartSetYAxis(pChart, 0);
// 显示图例
xuiChartSetLegendVisible(pChart, 1);
xui_widget pRoot = xuiGetRootWidget(g_pCtx);
xuiWidgetAddChild(pRoot, pChart);
xuiWidgetSetRect(pChart, (xui_rect_t){0, 0, 800, 600});
xgeRun(onFrame, NULL);
xuiDestroy(g_pCtx);
xgeUnit();
return 0;
}代码讲解
- xuiChartCreate：创建图表控件，desc 中可指定图表类型（折线/柱状/饼图）。
- SetColors：7 个颜色参数依次为背景/绘图区/网格/坐标轴/文字/提示框/提示文字。
- SetXAxis/SetYAxis：0=数值轴，1=时间轴，2=分类轴。
- SetLegendVisible：显示/隐藏图例，多系列时建议开启。
要点与陷阱
- desc 类型：chart_desc_t 中指定图表类型（折线/柱状/饼图）。
- BarMode：分组（Grouped）vs 堆叠（Stacked）模式。
- 数据绑定：通过 desc 或 SetData 系列函数绑定数据系列。
- 性能：大数据量时考虑采样或虚拟化显示。
进阶练习
- 实时仪表盘：Timer 定时更新 Chart 数据模拟实时监控。
- 多图表联动：选择时间范围同步更新多个 Chart。
