C/C++ Qt QChart绘图组件的具体使用

QtCharts 组件是QT中提供图表绘制的模块,该模块可以方便的绘制常规图形,Qtcharts 组件基于GraphicsView模式实现,其核心是QChartViewQChart的二次封装版。

在使用绘图模块时需要在pro文件中包含QT += charts来引入绘图类库。

然后还需在头文件中定义QT_CHARTS_USE_NAMESPACE宏,这样才可以正常的使用绘图功能。

一般情况下我们会在mainwindows.h头文件中增加如下代码段。

#include <QMainWindow>
#include <QtCharts>
QT_CHARTS_USE_NAMESPACE

// 解决MSVC编译时,界面汉字乱码的问题
#if _MSC_VER >= 1600
#pragma execution_character_set("utf-8")
#endif

由于QT中不存在单独的绘图画布,因此在绘图前我们需要在窗体中放入一个graphicsView组件。

并在该组件上右键将其提升为QChartView

输入需要提升的组件名称,即可将该组件提升为全局绘图组件。

绘制折线图

折线图的使用非常广泛,如下代码我们首先使用InitChart()将画布初始化,接着调用SetData()实现在画布中填充数据,完整代码如下。

#include "mainwindow.h"
#include "ui_mainwindow.h"

// 初始化Chart图表
void MainWindow::InitChart()
{
    // 创建图表的各个部件
    QChart *chart = new QChart();
    chart->setTitle("系统性能统计图");

    // 将Chart添加到ChartView
    ui->graphicsView->setChart(chart);
    // this->setCentralWidget( ui->graphicsView);
    ui->graphicsView->setRenderHint(QPainter::Antialiasing);

    // 设置图表主题色
    ui->graphicsView->chart()->setTheme(QChart::ChartTheme(0));

    // 创建曲线序列
    QLineSeries *series0 = new QLineSeries();
    QLineSeries *series1 = new QLineSeries();

    series0->setName("一分钟负载");
    series1->setName("五分钟负载");

    // 序列添加到图表
    chart->addSeries(series0);
    chart->addSeries(series1);

    // 其他附加参数
    series0->setPointsVisible(false);       // 设置数据点可见
    series1->setPointLabelsVisible(false);  // 设置数据点数值可见

    // 创建坐标轴
    QValueAxis *axisX = new QValueAxis;    // X轴
    axisX->setRange(1, 100);               // 设置坐标轴范围
    axisX->setTitleText("X轴标题");         // 标题
    axisX->setLabelFormat("%d %");         // 设置x轴格式
    axisX->setTickCount(3);               // 设置刻度
    axisX->setMinorTickCount(3);

    QValueAxis *axisY = new QValueAxis;    // Y轴
    axisY->setRange(0, 100);               // Y轴范围(-1 - 20)
    axisY->setTitleText("Y轴标题");         // 标题

    // 设置X于Y轴数据集
    chart->setAxisX(axisX, series0);   // 为序列设置坐标轴
    chart->setAxisY(axisY, series0);

    chart->setAxisX(axisX, series1);   // 为序列设置坐标轴
    chart->setAxisY(axisY, series1);

    // 图例被点击后触发
    foreach (QLegendMarker* marker, chart->legend()->markers())
    {
       QObject::disconnect(marker, SIGNAL(clicked()), this, SLOT(on_LegendMarkerClicked()));
       QObject::connect(marker, SIGNAL(clicked()), this, SLOT(on_LegendMarkerClicked()));
    }
}

// 为序列生成数据
void MainWindow::SetData()
{
    // 获取指针
    QLineSeries *series0=(QLineSeries *)ui->graphicsView->chart()->series().at(0);
    QLineSeries *series1=(QLineSeries *)ui->graphicsView->chart()->series().at(1);

    // 清空图例
    series0->clear();
    series1->clear();

    // 赋予数据
    qreal t=0,intv=1;
    for(int i=1;i<100;i++)
    {
       series0->append(t,i);       // 设置轴粒度以及数据
       series1->append(t,i+10);    // 此处用随机数替代
       t+=intv;                    // X轴粒度
    }
}

// 将添加的widget控件件提升为QChartView类
MainWindow::MainWindow(QWidget *parent) :QMainWindow(parent),ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    InitChart();
    SetData();
}

MainWindow::~MainWindow()
{
    delete ui;
}

// 图例点击后显示与隐藏线条
void MainWindow::on_LegendMarkerClicked()
{
    QLegendMarker* marker = qobject_cast<QLegendMarker*> (sender());

    switch (marker->type())
    {
        case QLegendMarker::LegendMarkerTypeXY:
        {
            marker->series()->setVisible(!marker->series()->isVisible());
            marker->setVisible(true);
            qreal alpha = 1.0;
            if (!marker->series()->isVisible())
                alpha = 0.5;

            QColor color;
            QBrush brush = marker->labelBrush();
            color = brush.color();
            color.setAlphaF(alpha);
            brush.setColor(color);
            marker->setLabelBrush(brush);

            brush = marker->brush();
            color = brush.color();
            color.setAlphaF(alpha);
            brush.setColor(color);
            marker->setBrush(brush);

            QPen pen = marker->pen();
            color = pen.color();
            color.setAlphaF(alpha);
            pen.setColor(color);
            marker->setPen(pen);
            break;
        }
        default:
            break;
    }
}

效果如下所示:

绘制饼状图

饼状图用于统计数据的集的占用百分比,其绘制方式与折线图基本一致,代码如下。

#include "mainwindow.h"
#include "ui_mainwindow.h"

// 饼状图A
void MainWindow::printA()
{
    // 构造数据 [已用CPU 60%] [剩余CPU 40%]
    QPieSlice *slice_1 = new QPieSlice(QStringLiteral("已使用"), 0.6, this);
    slice_1->setLabelVisible(true);

    QPieSlice *slice_2 = new QPieSlice(QStringLiteral("可用"), 0.4, this);
    slice_2->setLabelVisible(true);

    // 将两个饼状分区加入series
    QPieSeries *series = new QPieSeries(this);
    series->append(slice_1);
    series->append(slice_2);

    // 创建Chart画布
    QChart *chart = new QChart();
    chart->addSeries(series);
    chart->setAnimationOptions(QChart::AllAnimations); // 设置显示时的动画效果
    chart->setTitle("系统CPU利用率");

    // 将参数设置到画布
    ui->graphicsView->setChart(chart);
    ui->graphicsView->setRenderHint(QPainter::Antialiasing);
    ui->graphicsView->chart()->setTheme(QChart::ChartTheme(0));
}

// 饼状图B
void MainWindow::printB()
{
    // 构造数据 [C盘 20%] [D盘 30%] [E盘 50%]
    QPieSlice *slice_c = new QPieSlice(QStringLiteral("C盘"), 0.2, this);
    slice_c->setLabelVisible(true);

    QPieSlice *slice_d = new QPieSlice(QStringLiteral("D盘"), 0.3, this);
    slice_d->setLabelVisible(true);

    QPieSlice *slice_e = new QPieSlice(QStringLiteral("E盘"),0.5,this);
    slice_e->setLabelVisible(true);

    // 将两个饼状分区加入series
    QPieSeries *series = new QPieSeries(this);
    series->append(slice_c);
    series->append(slice_d);
    series->append(slice_e);

    // 创建Chart画布
    QChart *chart = new QChart();
    chart->addSeries(series);
    chart->setAnimationOptions(QChart::AllAnimations); // 设置显示时的动画效果
    chart->setTitle("系统磁盘信息");

    // 将参数设置到画布
    ui->graphicsView_2->setChart(chart);
    ui->graphicsView_2->setRenderHint(QPainter::Antialiasing);
    ui->graphicsView_2->chart()->setTheme(QChart::ChartTheme(3));   // 设置不同的主题
}

// 将添加的widget控件件提升为QChartView类
MainWindow::MainWindow(QWidget *parent) :QMainWindow(parent),ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    printA();
    printB();
}

MainWindow::~MainWindow()
{
    delete ui;
}

效果如下所示:

绘制柱状图

柱状图可用于一次展示多个用户数据,大体是使用上与折线图大体一致,其代码如下:

#include "mainwindow.h"
#include "ui_mainwindow.h"

MainWindow::MainWindow(QWidget *parent) :QMainWindow(parent),ui(new Ui::MainWindow)
{
    ui->setupUi(this);

    // 创建人名
    QBarSet *set0 = new QBarSet("张三");
    QBarSet *set1 = new QBarSet("李四");
    QBarSet *set2 = new QBarSet("王五");
    QBarSet *set3 = new QBarSet("苏三");
    QBarSet *set4 = new QBarSet("刘麻子");

    // 分别为不同人添加bu不同数据集
    *set0 << 1 << 2 << 8 << 4 << 6 << 6;
    *set1 << 5 << 2 << 5 << 4 << 5 << 3;
    *set2 << 5 << 5 << 8 << 15 << 9 << 5;
    *set3 << 8 << 6 << 7 << 5 << 4 << 5;
    *set4 << 4 << 7 << 5 << 3 << 3 << 2;

    // 将数据集关联到series中
    QBarSeries *series = new QBarSeries();
    series->append(set0);
    series->append(set1);
    series->append(set2);
    series->append(set3);
    series->append(set4);

    // 增加顶部提示
    QChart *chart = new QChart();
    chart->addSeries(series);
    chart->setTitle("当前人数统计");
    chart->setAnimationOptions(QChart::SeriesAnimations);

    // 创建X轴底部提示
    QStringList categories;
    categories << "周一" << "周二" << "周三" << "周四" << "周五" << "周六";

    QBarCategoryAxis *axis = new QBarCategoryAxis();
    axis->append(categories);
    chart->createDefaultAxes();
    chart->setAxisX(axis, series);

    chart->legend()->setVisible(true);
    chart->legend()->setAlignment(Qt::AlignBottom);

    // 将参数设置到画布
    ui->graphicsView->setChart(chart);
    ui->graphicsView->setRenderHint(QPainter::Antialiasing);
    ui->graphicsView->chart()->setTheme(QChart::ChartTheme(0));
}

MainWindow::~MainWindow()
{
    delete ui;
}

效果如下所示:

到此这篇关于C/C++ Qt QChart绘图组件的具体使用的文章就介绍到这了,更多相关 Qt QChart组件内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

时间: 2021-11-24

Qt QChart 创建图表的实现方法

本文主要介绍了Qt QChart 创建图表,分享给大家,也给自己留个笔记,废话不多说,具体如下: 效果 流程 代码 1. 饼图 // 保存多个扇形 QList<QPieSlice *> slices; for (int i = 1; i <= 10; ++i) { // 创建一个扇形 QPieSlice * slice = new QPieSlice(QString::number(i),i); slices << slice; } // 创建一个饼图系列 QPieSerie

Qt图形图像开发之Qt曲线图美化QChart QScatterSeries 空心点阵图,鼠标移动到上面显示数值,鼠标移开数值消失效果实例

最近接到一个Qt QChart曲线图美化的需求,画一个折线图,关键点使用空心的圆点标识出来,鼠标移动到关键点上,显示出当前数值:鼠标移走数值消失. 效果图如下: 我们遇到这个需求的时候,第一时间就会想到使用 QLineSeries 画折线图. 首先初始化 QChart *chart = new QChart(); chart->legend()->setVisible(false); ui->chartView->setChart(chart); ui->chartView-

Qt图形图像开发之曲线图表库QtChart编译安装详细方法与使用实例

Qt曲线图表库QtChart简介 Qt的线性绘图控件有大名鼎鼎的Qwt,ChartDirector,小巧玲珑的QCustomPlot,当然还有自家的QtChart.长久以来QtChart在Qt家族里一直是收费的模块,只有商业版才可以使用,但Qt5.7之后将开放其权限,可参见:Qt 5.7 亮瞎眼的更新.下面将介绍如何安装QtChart并进行简单的绘图. Qt曲线图表库QtChart下载 这里用git下载QtChart,参考Qt Charts 5.7.0 安装教程 Git地址:https://gi

Qt图形图像开发之曲线图表模块QChart库读取/设置X轴的显示区间

设置初始的显示的区间,常用的有两种方法 (1)自动 lineseries = new QLineSeries();//声明折线数据集 lineseries->append(4, 10); //填充数据集 *lineseries << QPointF(13, 5) << QPointF(17, 6); lineChart = new QChart();//创建图表 lineChart->addSeries(lineseries); // 将 数据集 添加至图表中 line

Qt图形图像开发曲线图表模块QChart库基本用法、各个类之间的关系说明

如何编译安装QChart请查看下面文章 Qt图形图像开发之曲线图表库QtChart编译安装详细方法与使用实例 使用Qt曲线图表模块Chart库首先要注意3点: (1)在.pro文件中添加:QT += charts. (2)用到QChart的文件中添加:QT_CHARTS_USE_NAMESPACE,或者:using namespace QtCharts; 在ui界面中拖入一个graphicsView控件,然后右击提升为QChartView类,写提升为的类:QtCharts::QChartView

详解C/C++ QT QChart 绘制组件应用

QtCharts 组件是QT中提供图表绘制的模块,该模块可以方便的绘制常规图形,Qtcharts 组件基于GraphicsView模式实现,其核心是QChartView和QChart的二次封装版. 在使用绘图模块时需要在pro文件中包含QT += charts来引入绘图类库. 然后还需在头文件中定义QT_CHARTS_USE_NAMESPACE宏,这样才可以正常的使用绘图功能. 一般情况下我们会在mainwindows.h头文件中增加如下代码段. #include <QMainWindow>

Qt图形图像开发曲线图表模块QChart库缩放/平移详细方法与实例

1.使用QChartView来缩放 (1)用鼠标框选一个矩形,把图放大到这个矩形 QChartView::setRubberBand(QChartView::RectangleRubberBand);//XY方向同时放大到鼠标画出的矩形大小(也可以设置为只放大X轴或Y轴) (2)setRubberBand函数同时也能使鼠标右键,具备缩小图的功能. 2.使用Qchart来平移和缩放 QChart::scroll(-10, 5);//整体平移(-10, 5),两个参数分别为Δx和Δy QChart:

Qt图形图像开发之曲线图模块QCustomplot库生成静态、动态曲线详细教程图解

Qt曲线图模块QCustomPlot库介绍 QCustomPlot是一个小型的Qt画图标类,支持绘制静态曲线.动态曲线.多重坐标曲线,柱状图,蜡烛图等.只需要在项目中加入头文件qcustomplot.h和qcustomplot.cpp文件,然后使一个widget提升为QCustomPlot类,即可使用. QCustomPlot官网:   http://www.qcustomplot.com/ QCustomPlot下载地址:   http://www.qcustomplot.com/index.

Qt图形图像开发之曲线图表模块QChart库一个chart中显示两条曲线详细方法与实例

首先要了解QChartView.QChart.QLineSeries.QValueAxis的实体之间的关系,例如一个QChartView中可以包含几个QValueAxis?这些可参考 Qt图形图像开发曲线图表模块QChart库基本用法.各个类之间的关系说明 每个chart可以包含多个QLineSeries数据系列,每个QLineSeries数据系列又包含了2个QValueAxis数值轴或QDateTimeAxis时间轴. 那么这个chart中的多个数据系列,一起显示在同一个chart中,会是什么

Qt图形图像开发之曲线图表模块QChart库坐标轴和数据不对应、密集的散点图无法显示问题解决方法

QChart坐标轴和数据不对应问题描述: lineseries->append(4, 10); lineseries->append(5, 8); Chart->addSeries(lineseries); // 将 series 添加至图表中 axisX->setRange(0, 15);//设置X的显示范围 axisY->setRange(-20, 20); lineChart->setAxisX(axisX);//把轴添加到图表中 lineChart->se

Qt图形图像开发之高性能曲线图模块QCustomplot库详细使用方法与实例(支持动、静曲线图)

Qt曲线图模块QCustomPlot库介绍 QCustomPlot是一个小型的Qt画图标类,支持绘制静态曲线.动态曲线.多重坐标曲线,柱状图,蜡烛图等 前段时间用QChart模块画图,一条曲线上面放8000条数据就会卡的不行必须要换个其他的控件,后来找到了曲线图模块QCustomplot库 这个库性能非常好,画曲线图折线图柱状图动态静态,放大缩小,都很好用,10w条数据量无压力秒画出来一点也不卡 下载地址 https://www.qcustomplot.com/index.php/downloa

Qt图形图像开发之曲线图表库QChart编译安装详细方法与使用实例

Qt曲线图表库Qt Chart简介 Qt的线性绘图控件有大名鼎鼎的Qwt,ChartDirector,小巧玲珑的QCustomPlot,当然还有自家的QtChart.长久以来QtChart在Qt家族里一直是收费的模块,只有商业版才可以使用,但Qt5.7之后将开放其权限,可参见:Qt 5.7 亮瞎眼的更新.下面将介绍如何安装QtChart并进行简单的绘图. Qt曲线图表库Qt Chart下载 这里用git下载QtChart,参考Qt Charts 5.7.0 安装教程 Git地址:https://

Qt图形图像开发之QT滚动区控件(滚动条)QScrollArea的详细方法用法图解与实例

QT滚动区控件(滚动条控件)QScrollArea简介 滚动区域控件QScrollArea用于显示一个画面中的子部件的内容.如果部件超过画面的大小,视图可以提供滚动条,这样就可以看到部件的整个区域. QScrollArea属于控件容器类,可以直接在ui中拖出来. 对于QScrollArea,最难搞懂的就是:如何控制它,才能让它在我们想要出现滚动条的时候出现滚动条. 我们拖入一个QScrollArea,再向他里面拖入4个button,观察信息如下: 可以发现,4个button并不是直接位于QScr