Qt 绘制图表 - Qt Charts版
一、前言
自从 Qt 发布以来,给广大跨平台界面研发人员带来了无数的福利。但是Qt自己却一直没有提供自带的图表库,这就使得 QWT、QCustomPlot 等第三方图表库有了巨大的生存空间,为了降低开发成本,大家都涌向了这些第三方库。这种情况一直持续到 Qt5.7 版本后 Qt Charts 的发布。Qt Charts 是 Qt 自带的组件库,包含折线、曲线、饼图、棒图、散点图、雷达图等等各种常用的图表。只是要注意协议的约束:GPLV3。
我们今天使用 QChartView 来做折线图。QChartView 派生自 QGraphicsView,但它可专门用来展示 QChart 图表。
二、概念热身
先给大家做一下概念热身。
坐标轴-QAbstractAxis:
图表中,一般都有 X、Y 坐标轴,复杂一些的还带有 Z 轴。对应到 Qt 的图表也有 X、Y 轴对象。但是今天,我们先不展开介绍。如果我们不创建轴坐标对应的对象,可以使用 Qt 的默认轴对象。后面我们会介绍用法。
系列-QAbstractSeries:
不论是曲线、饼图、棒图还是其他图表,其中展示的内容本质都是数据。一条曲线是一组数据,一个饼图也对应一组数据。在 Qt Charts 中,这些一组组的数据被称作系列。对应不同类型的图表 Qt 提供了不同的系列。系列除了负责存储、访问数据,应该还提供了数据的绘制方法,比如折线图和曲线图分别对应 QLineSerie 和 QSPLineSerie。我们可以用不同的系列达到不同的展示目的。
图例-Legend:
类似于 Excel,Qt Charts 中也提供了图例,并且还可以显示或者隐藏图例。
图表-QChart:
Qt 提供了 QChart 类来封装前面所说的内容,比如坐标轴、系列、图例等。QChart 承担了一个组织、管理的角色。QChart 派生自 QGraphicsObject,因此它实际上是一个图元 item。我们可以从 QChart 获取到坐标轴对象、数据系列对象、图例等等,并且可以设置图表的主题、背景色等样式信息。
视图-QChartView:
负责 QChart 的展示。QChart 本身只负责图表内容的组织、管理。图表的展示由视图负责,这个视图就是 QChartView。QChartView 派生自 QGraphicsView,只是它专门提供了几个面向 QChart 的接口,比如 setChart(QChart*)等。
三、正文
好了概念热身完毕,下面进入主题:用 QChartView 绘制折线图。
步骤如下:
1、准备工作;
2、修改 pro 文件;
3、 提升 widget 控件为 QChartView;
4、修改头文件;
5、构建图表、构建系列,并将图表绑定到视图;
6、运行程序。
下面来分别看一下:
1、准备工作
需要在安装 Qt 时带上了 charts,否则后面工作无法开展。
- 对于编译方式安装的 Qt,需要注意在 configure 时不要跳过 charts。
- 对于安装包方式安装的 Qt,需要注意在安装时,确保 charts 组件被选中。
新建一个 Qt Widgets Application 项目。
2、修改 pro 文件
在 pro 中,使用如下语句包含 charts 库:
QT += charts
3、 提升 widget 控件为 QChartView
在绘制 ui 窗体时,从 designer 的工具箱中选择一个 “Widget” 类型的控件,然后在它上面单击鼠标右键,选择 “提升为”。
在弹出的界面中,填写 "提升的类名称" 为: QChartView,头文件名称会自动生成,我们不用关心。然后单击“添加”按钮即可。
4、修改头文件
在头文件中,我们需要添加下面两行代码:
#include <QtCharts>
QT_CHARTS_USE_NAMESPACE
这两句代码的作用是包含 QChart 所需的头文件,并声明 Qt Charts 的命名空间。
5、构建图表、构建系列,并将图表绑定到视图
在 Wdiget 的构造函数中添加以下代码:
// 构建图表对象
QChart* chart = new QChart();
// 构建折线系列对象
QLineSeries *series = new QLineSeries();
for (quint32 i = 0; i < 100; i++)
{
// 参数 x 为循环自增变量 i,参数 y 为正弦函数Y值
series->append(i, sin(static_cast<double>(0.6f*i)));
}
// 将系列添加到图表
chart->addSeries(series);
// 基于已添加到图表的 series 来创建默认的坐标轴
chart->createDefaultAxes();
// 将图表绑定到视图
ui->widget->setChart(chart);
上面的代码构建了一个 QChart 对象,然后构建了一个折线系列对象,并且对它进行初始化。方法是调用 append() 接口,传递的参数 x、y 对应的是一组坐标数据,就是折线上的一个点。然后,将系列添加到图表,并创建默认的坐标轴。最后,将图表绑定到视图。
6、运行程序
运行程序,效果如下:
用Qt Charts绘制,大概分为四个部分:数据(QXYSeries)、图表(QChart)、坐标轴(QAbstractAXis)和视图(QChartView)。
要注意的是 QChart要先添加数据(QXYSeries),再加载坐标轴(加载轴的过程是先添加轴到 Chart 上,再附加轴到 Series 上)。
参考: