Qt图表绘制（QtCharts）-绘制三种样式的散点图（9） 原创

Qt图表绘制（QtCharts）-绘制三种样式的散点图（9）🐔

文章目录

• Qt图表绘制（QtCharts）-绘制三种样式的散点图（9）🐔
• • 1、概述🐓
  • 2、实现步骤🐤
  • 3、主要使用的类🐥
  • 4、主要代码🐦
  • 5、实现效果🦢
  • 6、源代码🦉

更多精彩内容

👉个人内容分类汇总 👈

注意：我使用的QtCharts是基于Qt 5.12.12版本

1、概述🐓

Qt Charts 模块提供了一组易于使用的图表组件，能够创建时尚、交互式、以数据为中心的用户界面。

它使用 Qt Graphics View 框架，因此可以轻松地将图表集成到现代用户界面中。

Qt Charts 可以用作 QWidgets、QGraphicsWidget 或 QML 类型。 用户可以通过选择图表主题之一轻松创建令人印象深刻的图表。

这一个Demo干了啥：🤏🤏🤏

• 演示了如何使用QtCharts绘制圆点、矩形点、五角星点三种样式的散点图；
• 将绘制三种点的功能代码分离到三个函数中，不糅合在一起，使代码尽可能的简单、简洁，便于学习；
• 取消了Qt示例中继承QChartView的实现方式，降低代码复杂度；
• 在源码中包含使用的详细注释和注意事项 ；
• 将UI和代码分离，使实现图表绘制的代码更单一简洁，便于学习。

2、实现步骤🐤

1. 打开.pro文件，输入Qt += charts，引入Qt Charts模块；

   

2. 打开ui设计器，选择一个Graphics View控件，鼠标右键提升为；

   

   

3. 输入QChartView，点击添加、提升；

   

4. 在窗口右上角就可以看见控件类型变成QChartView了，然后将控件命名为chartView； 注意：由于QChartView需要引入命名空间，所以这里提升后编译时不通过的。

   

5. 添加三个QPushButton用于分别绘制三种样式的散点。

   

6. 在代码中添加QtCharts头文件，引入命名空间；一般我们最好在cpp文件中添加头文件和引入命名空间，尽量避免在.h文件中引入（这里为了方便，代码简洁直接在头文件中引入命名空间），而在cpp文件中引入命名空间需要在ui_widget.h文件前，否则编译会失败，因为在ui文件中会用到QChartView类。

   #include <QtCharts>         // 导入QtCharts所有的头文件，也可以单独导入某一个
   
   // 引入qchart命名空间（注意：如果是在ui中提升为QChartView，
   // 则QT_CHARTS_USE_NAMESPACE一定要放在#include "ui_widget.h"前面，否则编译会失败）
   QT_CHARTS_USE_NAMESPACE
   

3、主要使用的类🐥

类名	作用
QScatterSeries	创建一个用于绘制散点的数据集对象
QRandomGenerator	生成随机数
QPainterPath	提供了一个用于绘制操作的容器（用于保存绘制五角星的线条）
QPainter	在小部件和其他绘制设备上执行低级绘制（用于绘制一个五角星图案）

4、主要代码🐦

• 在widget.cpp的构造函数中调用initChart()函数；
• 在UI中添加三个按键，分别用于绘制圆形散点、矩形散点、五角星散点；

/**
 * @brief 初始化绘制图表，在initChart没有添加散点，在点击按键后再绘制散点图
 */
void Widget::initChart()
{
    ui->chartView->setRenderHint(QPainter::Antialiasing);                              // 设置抗锯齿
    ui->chartView->chart()->setTitle("散点图标题");                                      // 设置图表标题
    ui->chartView->chart()->setDropShadowEnabled(false);                               // 设置不启用背景阴影效果。
    ui->chartView->chart()->legend()->setMarkerShape(QLegend::MarkerShapeFromSeries);  // 在图例中显示点的形状样式
    ui->chartView->chart()->setTheme(QChart::ChartThemeBlueCerulean);                  // 设置表的样式
}

/**
 * @brief 在图表中添加圆点样式散点
 */
void Widget::on_pushButton_clicked()
{
    QScatterSeries* series = new QScatterSeries();              // 创建一个散点数据集对象
    series->setName("圆点样式");
    series->setMarkerShape(QScatterSeries::MarkerShapeCircle);  // 设置绘制的散点的样式为圆
    series->setMarkerSize(10);                                  // 设置绘制的点的大小

    for(int i = 0; i < 20; i++)    // 添加10个任意点
    {
        series->append(i, QRandomGenerator::global()->bounded(10, 50));
    }
    ui->chartView->chart()->addSeries(series);       // 将创建的series添加经chart中
    ui->chartView->chart()->createDefaultAxes();     // 新添加series后，调用这个函数根据添加的series自动生成对于类型的XY轴，会删除已有的轴再生成（推荐使用这种方法，尽量不要自己添加轴）
}

/**
 * @brief 在图表中添加方形样式散点
 */
void Widget::on_pushButton_2_clicked()
{
    QScatterSeries* series = new QScatterSeries();                 // 创建一个散点数据集对象
    series->setName("方形样式");
    series->setMarkerShape(QScatterSeries::MarkerShapeRectangle);  // 设置绘制的散点的样式为矩形
    series->setMarkerSize(10);                                     // 设置绘制的点的大小

    for(int i = 0; i < 20; i++)    // 添加10个任意点
    {
        *series << QPointF(i, QRandomGenerator::global()->bounded(10, 50)); // 换一种添加数据的方式
    }
    ui->chartView->chart()->addSeries(series);       // 将创建的series添加经chart中
    ui->chartView->chart()->createDefaultAxes();     // 根据已有series生成对于类型的坐标轴，并将轴附着到所有的series
}

/**
 * @brief 在图表中添加五角星样式散点，由于内置的点类型中有圆形和矩形，想要五角星就只能自己画,
 *        可以使用QPainter画或者贴图，所以既然可以画五角星，那当然也可以画其它的图案啦，比如：超级玛丽
 */
void Widget::on_pushButton_3_clicked()
{
    int size = 30;                                                 // 五角星大小为长宽30个像素
    QScatterSeries* series = new QScatterSeries();                 // 创建一个散点数据集对象
    series->setName("五角星样式");
    series->setMarkerShape(QScatterSeries::MarkerShapeRectangle);  // 设置绘制的散点的样式为矩形
    series->setMarkerSize(size);                                   // 设置绘制的点的大小为长宽30个像素

    for(int i = 0; i < 20; i++)    // 添加10个任意点
    {
        series->append(i, QRandomGenerator::global()->bounded(10, 50));
    }

    // 再一个透明图层中画一个五角星图案
    QPainterPath starPath;
    starPath.moveTo(size - 2, size / 2);              // 移动画五角星线段的起始位置
    for(int i = 1; i < 5; i++)
    {
        qreal half = (size / 2) - 1;
        qreal x = half + half * qCos(0.8 * i * M_PI);           // qCos函数需要使用到qmath.h
        qreal y = half + 1 + half * qSin(0.8 * i * M_PI);
        starPath.lineTo(x, y);                       // 添加五角星的绘制路径
    }
    starPath.closeSubpath();                         // 关闭当前子路径
    QImage image(size, size, QImage::Format_ARGB32); // 创建一个30*30的空白图层，将五角星画到图层上
    image.fill(Qt::transparent);                     // 用给定的像素值填充整个图像（设置透明图层）

    QPainter painter(&image);
    painter.setRenderHint(QPainter::Antialiasing);   // 设置抗锯齿
    painter.setPen(QColor(0, 255, 255));
    painter.setBrush(QColor(255, 255, 0));
    painter.drawPath(starPath);

    series->setBrush(image);                         // 将画有五角星的图层设置为点的样式
    series->setPen(QColor(Qt::transparent));         // 默认绘制点是有一个白色的边框的，所以画五角星是就要将边框设透明

    ui->chartView->chart()->addSeries(series);       // 将创建的series添加经chart中
    ui->chartView->chart()->createDefaultAxes();
}

5、实现效果🦢

6、源代码🦉

gitee
github

😮‍💨😮‍💨😮‍💨😮‍💨😮‍💨😮‍💨😮‍💨😮‍💨