Qt | QChart+QChartView+QLineSeries(折线图)+QBarSeries(柱状图)实战

原创

Qt历险记

发布于 2024-07-30 20:58:59

3960

发布于 2024-07-30 20:58:59

文章被收录于专栏：Qt6 研发工程师

点击上方"蓝字"关注我们

01、QLineSeries

QLineSeries 是 Qt 中的一个类，用于在图表中表示一系列的数据点。它继承自 QAbstractSeries 类，提供了绘制折线图所需的基本功能。

常用的方法包括

append(x, y)：向序列中添加一个新的数据点，其中 x 和 y 分别表示横坐标和纵坐标的值。
clear()：清空序列中的所有数据点。
count()：返回序列中数据点的数量。
at(index)：返回指定索引位置的数据点的坐标值。
replace(index, x, y)：替换指定索引位置的数据点的坐标值。
remove(index)：删除指定索引位置的数据点。
setName(name)：设置序列的名称。
name()：返回序列的名称。
.pro必须添加
QT += charts

02、示例折线图

#include <QtWidgets/QApplication>
#include <QtWidgets/QMainWindow>
#include <QtCharts/QChartView>
#include <QtCharts/QLineSeries>

#include <QDebug>

#if !(QT_VERSION >= QT_VERSION_CHECK(5, 0, 0))
QT_CHARTS_USE_NAMESPACE // Qt5
#endif

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);

    // 折线图的形式显示数据
    QLineSeries *series = new QLineSeries();
    series->setPointsVisible(true); // 显示点
    series->setPointLabelsVisible(true); // 是否显示点坐标

    // 坐标x,y
    series->append(0, 6);
    series->append(2, 4);
    series->append(3, 8);
    series->append(7, 4);
    series->append(10, 5);
    *series << QPointF(11, 1) << QPointF(13, 3) << QPointF(17, 6) << QPointF(18, 3) << QPointF(20, 2);

    // A line chart.
    qDebug() << series->type();

    QChart *chart = new QChart();
    // 返回图表中的图例对象
    chart->legend()->hide();
    // 将系列系列添加到图表中，并获得其所有权
    chart->addSeries(series);
    // 根据已添加到图表中的系列为图表创建轴
    chart->createDefaultAxes();
    chart->setTitle("简单折线图示例");

    QChartView *chartView = new QChartView(chart);
    chartView->setRenderHint(QPainter::Antialiasing);


    QMainWindow window;
    window.setWindowTitle("公众号：Qt历险记");
    window.setCentralWidget(chartView);
    window.resize(400, 300);
    window.show();

    return a.exec();
}

04、QBarSeries

QBarSet 是 Qt 中的一个类，用于在柱状图中表示一组相关数据。它通常与 QBarSeries 一起使用，以便将不同的数据集分组显示。

QBarSeries 是 Qt 中的一个类，用于在图表中表示一系列的数据点，以柱状图的形式展示。它继承自 QAbstractSeries 类，提供了绘制柱状图所需的基本功能。

05、示例柱形图

#include <QtWidgets/QApplication>
#include <QtWidgets/QMainWindow>
#include <QtCharts/QChartView>
#include <QtCharts/QBarSeries>  // 以按类别分组的竖条表示一系列数据
#include <QtCharts/QBarSet>     // 表示条形图中的一组条形图
#include <QtCharts/QLineSeries> // 以折线图的形式显示数据
#include <QtCharts/QLegend>     // 显示了一个图表的图例
#include <QtCharts/QBarCategoryAxis> // 将类别添加到图表的轴
#include <QtCharts/QValueAxis>       // 将值添加到图表的轴上

#if !(QT_VERSION > QT_VERSION_CHECK(5,0,0))
QT_CHARTS_USE_NAMESPACE
#endif

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);

//![1] 条的集合
    QBarSet *set0 = new QBarSet("小马云");
    QBarSet *set1 = new QBarSet("小化腾");
    QBarSet *set2 = new QBarSet("小张磊");
    QBarSet *set3 = new QBarSet("小张朝阳");
    QBarSet *set4 = new QBarSet("小刘强东");

    // 条形图数据
    *set0 << 1 << 2 << 3 << 4 << 5 << 6;
    *set1 << 5 << 0 << 0 << 4 << 0 << 7;
    *set2 << 3 << 5 << 8 << 13 << 8 << 5;
    *set3 << 5 << 6 << 7 << 3 << 4 << 5;
    *set4 << 9 << 7 << 5 << 3 << 1 << 2;
//![1]

//![2]添加条系列
    QBarSeries *barseries = new QBarSeries();
    barseries->append(set0);
    barseries->append(set1);
    barseries->append(set2);
    barseries->append(set3);
    barseries->append(set4);
    barseries->setLabelsVisible(true); // 显示值
//![2]

//![8] 创建线系列
    QLineSeries *lineseries = new QLineSeries();
    lineseries->setName("趋势");
    lineseries->setPointsVisible(true);
    // 折线图数据
    lineseries->append(QPoint(0, 4));
    lineseries->append(QPoint(1, 15));
    lineseries->append(QPoint(2, 20));
    lineseries->append(QPoint(3, 4));
    lineseries->append(QPoint(4, 12));
    lineseries->append(QPoint(5, 17));
//![8]

//![3] 创建图表
    QChart *chart = new QChart();
    chart->addSeries(barseries);
    chart->addSeries(lineseries);
    chart->setTitle("线和条形图示例");
//![3]

//![4] 类别
    QStringList categories;
    categories << "一月" << "二月" << "三月" << "四月" << "五月" << "六月";
    // x轴
    QBarCategoryAxis *axisX = new QBarCategoryAxis();
    axisX->append(categories);
    // 将轴添加到指定对齐的图表
    chart->addAxis(axisX, Qt::AlignBottom);
    // 将由轴指定的轴连接到该系列中
    lineseries->attachAxis(axisX);
    barseries->attachAxis(axisX);
    axisX->setRange(QString("一月"), QString("六月"));

    // y轴
    QValueAxis *axisY = new QValueAxis();
    chart->addAxis(axisY, Qt::AlignLeft);
    lineseries->attachAxis(axisY);
    barseries->attachAxis(axisY);
    axisY->setRange(0, 20);
//![4]

//![5] 图例
    chart->legend()->setVisible(true);
    chart->legend()->setAlignment(Qt::AlignBottom);
//![5]

//![6] 视图
    QChartView *chartView = new QChartView(chart);
    chartView->setRenderHint(QPainter::Antialiasing);
//![6]

//![7]
    QMainWindow window;
    window.setWindowTitle("公众号：Qt历险记");
    window.setCentralWidget(chartView);
    window.resize(440, 300);
    window.show();
//![7]

    return a.exec();
}

06、演示

07、QCategoryAxis

QCategoryAxis 是 Qt 中的一个类，用于在图表中表示分类轴。它用于将数据映射到 X 轴上的类别标签。

常用的方法包括：

append(label, interval)：向分类轴上添加一个新的类别标签，其中 label 表示类别标签的文本，interval 表示类别之间的间隔。
clear()：清空分类轴上的所有类别标签。
count()：返回分类轴上类别标签的数量。
at(index)：返回指定索引位置的类别标签的文本。
replace(index, label, interval)：替换指定索引位置的类别标签的文本和间隔。
remove(index)：删除指定索引位置的类别标签。
setLabelFormat(format)：设置类别标签的格式化字符串。
labelFormat()：返回类别标签的格式化字符串。
setRange(min, max)：设置分类轴的最小值和最大值。
range()：返回分类轴的最小值和最大值。
setCategoryNames(categories)：设置分类轴的类别名称列表。
categoryNames()：返回分类轴的类别名称列表。

08、示例自定义图表

#include <QtWidgets/QApplication>
#include <QtWidgets/QMainWindow>
#include <QtCharts/QChartView>
#include <QtCharts/QLineSeries>
#include <QtCharts/QCategoryAxis>

#if !(QT_VERSION > QT_VERSION_CHECK(5,0,0))
QT_CHARTS_USE_NAMESPACE
#endif

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);

//![1] 创建线系列
    QLineSeries *series = new QLineSeries();
    *series << QPointF(0, 6) << QPointF(9, 4) << QPointF(15, 20) << QPointF(25, 12) << QPointF(29, 26);
    QChart *chart = new QChart();
    chart->legend()->hide();
    chart->addSeries(series);
//![1]

//![2]
    // 自定义系列
    QPen pen(QRgb(0xfdb157));
    pen.setWidth(5);
    // 线系列设置笔
    series->setPen(pen);

    // 自定义图表标题
    QFont font;
    font.setPixelSize(18);
    chart->setTitleFont(font);
    chart->setTitleBrush(QBrush(Qt::white));
    chart->setTitle("定义图示例");

    // 定义图表背景
    QLinearGradient backgroundGradient;
    // 开始点
    backgroundGradient.setStart(QPointF(0, 0));
    // 设定最后的停止
    backgroundGradient.setFinalStop(QPointF(0, 1));
    backgroundGradient.setColorAt(0.0, Qt::green);
    backgroundGradient.setColorAt(1.0, QRgb(0x4c4547));
    // 设置坐标模式
    backgroundGradient.setCoordinateMode(QGradient::ObjectBoundingMode);
    chart->setBackgroundBrush(QBrush(backgroundGradient));

    // 自定义绘图区域背景
    QLinearGradient plotAreaGradient;
    plotAreaGradient.setStart(QPointF(0, 1));
    plotAreaGradient.setFinalStop(QPointF(1, 0));
    plotAreaGradient.setColorAt(0.0, QRgb(0x551155));
    plotAreaGradient.setColorAt(1.0, QRgb(0x55aa55));
    plotAreaGradient.setCoordinateMode(QGradient::ObjectBoundingMode);
    // 设置绘图区域背景画笔
    chart->setPlotAreaBackgroundBrush(plotAreaGradient);
    chart->setPlotAreaBackgroundVisible(true);
//![2]

//![3]
    QCategoryAxis *axisX = new QCategoryAxis();
    QCategoryAxis *axisY = new QCategoryAxis();

    // 自定义轴标签字体
    QFont labelsFont;
    labelsFont.setPixelSize(12);
    axisX->setLabelsFont(labelsFont);
    axisY->setLabelsFont(labelsFont);

    // 自定义轴颜色
    QPen axisPen(QRgb(0xd18952));
    axisPen.setWidth(2);
    axisX->setLinePen(axisPen);
    axisY->setLinePen(axisPen);

    // 自定义轴标签颜色
    QBrush axisBrush(Qt::white);
    axisX->setLabelsBrush(axisBrush);
    axisY->setLabelsBrush(axisBrush);

    // 自定义网格线和阴影
    axisX->setGridLineVisible(true);
    axisY->setGridLineVisible(true);
    axisY->setShadesPen(Qt::NoPen);
    // 设置用于绘制阴影的画笔以进行笔刷
    axisY->setShadesBrush(QBrush(QColor(0x99, 0xcc, 0xcc, 0x55)));
    // 设置阴影可见
    axisY->setShadesVisible(true);
//![3]

//![4]
    axisX->append("low", 10);
    axisX->append("optimal", 20);
    axisX->append("high", 30);
    axisX->setRange(0, 30);

    axisY->append("slow", 10);
    axisY->append("med", 20);
    axisY->append("fast", 30);
    axisY->setRange(0, 30);
    // 添加轴
    chart->addAxis(axisX, Qt::AlignBottom);
    chart->addAxis(axisY, Qt::AlignLeft);
    // 连接轴
    series->attachAxis(axisX);
    series->attachAxis(axisY);
//![4]

//![5] 视图
    QChartView *chartView = new QChartView(chart);
    chartView->setRenderHint(QPainter::Antialiasing);
//![5]

//![6]
    QMainWindow window;
    window.setWindowTitle("公众号：Qt历险记");
    window.setCentralWidget(chartView);
    window.resize(400, 300);
    window.show();
//![6]

    return a.exec();
}

09、演示

总结

需要项目的留言

故我在

点击下方卡片关注我

↓↓↓

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

qt4

qt5

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

登录后参与评论

0 条评论

热度

Qt | QChart+QChartView+QLineSeries(折线图)+QBarSeries(柱状图)实战

Qt | QChart+QChartView+QLineSeries(折线图)+QBarSeries(柱状图)实战

点击上方"蓝字"关注我们

01、QLineSeries

02、示例折线图

04、QBarSeries

05、示例柱形图

06、演示

07、QCategoryAxis

08、示例自定义图表

09、演示

总结

故我在

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

Qt | QChart+QChartView+QLineSeries(折线图)+QBarSeries(柱状图)实战

Qt | QChart+QChartView+QLineSeries(折线图)+QBarSeries(柱状图)实战

点击上方"蓝字"关注我们

01、QLineSeries

02、示例 折线图

04、QBarSeries

05、示例 柱形图

06、演示

07、QCategoryAxis

08、示例 自定义图表

09、演示

总结

故我在

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

02、示例折线图

05、示例柱形图

08、示例自定义图表