Qt Charts入门指南

最新推荐文章于 2024-08-29 10:59:30 发布
最新推荐文章于 2024-08-29 10:59:30 发布
阅读量2k 收藏 10
点赞数 2
分类专栏： QT

简述

Qt Charts 的横空出世标识着 QWT、QCustomPlot …… 时代的终结，是时候向他们做一个简单的告别了。Qt Charts - 强大并极具吸引力，从现在开始，让我们顺势拥抱灿烂的明天 。

安装配置

Qt5.7 中已经集成了 Qt Charts 模块，关于 Qt 的安装配置，请参考：

安装过程中，新添加的一些模块（例如：Qt Charts）默认不被安装，可以根据需要自行勾选：

这里写图片描述

注意：由于后期需要使用 Qt Charts，请勾选上此模块，否则无法使用。

基本示例

Qt 为 Qt Charts 提供了一系列示例，这是快速学习和掌握 Qt Charts 的方式之一。

打开 Creator，选择：【欢迎】->【示例】，输入“charts”相关的关键字：

这里写图片描述

选择其中一个示例运行，效果如下：

这里写图片描述

效果棒棒哒，美观、简单、直观，而且还支持动画 。。。

入门指南

如果要导入 Qt Charts QML 类型，需要在 .qml 文件中添加下面的导入语句：

import QtCharts 2.0
  • 1

要在应用程序中使用 Qt Charts C++ 类，使用下面的 include 和 using 语句：

#include <QtCharts>

using namespace QtCharts;
  • 1
  • 2
  • 3

这里有更简单的宏定义来代替命名空间的使用：

QT_CHARTS_USE_NAMESPACE
  • 1

找到定义，可以看到其实是一个道理：

#define QT_CHARTS_NAMESPACE QtCharts

#ifdef QT_CHARTS_NAMESPACE
#  define QT_CHARTS_BEGIN_NAMESPACE namespace QT_CHARTS_NAMESPACE {
#  define QT_CHARTS_END_NAMESPACE }
#  define QT_CHARTS_USE_NAMESPACE using namespace QT_CHARTS_NAMESPACE;
#else
#  define QT_CHARTS_BEGIN_NAMESPACE
#  define QT_CHARTS_END_NAMESPACE
#  define QT_CHARTS_USE_NAMESPACE
#endif
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

注意：从 Qt Creator 3.0 以后，使用 Qt Quick Application 向导创建的项目，基于 Qt Quick 2 模板，默认使用 QGuiApplication。项目中所有此类 QGuiApplication 实例必须更换为 QApplication，模块依赖于 Graphics View 框架的渲染。

要链接到 Qt Charts 模块，需要在 qmake 项目文件中添加：

QT += charts
  • 1

基本用法

要构建图表，可以通过以下两种方式：

  • QChartView + QChart 
    QChartView 作为一个独立的图表窗口，用于显示 QChart，不需要与 QGraphicsScene 一起使用。

  • QGraphicsScene + QChart 
    在现有的 QGraphicsScene 中显示 QChart（或 QPolarChart）。

QChartView + QChart

这里写图片描述

这种方式将 QChartView 作为一个独立的窗口，通过构造函数或者调用 setChart() 就可以为设置 QChart 作为显示的图表，这对于一个图表的单独显示来说非常简单。

#include <QApplication>
#include <QChartView>
#include <QLineSeries>

QT_CHARTS_USE_NAMESPACE

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);

    // 构建 series，作为图表的数据源，为其添加 6 个坐标点
    QLineSeries *series = new QLineSeries();
    series->append(0, 5);
    series->append(4, 10);
    series->append(8, 6);
    *series << QPointF(13, 5) << QPointF(17, 6) << QPointF(20, 2);

    // 构建图表
    QChart *chart = new QChart();
    chart->legend()->hide();  // 隐藏图例
    chart->addSeries(series);  // 将 series 添加至图表中
    chart->createDefaultAxes();  // 基于已添加到图表的 series 来创轴
    chart->setTitle("Simple line chart");  // 设置图表的标题 

    // 构建 QChartView，并设置抗锯齿、标题、大小
    QChartView *chartView = new QChartView(chart);
    chartView->setRenderHint(QPainter::Antialiasing);
    chartView->setWindowTitle("Simple line chart");
    chartView->resize(400, 300);
    chartView->show();

    return a.exec();
}

QGraphicsScene + QChart

这里写图片描述

这种方式不需要使用 QChartView，图表窗口用 QGraphicsView 来代替，在 QGraphicsScene 中显示 QChart（或 QPolarChart）。

#include <QApplication>
#include <QChartView>
#include <QLineSeries>
#include <QPieSeries>

QT_CHARTS_USE_NAMESPACE

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);

    // 图形视图
    QGraphicsScene scene;
    QGraphicsView view(&scene);
    view.setWindowTitle("Simple chart");
    view.setRenderHint(QPainter::Antialiasing);
    scene.setBackgroundBrush(QBrush(QColor(240, 240, 240)));
    view.setSceneRect(0, 0, 630, 280);

    // 折线图
    // 构建 series，作为折线图的数据源，为其添加 6 个坐标点
    QLineSeries *lineseries = new QLineSeries();
    lineseries->append(0, 5);
    lineseries->append(4, 10);
    lineseries->append(8, 6);
    *lineseries << QPointF(13, 5) << QPointF(17, 6) << QPointF(20, 2);

    QChart *lineChart = new QChart();
    lineChart->legend()->hide();  // 隐藏图例
    lineChart->addSeries(lineseries);  // 将 series 添加至图表中
    lineChart->createDefaultAxes();  // 基于已添加到图表的 series 来创建轴
    lineChart->setTitle("Simple line chart");
    lineChart->setGeometry(10, 10, 300, 260);

    // 饼图
    // 构建 series，作为饼图的数据源，为其添加 4 个切片
    QPieSeries *pieSeries = new QPieSeries();
    pieSeries->append("Java", 40);
    pieSeries->append("C#", 30);
    pieSeries->append("JS", 15);
    QPieSlice *pieSlice = new QPieSlice("Others", 15);
    pieSeries->append(pieSlice);

    QChart *pieChart = new QChart();
    pieChart->addSeries(pieSeries);  // 将 series 添加至图表中
    pieChart->legend()->setAlignment(Qt::AlignRight);  // 设置图例靠右显示
    pieChart->setTitle("Simple pie chart");
    pieChart->setGeometry(320, 10, 300, 260);

    // 将折线图、饼图添加至视图中
    scene.addItem(lineChart);
    scene.addItem(pieChart);
    view.show();

    return a.exec();
}

基本的使用到这里就结束了，其它的一些图表在后面章节再进行分享。

Qt Charts入门指南
2016年08月16日 13:04:08
阅读数：25720

简述

Qt Charts 的横空出世标识着 QWT、QCustomPlot …… 时代的终结，是时候向他们做一个简单的告别了。Qt Charts - 强大并极具吸引力，从现在开始，让我们顺势拥抱灿烂的明天 。

安装配置

Qt5.7 中已经集成了 Qt Charts 模块，关于 Qt 的安装配置，请参考：

安装过程中，新添加的一些模块（例如：Qt Charts）默认不被安装，可以根据需要自行勾选：

这里写图片描述

注意：由于后期需要使用 Qt Charts，请勾选上此模块，否则无法使用。

基本示例

Qt 为 Qt Charts 提供了一系列示例，这是快速学习和掌握 Qt Charts 的方式之一。

打开 Creator，选择：【欢迎】->【示例】，输入“charts”相关的关键字：

这里写图片描述

选择其中一个示例运行，效果如下：

这里写图片描述

效果棒棒哒，美观、简单、直观，而且还支持动画 。。。

入门指南

如果要导入 Qt Charts QML 类型，需要在 .qml 文件中添加下面的导入语句：

import QtCharts 2.0
  • 1

要在应用程序中使用 Qt Charts C++ 类，使用下面的 include 和 using 语句：

#include <QtCharts>

using namespace QtCharts;
  • 1
  • 2
  • 3

这里有更简单的宏定义来代替命名空间的使用：

QT_CHARTS_USE_NAMESPACE
  • 1

找到定义，可以看到其实是一个道理：

#define QT_CHARTS_NAMESPACE QtCharts

#ifdef QT_CHARTS_NAMESPACE
#  define QT_CHARTS_BEGIN_NAMESPACE namespace QT_CHARTS_NAMESPACE {
#  define QT_CHARTS_END_NAMESPACE }
#  define QT_CHARTS_USE_NAMESPACE using namespace QT_CHARTS_NAMESPACE;
#else
#  define QT_CHARTS_BEGIN_NAMESPACE
#  define QT_CHARTS_END_NAMESPACE
#  define QT_CHARTS_USE_NAMESPACE
#endif

注意：从 Qt Creator 3.0 以后，使用 Qt Quick Application 向导创建的项目，基于 Qt Quick 2 模板，默认使用 QGuiApplication。项目中所有此类 QGuiApplication 实例必须更换为 QApplication，模块依赖于 Graphics View 框架的渲染。

要链接到 Qt Charts 模块，需要在 qmake 项目文件中添加：

QT += charts
  • 1

基本用法

要构建图表，可以通过以下两种方式：

  • QChartView + QChart 
    QChartView 作为一个独立的图表窗口，用于显示 QChart，不需要与 QGraphicsScene 一起使用。

  • QGraphicsScene + QChart 
    在现有的 QGraphicsScene 中显示 QChart（或 QPolarChart）。

QChartView + QChart

这里写图片描述

这种方式将 QChartView 作为一个独立的窗口，通过构造函数或者调用 setChart() 就可以为设置 QChart 作为显示的图表，这对于一个图表的单独显示来说非常简单。

#include <QApplication>
#include <QChartView>
#include <QLineSeries>

QT_CHARTS_USE_NAMESPACE

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);

    // 构建 series，作为图表的数据源，为其添加 6 个坐标点
    QLineSeries *series = new QLineSeries();
    series->append(0, 5);
    series->append(4, 10);
    series->append(8, 6);
    *series << QPointF(13, 5) << QPointF(17, 6) << QPointF(20, 2);

    // 构建图表
    QChart *chart = new QChart();
    chart->legend()->hide();  // 隐藏图例
    chart->addSeries(series);  // 将 series 添加至图表中
    chart->createDefaultAxes();  // 基于已添加到图表的 series 来创轴
    chart->setTitle("Simple line chart");  // 设置图表的标题 

    // 构建 QChartView，并设置抗锯齿、标题、大小
    QChartView *chartView = new QChartView(chart);
    chartView->setRenderHint(QPainter::Antialiasing);
    chartView->setWindowTitle("Simple line chart");
    chartView->resize(400, 300);
    chartView->show();

    return a.exec();
}

QGraphicsScene + QChart

这里写图片描述

这种方式不需要使用 QChartView，图表窗口用 QGraphicsView 来代替，在 QGraphicsScene 中显示 QChart（或 QPolarChart）。

#include <QApplication>
#include <QChartView>
#include <QLineSeries>
#include <QPieSeries>

QT_CHARTS_USE_NAMESPACE

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);

    // 图形视图
    QGraphicsScene scene;
    QGraphicsView view(&scene);
    view.setWindowTitle("Simple chart");
    view.setRenderHint(QPainter::Antialiasing);
    scene.setBackgroundBrush(QBrush(QColor(240, 240, 240)));
    view.setSceneRect(0, 0, 630, 280);

    // 折线图
    // 构建 series，作为折线图的数据源，为其添加 6 个坐标点
    QLineSeries *lineseries = new QLineSeries();
    lineseries->append(0, 5);
    lineseries->append(4, 10);
    lineseries->append(8, 6);
    *lineseries << QPointF(13, 5) << QPointF(17, 6) << QPointF(20, 2);

    QChart *lineChart = new QChart();
    lineChart->legend()->hide();  // 隐藏图例
    lineChart->addSeries(lineseries);  // 将 series 添加至图表中
    lineChart->createDefaultAxes();  // 基于已添加到图表的 series 来创建轴
    lineChart->setTitle("Simple line chart");
    lineChart->setGeometry(10, 10, 300, 260);

    // 饼图
    // 构建 series，作为饼图的数据源，为其添加 4 个切片
    QPieSeries *pieSeries = new QPieSeries();
    pieSeries->append("Java", 40);
    pieSeries->append("C#", 30);
    pieSeries->append("JS", 15);
    QPieSlice *pieSlice = new QPieSlice("Others", 15);
    pieSeries->append(pieSlice);

    QChart *pieChart = new QChart();
    pieChart->addSeries(pieSeries);  // 将 series 添加至图表中
    pieChart->legend()->setAlignment(Qt::AlignRight);  // 设置图例靠右显示
    pieChart->setTitle("Simple pie chart");
    pieChart->setGeometry(320, 10, 300, 260);

    // 将折线图、饼图添加至视图中
    scene.addItem(lineChart);
    scene.addItem(pieChart);
    view.show();

    return a.exec();
}

基本的使用到这里就结束了，其它的一些图表在后面章节再进行分享。

Y_Hanxiao
关注
专栏目录
Qt Charts 入门指南
青春不老，奋斗不止！
08-16 4万+
Qt Charts 的横空出世标识着 QWT、QCustomPlot ...... 时代的终结，是时候向他们做一个简单的告别了。Qt Charts - 强大并极具吸引力，从现在开始，让我们顺势拥抱灿烂的明天 。
Qt之QChart各个图表的简单使用（含源码+注释）
热门推荐
lw的博客
07-24 1万+
QChart各个图表的创建 ui中添加/移除动态属性操作 按钮组的使用（按钮组链接槽函数） 信号槽链接
QtChart宏定义出错：QT_CHARTS_USE_NAMESPACE不存在的类型名
最新发布
m0_63564748的博客
08-29 262
教程是Qt5.9, 笔者使用的是Qt6.6，这是Qt6以上的版本会出现的问题，解决方法是用下面的代码代替教程中的QT_CHARTS_USE_NAMESPACE 或者using namespace QtCharts;
(Qt简单曲线图绘制(源码) Qt5.9 Qt Charts)
09-24
此demo是基于 Qt5.9 Qt Charts 绘制的曲线统计图，适用于初学者，下载源码可直接运行;文章里有详细说明(https://blog.csdn.net/weixin_45629870/article/details/108778754)
Qt Charts
x13262608581的博客
10-07 2593
Charts
【嵌入式——QT】QT Charts
weixin_39723539的博客
03-21 1704
嵌入式-QT-QT Charts
技术小新 | QtCharts快速入门
AMOVLAB(阿木实验室)
03-25 4604
一、QtCharts   QtCharts是Qt自带的组件库，其中包含折线、曲线、饼图、棒图、散点图、雷达图等各种常用的图表。而在地面站开发过程中，使用折线图可以对无人机的一些状态数据进行监测，更是可以使用散点图来模拟飞机所在位置，实现平面地图的感觉。   使用Qt Charts绘制，大概可以分为四个部分：数据(QXYSeries)、图表(QChart)、坐标轴(QAbstractAXis)和视图(QChartView)。这里就不一一给大家介绍了，下面给大家说一下Qt
Qt图表绘制（QtCharts）-绘制简单的条形图（4）
mahuifa的博客
04-30 4594
Qt使用QtChart绘制简单的条形图（柱状图），非常简单的入门Demo，基本每一行代码都包含相应的注释说明。
QT Charts入门指南视频精讲
06-11
收看本课程所需具备的基础知识：Qt界面编程的基础知识，比如基本的Qt项目开发，Qt的各种...建议先学习Qt入门的课程。这是一节Qt自带的图表库QTChart的入门课。参考Qt的example，讲解几种常用组件的常用场景及功能开发。
视频教程-QT Charts入门指南视频精讲-C/C++
weixin_31612813的博客
05-28 655
QT Charts入门指南视频精讲 拥有18年C++跨平台软件研发及大型项目...
QtCharts.rar
12-14
配合本人博客Qt开发总结（19）——Qt Charts的例子，包含charttheme和customChart，基本涵盖了涉及的所有Qt chart类型，可作为开发的参考。
Qt编程入门到精通指南
Qt也提供了丰富的第三方模块，如Qt Charts用于图表绘制，Qt Location和Qt Maps用于地理定位和地图展示，Qt WebEngine则允许在应用中嵌入Web内容。 对于想要提升技能的开发者，学习如何利用Qt Designer进行界面设计...
Qt Charts简介
qq_30150579的博客
09-20 1006
Qt Charts简介
Qt QChart 图表库详解及使用
MusicScore的博客
07-08 498
Qt Charts 是 Qt 提供的一个附加模块，用于创建和管理各种类型的图表。丰富的图表类型：折线图、柱状图、饼图、散点图等。高度可定制的样式和布局。支持多轴绘图和实时更新。提供交互功能，如缩放、平移和选择。// 创建第一条折线图数据系列// 创建第二条折线图数据系列// 创建图表对象// 自定义坐标轴// 显示图例// 创建图表视图Qt Charts 是一个功能强大的图表库，适用于各种数据可视化需求。
qtCharts----柱状图、折线图、饼图、曲线图
weixin_61196167的博客
10-09 4931
123
Qt 之 Qt Charts 模块
纯屌丝程序猿
11-08 4609
Qt Charts模块简介 Qt Charts模块提供一组易于使用的图表组件。它使用了Qt的图形视图框架，因此图表可以很容易集成到现代用户界面。Qt 图表可以用作QWidgets，QGraphicsWidget 或者 QML 类型。用户可以通过选择一个图表主题（如柱状图，饼图，折线图等）轻松地创建令人印象深刻的图表。Qt Charts 模块是在Qt5.7才集成进去的，早些时候的版本不支持这个模块
Qt开发总结（19）——Qt Charts
学习雷锋好榜样
12-21 3437
上两篇记录了Qt的基本绘图QPainter和Graphics View绘图架构。还是在Qt4的时代，我用这个QPainter写了一个Plot类，实现了简单的二维曲线动态绘制。后来，我接触到了qwt，一款强大的第三方库Qt图表库，再后来，Qt5官方把Qt Charts和Data Visualization开放在了社区版里，使得我们可以轻松采用这两款官方插件实现二维和三维图表绘制了。接下来的几篇将总结...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值