Qt Charts 模块（qt chart legend）-插件库-万普插件库

Qt Charts 模块提供了一套功能强大且易于使用的图表组件，用于创建美观的数据可视化界面。该模块基于 Qt 的 Graphics View 架构，核心组件包括 QChartView 和 QChart 。

环境配置

1. 项目配置

在 .pro 文件中添加：

QT += charts

2. 头文件包含

#include 
// 或者单独包含需要的头文件
#include 
#include

核心组件架构

QGraphicsView
    └── QChartView
        └── QChart
            ├── QPolarChart (极坐标图)
            ├── QLineSeries (折线图)
            ├── QBarSeries (柱状图)
            ├── QPieSeries (饼图)
            └── ... (其他系列类型)

基础图表实现

1. 折线图示例

// 创建图表视图
QChartView *chartView = new QChartView();

// 创建图表
QChart *chart = new QChart();
chart->setTitle("简单折线图");

// 创建数据系列
QLineSeries *series = new QLineSeries();
series->setName("数据系列1");

// 添加数据点
*series << QPointF(1, 1) << QPointF(2, 3) << QPointF(3, 2) 
        << QPointF(4, 4) << QPointF(5, 3);

// 将系列添加到图表
chart->addSeries(series);

// 创建坐标轴
chart->createDefaultAxes();

// 设置图表视图的图表
chartView->setChart(chart);

// 显示图表视图
chartView->show();

2. 柱状图示例

// 创建柱状图系列
QBarSeries *series = new QBarSeries();

// 创建柱状图集
QBarSet *set0 = new QBarSet("第一季度");
QBarSet *set1 = new QBarSet("第二季度");

// 添加数据
*set0 << 1 << 2 << 3 << 4 << 5 << 6;
*set1 << 5 << 0 << 0 << 4 << 0 << 7;

// 将柱状图集添加到系列
series->append(set0);
series->append(set1);

// 创建图表
QChart *chart = new QChart();
chart->addSeries(series);
chart->setTitle("简单柱状图");
chart->setAnimationOptions(QChart::SeriesAnimations);

// 创建类别轴
QStringList categories;
categories << "Jan" << "Feb" << "Mar" << "Apr" << "May" << "Jun";
QBarCategoryAxis *axisX = new QBarCategoryAxis();
axisX->append(categories);
chart->addAxis(axisX, Qt::AlignBottom);
series->attachAxis(axisX);

// 创建数值轴
QValueAxis *axisY = new QValueAxis();
axisY->setRange(0,15);
chart->addAxis(axisY, Qt::AlignLeft);
series->attachAxis(axisY);

// 显示图表
QChartView *chartView = new QChartView(chart);
chartView->setRenderHint(QPainter::Antialiasing);
chartView->show();

高级图表特性

1. 多系列图表

// 创建图表
QChart *chart = new QChart();
chart->setTitle("多系列图表");

// 创建折线系列1
QLineSeries *series1 = new QLineSeries();
series1->setName("系列1");
for(int i=0; i<10; i++)
    series1->append(i, qrand() % 10);

// 创建折线系列2
QLineSeries *series2 = new QLineSeries();
series2->setName("系列2");
for(int i=0; i<10; i++)
    series2->append(i, qrand() % 10);

// 创建散点系列
QScatterSeries *series3 = new QScatterSeries();
series3->setName("散点");
series3->setMarkerSize(10);
for(int i=0; i<10; i++)
    series3->append(i, qrand() % 10);

// 添加系列到图表
chart->addSeries(series1);
chart->addSeries(series2);
chart->addSeries(series3);

// 创建坐标轴
chart->createDefaultAxes();

// 显示图表
QChartView *chartView = new QChartView(chart);
chartView->setRenderHint(QPainter::Antialiasing);
chartView->show();

2. 极坐标图

// 创建极坐标图
QPolarChart *chart = new QPolarChart();
chart->setTitle("极坐标图");

// 创建径向轴(数值轴)
QValueAxis *radialAxis = new QValueAxis();
radialAxis->setTickCount(9);
radialAxis->setLabelFormat("%d");
radialAxis->setRange(0, 8);
chart->addAxis(radialAxis, QPolarChart::PolarOrientationRadial);

// 创建角度轴(类别轴)
QCategoryAxis *angularAxis = new QCategoryAxis();
angularAxis->setLabelsPosition(QCategoryAxis::AxisLabelsPositionOnValue);
QStringList categories;
categories << "N" << "NE" << "E" << "SE" << "S" << "SW" << "W" << "NW";
for(int i=0; i
    angularAxis->append(categories.at(i), i);
angularAxis->setRange(0, 7);
chart->addAxis(angularAxis, QPolarChart::PolarOrientationAngular);

// 创建系列
QLineSeries *series = new QLineSeries();
series->setName("极坐标系列");
*series << QPointF(0, 1) << QPointF(1, 2) << QPointF(2, 3) 
        << QPointF(3, 4) << QPointF(4, 5) << QPointF(5, 6)
        << QPointF(6, 7) << QPointF(7, 8) << QPointF(0, 1);

// 添加系列到图表
chart->addSeries(series);
series->attachAxis(radialAxis);
series->attachAxis(angularAxis);

// 显示图表
QChartView *chartView = new QChartView(chart);
chartView->setRenderHint(QPainter::Antialiasing);
chartView->show();

交互功能实现

1. 图表交互示例

// 创建可交互图表
QChart *chart = new QChart();
chart->setTitle("可交互图表 - 点击图例隐藏/显示系列");
chart->legend()->setVisible(true);
chart->legend()->setAlignment(Qt::AlignBottom);

// 创建系列
QLineSeries *series = new QLineSeries();
series->setName("数据系列");
for(int i=0; i<20; i++)
    series->append(i, qrand() % 10);

// 添加系列到图表
chart->addSeries(series);
chart->createDefaultAxes();

// 设置图表视图
QChartView *chartView = new QChartView(chart);
chartView->setRenderHint(QPainter::Antialiasing);

// 添加交互功能：点击图例隐藏/显示系列
QObject::connect(chart->legend()->markers(series)[0], &QLegendMarker::clicked, [=](){
    bool visible = series->isVisible();
    series->setVisible(!visible);
    chart->legend()->markers(series)[0]->setVisible(true);
    QPen pen = series->pen();
    if(!visible) {
        pen.setColor(Qt::blue);
    } else {
        pen.setColor(Qt::gray);
    }
    series->setPen(pen);
});

chartView->show();

2. 鼠标悬停提示

// 创建图表
QChart *chart = new QChart();
chart->setTitle("悬停提示示例");

// 创建系列
QLineSeries *series = new QLineSeries();
for(int i=0; i<10; i++)
    series->append(i, qrand() % 10);

// 添加系列到图表
chart->addSeries(series);
chart->createDefaultAxes();

// 设置悬停提示
QToolTip *tooltip = new QToolTip();
for(auto point : series->points()) {
    QGraphicsItem *item = series->chart()->mapToPosition(point).toPoint();
    item->setToolTip(QString("X: %1\nY: %2").arg(point.x()).arg(point.y()));
}

// 显示图表
QChartView *chartView = new QChartView(chart);
chartView->setRenderHint(QPainter::Antialiasing);
chartView->show();

样式定制

1. 自定义图表样式

// 创建图表
QChart *chart = new QChart();
chart->setTitle("自定义样式图表");
chart->setAnimationOptions(QChart::AllAnimations);

// 设置图表背景
chart->setBackgroundBrush(QBrush(QColor("#f0f0f0")));
chart->setBackgroundVisible(true);
chart->setBackgroundRoundness(5);

// 创建系列
QLineSeries *series = new QLineSeries();
series->setName("温度数据");
for(int i=0; i<24; i++)
    series->append(i, 15 + qrand() % 10);

// 设置系列样式
QPen pen(Qt::red);
pen.setWidth(3);
series->setPen(pen);

// 添加系列到图表
chart->addSeries(series);

// 创建坐标轴
QValueAxis *axisX = new QValueAxis();
axisX->setTitleText("时间(小时)");
axisX->setLabelFormat("%d");
axisX->setTickCount(13);
axisX->setRange(0, 24);

QValueAxis *axisY = new QValueAxis();
axisY->setTitleText("温度(℃)");
axisY->setRange(10, 30);

chart->addAxis(axisX, Qt::AlignBottom);
chart->addAxis(axisY, Qt::AlignLeft);
series->attachAxis(axisX);
series->attachAxis(axisY);

// 设置图例样式
chart->legend()->setVisible(true);
chart->legend()->setAlignment(Qt::AlignTop);
chart->legend()->setLabelColor(Qt::darkBlue);

// 显示图表
QChartView *chartView = new QChartView(chart);
chartView->setRenderHint(QPainter::Antialiasing);
chartView->show();

最佳实践

性能优化 ：
内存管理 ：

响应式设计 ：

// 图表视图大小随窗口变化
chartView->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);

数据更新 ：

// 高效更新数据
series->replace(newDataPoints);
// 而不是 clear() + append()

总结

Qt Charts 模块提供了强大而灵活的图表功能，通过本讲解我们了解了：

如何配置 Qt Charts 环境
基础图表类型的创建方法
高级图表特性和交互功能
图表样式定制技巧
性能优化和最佳实践

关键优势：

通过合理运用这些功能，开发者可以轻松创建专业级的数据可视化界面，满足各种应用场景的需求。

万普插件库

jQuery插件大全与特效教程

Qt Charts 模块（qt chart legend）