QTCharts入门 使用QChartView做折线图

 

引言

----------------------------------------------------------------------------------------------------------------------

      自从Qt发布以来,给广大跨平台界面研发人员带来了无数的福利。但是Qt自己却一直没有提供自带的组件库,这就使得QWT、QCustomPlot等第三方库有了巨大的生存空间,为了降低开发成本,大家都涌向了这些第三方库。这种情况一直持续到QTCharts的发布之前。QTCharts是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,  将图表绑定到视图

      7, 创建窗体并运行。

      下面来分别看一下:

1, 准备工作

      需要在安装qt时带上了charts,否则后面工作无法开展

      对于编译方式安装的Qt,需要注意在configure时不要跳过charts。

      对于安装包方式安装的Qt,需要注意在安装时,确保charts组件被选中。

 

2, 修改pro文件

      在pro中,使用如下语句包含charts库:

 
      QT+= charts

 

 

3, 提升widget控件为QChartView

      在绘制ui窗体时,从designer的工具箱中选择一个“Widget”类型的控件,将objectName设置为"widget",然后在它上面单击鼠标右键,选择“提升为”。

      在弹出的界面中,填写"提升的类名称"为: QChartView,头文件名称会自动生成,我们不用关心。

      然后单击“添加”按钮即可。

      如果在提升界面的上半部分已经有我们需要的类"QChartView",那么只需要选中它,然后单击"提升"按钮即可。

 

4, 修改界面头文件

      在界面的头文件中,我们需要编写下面两行代码:

 
 
 
#include

QT_CHARTS_USE_NAMESPACE

#include "ui_xxxxx.h"

      请注意,两行加粗的代码必须写在#include  "ui_xxxxx.h"的前面,因为"ui_xxxxx.h"头文件也需要用到这里的宏定义

      这两句代码的作用是包含QChart所需的一批头文件,并声明QTChats的命名空间。

 

5,  构建图表、构建系列

 
QChart* chart = new QChart();

      这行代码很简单,我们构建一个QChart对象。

 
 
 
 
QLineSeries *series = new QLineSeries();

for (quint32 i = 0; i < 100; i++) {

    series->append(i, sin(0.6f*i));

}

      上面的代码构建了一个折线系列对象,并且对它进行初始化。方法是调用append()接口,传递的参数x、y对用的是一组坐标数据。就是折线上的一个点。

      然后,我们将系列添加到图表,并创建默认的坐标轴。

 
 
chart->addSeries(series);      

chart->createDefaultAxes();        // 基于已添加到图表的 series 来创建默认的坐标轴

 

6,  将图表绑定到视图

 
widget->setChart(chart);       

      widget是前面第3步中我们提升的控件对象。

 

7, 创建窗体并运行。

 
 
 
 
 
 
 
int main(int argc, char * argv[])

{

    QApplication app(argc, argv);

    CDialog dlg(NULL);

    dlg.exec();

    return 0;

}

      OK,编译运行一下试试吧。是不是很简单呢?

 

结语

----------------------------------------------------------------------------------------------------------------------

      本节我们通过将"Widget"控件提升为QChartView的方法完成了折线图的绘制。我们只修改了系列数据,其他的参数都采用默认方式,因此本节比较简单。下一节我们将演示直接使用QGraphicsView来完成本节功能的开发。后面的视频章节我们会陆续为大家介绍主题、样式设置、互操作、心电图等内容,敬请关注。

      关于QTCharts您还想知道什么,欢迎留言。
--------------------- 
作者:女儿叫老白 
来源:CSDN 
原文:https://blog.csdn.net/baizy77/article/details/84107786 
版权声明:本文为博主原创文章,转载请附上博文链接!

你可能感兴趣的:(《Qt》)