技术小新 | QtCharts快速入门

Posted 2022-03-28 阿木实验室

一、QtCharts

  QtCharts是Qt自带的组件库，其中包含折线、曲线、饼图、棒图、散点图、雷达图等各种常用的图表。而在地面站开发过程中，使用折线图可以对无人机的一些状态数据进行监测，更是可以使用散点图来模拟飞机所在位置，实现平面地图的感觉。

  使用Qt Charts绘制，大概可以分为四个部分：数据(QXYSeries)、图表(QChart)、坐标轴(QAbstractAXis)和视图(QChartView)。这里就不一一给大家介绍了，下面给大家说一下QtCharts的配置安装。

二、配置安装

1. 准备工作 安装Qt时带上charts,否则无法使用。版本最好是Qt5.7以后的版本。 对于编译方式安装的 Qt，需要注意在 configure 时不要跳过 charts。 对于安装包方式安装的 Qt，需要注意在安装时，确保 charts 组件被选中。
2. 修改配置文件 新建一个项目 在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++)
   
   //调用append()接口，传递的参数x、y对用的是一组坐标数据。
   series->append(i, sin(0.6f*i));
   
   // 将系列添加到图表
   chart->addSeries(series);
   // 基于已添加到图表的 series 来创建默认的坐标轴
   chart->createDefaultAxes();
   // 将图表绑定到视图
   ui->widget->setChart(chart);

6. 运行程序

  QChartView继承的是QGraphicsView，QChart继承的是QGraphics-Widget，所以我们可以用图形视图框架的知识，在它的基础上进行拓展，Qt自带的示例Callout可以给我们提供参考。

- End -

技术发展的日新月异，阿木实验室将紧跟技术的脚步，不断把机器人行业最新的技术和硬件推荐给大家。看到经过我们培训的学员在技术上突飞猛进，是我们培训最大的价值。如果你在机器人行业，就请关注我们的公众号，我们将持续发布机器人行业最有价值的信息和技术。 阿木实验室致力于为机器人研发提供开源软硬件工具和课程服务，让研发更高效！