学习Qt Charts-创建一个简单的折线图
一、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
图表类型
- QLineSeries
- QSplineSeries
- QAreaSeries
- QScatterSeries
- QAbstractBarSeries
* BarSeries
* StackedBarSeries
* PercentBarSeries
* HorizontalBarSeries
* HorizontalStackedBarSeries
* HorizontalPercentBarSeries - QPieSeries
- QBoxPlotSeries
- QCandlestickSeries
所有图表类型都是从QAbstractSeries 派生出来的,QAbstractSeries 是一个抽象序列,
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即可,当然不同的图表,也许会有些不一样
完整代码:qchart_01
学习Qt Charts-创建一个简单的折线图的更多相关文章
- [WCF学习笔记] 我的WCF之旅(1):创建一个简单的WCF程序
近日学习WCF,找了很多资料,终于找到了Artech这个不错的系列.希望能从中有所收获. 本文用于记录在学习和实践WCF过程中遇到的各种基础问题以及解决方法,以供日后回顾翻阅.可能这些问题都很基础,可 ...
- Python框架学习之用Flask创建一个简单项目
在前面一篇讲了如何创建一个虚拟环境,今天这一篇就来说说如何创建一个简单的Flask项目.关于Flask的具体介绍就不详细叙述了,我们只要知道它非常简洁.灵活和扩展性强就够了.它不像Django那样集成 ...
- WInform 创建一个简单的WPF应用
(一)创建一个简单的WPF应用 首先,在这里我要说明的是:这里的例子,都是通过控制台程序来创建WPF应用,而非使用现成的WPF模版.因为WPF模版封装了创建WPF应用所需要的各种基本元素,并不利于我们 ...
- 使用ssm(spring+springMVC+mybatis)创建一个简单的查询实例(三)(错误整理篇)
使用ssm(spring+springMVC+mybatis)创建一个简单的查询实例(一) 使用ssm(spring+springMVC+mybatis)创建一个简单的查询实例(二) 以上两篇已经把流 ...
- 使用ssm(spring+springMVC+mybatis)创建一个简单的查询实例(一)
梳理下使用spring+springMVC+mybatis 整合后的一个简单实例:输入用户的 ID,之后显示用户的信息(此次由于篇幅问题,会分几次进行说明,此次是工程的创建,逆向生成文件以及这个简单查 ...
- django创建一个简单的web站点
一.新建project 使用Pycharm,File->New Project…,选择Django,给project命名 (project不能用test命名) 新建的project目录如下: ...
- 一个先进的App框架:使用Ionic创建一个简单的APP
原文 http://www.w3cplus.com/mobile/building-simple-app-using-ionic-advanced-html5-mobile-app-framewor ...
- 【转】ios tableView那些事(一)创建一个简单的tableView
工作也有半年多了!几乎每个项目中的会用到tableview这个神奇而好用的控件,在学习和工作中都会看别人的博客!对我有很大的帮助,就如同站在巨人的肩膀上的感觉吧 哈哈!于是决定重新开始写博客,希望能帮 ...
- Highcharts创建一个简单的柱状图
新建一个html文件,将highcharts引入到你的页面后,通过两个步骤我们就可以创建一个简单的图表了. 1.创建div容器 在页面的 body部分创建一个div,并指定div 的 id,高度和宽度 ...
随机推荐
- checked 和 prop() (散列性比较少的)
在<input class="sex1" type="radio" checked>男 checked表示该框会被默认选上 prop()操作的是D ...
- 网络编程-UDP的服务器和客户端----keep on going never give up
1 //**************************************服务器********************************************** 2 #inclu ...
- [bug] Springboot JPA使用Sort排序时的问题
参考 https://blog.csdn.net/qq_44039966/article/details/102713779
- [bug] Python Anoconda3 安装完成后开始菜单不显示
版本问题,需更新 win+R打开cmd,敲入命令: conda update menuinst conda install -f console_shortcut ipython ipython-no ...
- 查询登录信息 w, who*, id, tty, last, finger
查询登录信息 w, who*, id, tty, last, finger Wavky2016.12.14 16:19:37字数 813阅读 85w [options] [user...]显示所有已登 ...
- 附: Python爬虫 数据库保存数据
原文 1.笔记 #-*- codeing = utf-8 -*- #@Time : 2020/7/15 22:49 #@Author : HUGBOY #@File : hello_sqlite3.p ...
- Linux系统函数read()/write()/pread()/pwrite()的区别-(转自CSDN网络)
在Linux和UNIX中有很多的输入输出函数,有时真是让想跟它攀点关系的菜鸟们束手无策.先来看看都有哪些函数,通过解析与总结,看看能不能让大家能这些函数有个理性的认识,哦,原来是这么回事,也就算我没白 ...
- MinkowskiNonlinearities非线性
MinkowskiNonlinearities非线性 MinkowskiReLU class MinkowskiEngine.MinkowskiReLU(*args, **kwargs) __init ...
- BEP 7:CUDA外部内存管理插件(上)
BEP 7:CUDA外部内存管理插件(上) 背景和目标 在CUDA阵列接口使得能够共享不同的Python之间的数据库的访问CUDA设备.但是,每个库都与其它库区别对待.例如: Numba在内部管理内存 ...
- 4,java数据结构和算法:双向链表 ,有序添加,正向遍历,反向遍历, 增删改查
直接上代码 //节点 class HeroNodeD{ int no; String name; String nickName; HeroNodeD pre;//前一节点 HeroNodeD nex ...