一、Qt Charts

Qt Charts是基于Qt Graphics View实现的一个图表的组件,可以用来在QT GUI程序中添加现在风格的、可交互的、以数据为中心的图表,可以用作QWidget或者 QGraphicsWidget,也可用在QML中。支持的图标类型有:折线图跟曲线图、面积图、饼图、柱状图等。

QT提供的相关的class有:

算了下,一共有48个类,实现一个图表并不需要全部用到,根据所需实现的图表,只需用到当中的几个就行,这些类,大致上可以分为如下几类:

  • QChartView Class

    一个用来显示图表的区域,或者理解为画布,可以在QChartView上实现所有Qt Chart支持的图表。QChartView的派生关系如下:

    QChartView <-- QGraphicsView <-- QAbstractScrollArea <-- QFrame <-- QWidget
  • QChart:QChart是QGraphicsWidget,可以在QGraphicsScene上显示,用来管理图表中的数据、图例、坐标轴等,QChart的派生关系如下:

    QChart <-- QGraphicsWidget <-- QGraphicsObject and QGraphicsLayoutItem  QGraphicsObject  <--  QObject and QGraphicsItem
  • 图表类型

  • QAbstractAxis:坐标轴

  • 图例:基类为QLegendMarker,在此基础上派生出不同的图例,如QAreaLegendMarker, QBarLegendMarker, QBoxPlotLegendMarker等

二、实现一个最简单的折线图

1、创建一个Qt Widgets Application工程,如下图:

给工程命名为qchart,

做一个比较简单的,选择基类为QDialog:

建成后的项目如下:

2、编辑UI文件

打开dialog.ui,添加Vertical Layout,然后选择水平布局,如下图:

3、添加chart库

  • 编辑pro文件:在pro文件中添加:QT += charts,如下:

  • .h声明命名空间(这里在dialog.h中添加)
using namespace QtCharts;

或者

QT_CHARTS_USE_NAMESPACE

编译运行,如果没有错误,运行结果如下:

4、添加QChartView

由于Qt Charts是基于Qt Graphics View实现的,要在UI应用中添加图表功能,首先需要个QGraphicsView,Qt Charts提供了QChartView,首先我们再这里添加QChartView:

  • 在头文件diloag.h中包含如下头文件
#include <QChartView>
  • 然后再类定义中添加变量:
class Dialog : public QDialog
{
Q_OBJECT public:
explicit Dialog(QWidget *parent = nullptr);
~Dialog(); private:
Ui::Dialog *ui; QChartView *ChartView;
};

其中

    QChartView *ChartView;

是新添加的,

  • 在Dialog构造函数中添加代码:
Dialog::Dialog(QWidget *parent) :
QDialog(parent),
ui(new Ui::Dialog)
{
ui->setupUi(this); ChartView = new QChartView(this);
ui->verticalLayout->addWidget(ChartView);
}

运行结果如下:

上图中,与之前的执行结果相比,多了个白色区域,说明QChartView添加成功,因为我们还没有添加任何图表所以是空白的,

5、实现图表

QChartView成功添加了后,还要添加管理图表中的序列、坐标轴、图例的QChart,首先添加相关头文件:

 #include <QChart>

然后在类定义中添加一个QChart,

QChart *chart;

最后,实例化 QChart,并添加到QChartView,代码如下:

Dialog::Dialog(QWidget *parent) :    QDialog(parent),    ui(new Ui::Dialog){
ui->setupUi(this);
chart = new QChart();
ChartView = new QChartView(this);
ChartView->setChart(chart);
ui->verticalLayout->addWidget(ChartView);
}

编译运行后如下:

结果跟上一个步骤一样,因为还没有添加任何图表类型,所以还是空白的,

6、添加折线图序列

添加了QChart后,就可以创建一些图表序列,添加到QChart,由于我们要实现的是折线图,这里使用QLineSeries,首先添加相关头文件:

#include "QLineSeries"

声明并实例化QLineSeries:

 QLineSeries* series = new QLineSeries();

然后给series添加几个点,并把series添加到chart中:

Dialog::Dialog(QWidget *parent) :    QDialog(parent),    ui(new Ui::Dialog){
ui->setupUi(this);
ui->setupUi(this);
chart = new QChart();
QLineSeries* series = new QLineSeries();
series->append(0, 6);
series->append(2, 4);
series->append(4,8);
series->append(8,10);
series->append(10,12);
chart->addSeries(series);
chart->createDefaultAxes();
ChartView = new QChartView(this);
ChartView->setChart(chart);
ui->verticalLayout->addWidget(ChartView);
}

运行结果如下:

到这里就实现了一个最简单的折线图了,

如果要实现其他的图表,如曲线图,只需要把第6部分的QLineSeries替换成QSplineSeries即可,当然不同的图表,也许会有些不一样

参考:

Qt Charts Overview

完整代码:qchart_01

学习Qt Charts-创建一个简单的折线图的更多相关文章

  1. [WCF学习笔记] 我的WCF之旅(1):创建一个简单的WCF程序

    近日学习WCF,找了很多资料,终于找到了Artech这个不错的系列.希望能从中有所收获. 本文用于记录在学习和实践WCF过程中遇到的各种基础问题以及解决方法,以供日后回顾翻阅.可能这些问题都很基础,可 ...

  2. Python框架学习之用Flask创建一个简单项目

    在前面一篇讲了如何创建一个虚拟环境,今天这一篇就来说说如何创建一个简单的Flask项目.关于Flask的具体介绍就不详细叙述了,我们只要知道它非常简洁.灵活和扩展性强就够了.它不像Django那样集成 ...

  3. WInform 创建一个简单的WPF应用

    (一)创建一个简单的WPF应用 首先,在这里我要说明的是:这里的例子,都是通过控制台程序来创建WPF应用,而非使用现成的WPF模版.因为WPF模版封装了创建WPF应用所需要的各种基本元素,并不利于我们 ...

  4. 使用ssm(spring+springMVC+mybatis)创建一个简单的查询实例(三)(错误整理篇)

    使用ssm(spring+springMVC+mybatis)创建一个简单的查询实例(一) 使用ssm(spring+springMVC+mybatis)创建一个简单的查询实例(二) 以上两篇已经把流 ...

  5. 使用ssm(spring+springMVC+mybatis)创建一个简单的查询实例(一)

    梳理下使用spring+springMVC+mybatis 整合后的一个简单实例:输入用户的 ID,之后显示用户的信息(此次由于篇幅问题,会分几次进行说明,此次是工程的创建,逆向生成文件以及这个简单查 ...

  6. django创建一个简单的web站点

    一.新建project 使用Pycharm,File->New Project…,选择Django,给project命名 (project不能用test命名)   新建的project目录如下: ...

  7. 一个先进的App框架:使用Ionic创建一个简单的APP

    原文  http://www.w3cplus.com/mobile/building-simple-app-using-ionic-advanced-html5-mobile-app-framewor ...

  8. 【转】ios tableView那些事(一)创建一个简单的tableView

    工作也有半年多了!几乎每个项目中的会用到tableview这个神奇而好用的控件,在学习和工作中都会看别人的博客!对我有很大的帮助,就如同站在巨人的肩膀上的感觉吧 哈哈!于是决定重新开始写博客,希望能帮 ...

  9. Highcharts创建一个简单的柱状图

    新建一个html文件,将highcharts引入到你的页面后,通过两个步骤我们就可以创建一个简单的图表了. 1.创建div容器 在页面的 body部分创建一个div,并指定div 的 id,高度和宽度 ...

随机推荐

  1. checked 和 prop() (散列性比较少的)

    在<input  class="sex1" type="radio" checked>男 checked表示该框会被默认选上 prop()操作的是D ...

  2. 网络编程-UDP的服务器和客户端----keep on going never give up

    1 //**************************************服务器********************************************** 2 #inclu ...

  3. [bug] Springboot JPA使用Sort排序时的问题

    参考 https://blog.csdn.net/qq_44039966/article/details/102713779

  4. [bug] Python Anoconda3 安装完成后开始菜单不显示

    版本问题,需更新 win+R打开cmd,敲入命令: conda update menuinst conda install -f console_shortcut ipython ipython-no ...

  5. 查询登录信息 w, who*, id, tty, last, finger

    查询登录信息 w, who*, id, tty, last, finger Wavky2016.12.14 16:19:37字数 813阅读 85w [options] [user...]显示所有已登 ...

  6. 附: Python爬虫 数据库保存数据

    原文 1.笔记 #-*- codeing = utf-8 -*- #@Time : 2020/7/15 22:49 #@Author : HUGBOY #@File : hello_sqlite3.p ...

  7. Linux系统函数read()/write()/pread()/pwrite()的区别-(转自CSDN网络)

    在Linux和UNIX中有很多的输入输出函数,有时真是让想跟它攀点关系的菜鸟们束手无策.先来看看都有哪些函数,通过解析与总结,看看能不能让大家能这些函数有个理性的认识,哦,原来是这么回事,也就算我没白 ...

  8. MinkowskiNonlinearities非线性

    MinkowskiNonlinearities非线性 MinkowskiReLU class MinkowskiEngine.MinkowskiReLU(*args, **kwargs) __init ...

  9. BEP 7:CUDA外部内存管理插件(上)

    BEP 7:CUDA外部内存管理插件(上) 背景和目标 在CUDA阵列接口使得能够共享不同的Python之间的数据库的访问CUDA设备.但是,每个库都与其它库区别对待.例如: Numba在内部管理内存 ...

  10. 4,java数据结构和算法:双向链表 ,有序添加,正向遍历,反向遍历, 增删改查

    直接上代码 //节点 class HeroNodeD{ int no; String name; String nickName; HeroNodeD pre;//前一节点 HeroNodeD nex ...