Qt Charts QML下的图形绘制方法

最新推荐文章于 2025-10-06 09:47:59 发布

原创

最新推荐文章于 2025-10-06 09:47:59 发布 · 7.9k 阅读

44 ·

CC 4.0 BY-SA版权

文章标签：

#qt #qml

这篇博客介绍了如何使用QtCharts库在QML中创建静态和动态的曲线图及散点图。首先，通过在项目文件和源代码中添加必要的配置引入QtCharts库。接着，展示了如何绘制静态的曲线图，包括在QML中导入必要的模块和定义ChartView组件。然后，讲解了动态绘制曲线图和散点图的方法，通过JavaScript操作QML对象属性实现。最后，提到了确定QML对象属性可被JS调用的途径，并给出了属性赋值格式的示例。

目录

一、参考

二、简介

三、静态绘制曲线图

四、动态绘制曲线图和散点图

五、如何确定哪些QML对象属性可以被JS调用

六、如何确定某些QML属性赋值的格式

一、参考

https://doc.qt.io/qt-5/qtcharts-index.html

二、简介

Qt Charts 提供了一系列使用图表功能的简单方法。它使用Qt Graphics View Framework 图形视图框架，因此可以很容易集成到用户界面。可以使用Qt Charts作为QWidgets, QGraphicsWidget, 或者 QML类型。

使用Qt Charts时：需要在.pro文件中添加 QT += charts。
① 当把Qt Charts作为QML类型时，需要在qml文件中

import QtCharts 2.3

② 当把Qt Charts作为C++类时，需要在cpp/h文件中

 #include <QtCharts>
 using namespace QtCharts;

Qt Charts提供了如下图表类型：

① 折线图和曲线图
② 面积图和散点图
③ 柱状图
④ 饼状图
⑤ 箱形图
⑥ 蜡烛图
⑦ 极坐标图

三、静态绘制曲线图

创建 Qt Quick Application - Empty项目。

① pro文件：

QT += quick

CONFIG += c++11
QT += charts

# The following define makes your compiler emit warnings if you use
# any Qt feature that has been marked deprecated (the exact warnings
# depend on your compiler). Refer to the documentation for the
# deprecated API to know how to port your code away from it.
DEFINES += QT_DEPRECATED_WARNINGS

# You can also make your code fail to compile if it uses deprecated APIs.
# In order to do so, uncomment the following line.
# You can also select to disable deprecated APIs only up to a certain version of Qt.
#DEFINES += QT_DISABLE_DEPRECATED_BEFORE=0x060000    # disables all the APIs deprecated before Qt 6.0.0

SOURCES += \
        main.cpp

RESOURCES += qml.qrc

# Additional import path used to resolve QML modules in Qt Creator's code model
QML_IMPORT_PATH =

# Additional import path used to resolve QML modules just for Qt Quick Designer
QML_DESIGNER_IMPORT_PATH =

# Default rules for deployment.
qnx: target.path = /tmp/$${
   
   TARGET}/bin
else: unix:!android: target.path = /opt/$${
   
   TARGET}/bin
!isEmpty(target.path): INSTALLS += target