中文 EN

快速接入

快速开始

本节使用真实的 ChartKit 公开接口创建一个折线图。ChartKit 图表控件本身就是 QWidget，可直接放入 Qt Widget 页面、布局或 Qt-UI 容器中。

1. 引入头文件

#include "UIGQLineChart.h"
#include "UIGQChartTheme.h"

如果需要其它图表类型，引入对应头文件：

#include "UIGQBarChart.h"
#include "UIGQOpenGLPieChart.h"
#include "UIGQScatterChart.h"

2. 创建图表

using namespace UIGQtLib;

auto* chart = new UIGQLineChart(parent);
chart->setMinimumSize(640, 360);
chart->setTitle("Monthly Orders");

调用说明：

方法 说明 参数 返回值
new UIGQLineChart(parent) 创建折线图控件，并交给 Qt 父子对象生命周期管理。 parent：父 QWidget，可为 nullptr。 UIGQLineChart*
setMinimumSize(int minw, int minh) 设置控件最小尺寸，避免布局压缩导致图表不可读。 minw：最小宽度；minh：最小高度。 void
setTitle(const QString& title) 设置图表标题。 title：标题文本。 void

3. 设置分类和数据

chart->setCategories({"Jan", "Feb", "Mar", "Apr", "May"});
chart->setSeries("Orders", {128, 152, 176, 163, 209}, QColor(35, 128, 224));

调用说明：

方法 说明 参数 返回值
setCategories(const QStringList& categories) 设置 X 轴分类标签。 categories：分类名称列表。 void
setSeries(const QString& name, const QVector<double>& values, const QColor& color) 设置单条数据序列，适合快速接入。 name：序列名称；values：数值列表；color：序列颜色，可使用默认值。 void

4. 设置主题和交互

chart->setThemePreset(kChartThemeMacarons);
chart->setLegendPosition(kChartLegendBottom);
chart->setTooltipMode(kChartTooltipItem);
chart->setTooltipVisible(true);
chart->setHoverEnabled(true);
chart->setAnimationEnabled(true);

调用说明：

方法 说明 参数 返回值
setThemePreset(UIGQChartThemePreset preset) 使用内置主题预设。 preset：主题预设枚举。 void
setLegendPosition(UIGQChartLegendPosition position) 设置图例位置。 position：图例位置枚举。 void
setTooltipMode(UIGQChartTooltipMode mode) 设置 tooltip 行为。 mode：kChartTooltipNone、kChartTooltipItem 或 kChartTooltipAxis。 void
setTooltipVisible(bool visible) 控制 tooltip 是否显示。 visible：是否显示。 void
setHoverEnabled(bool enabled) 控制鼠标 hover 交互。 enabled：是否启用 hover。 void
setAnimationEnabled(bool enabled) 控制数据绘制动画。 enabled：是否启用动画。 void

5. 更新数据

业务数据变化时，不要操作内部 QtCharts 对象，直接重新设置 ChartKit 数据：

chart->setSeries("Orders", latestValues, QColor(35, 128, 224));
chart->restartAnimation();

restartAnimation() 用于在数据刷新后重新播放图表动画。