在QML中绘制简单的条形图

沃洛米克

将Qt / C ++用于普通的窗口小部件应用程序,以及QQuickWidget使用QML,如何绘制类似于以下内容的简单条形图?

在此处输入图片说明

我想这个问题可以追溯到QML的组成方式。

沃洛米克

这些说明适用于Mac OSX。对于Windows或Linux,您必须对此稍作更改:

  1. 在基于Qt / C ++小部件的应用程序中,将QQuickWidget添加到您的MainWindow中并将其设置为500x500左右。不要在该小部件上设置Source属性。

  2. .pro项目文件中,将QT参数调整quickwidgets另外,将以下内容添加到此文件的底部:

mac {
  Resources.files = objects
  Resources.path = Contents/MacOS
  QMAKE_BUNDLE_DATA += Resources
}
  1. 在项目文件夹内创建一个对象文件夹作为通用容器,该文件夹将在运行应用程序时复制到生产.app文件中。

  2. 项目文件夹中的objects文件夹内,创建一个qml文件夹。

  3. 将文件从该位置下载到该qml文件夹中,并确保解压缩该zip下载文件。

       https://github.com/jwintz/qchart.js

  1. 创建bar.qml在同一文件QML目录。该文件的内容应如下所示:
import QtQuick 2.0

import "."
import "QChart.js"        as Charts
import "QChartGallery.js" as ChartsData

Chart {
  id: chart_bar;
  width: 450;
  height: 450;
  chartAnimated: false;
  chartData: ChartsData.ChartBarData;
  chartType: Charts.ChartType.BAR;
}
  1. 在执行以下操作后的某个时间mainwindow.cpp中将其添加到main()函数中ui->setupUi(this);
QString sQMLPath = QCoreApplication::applicationDirPath().append("/objects/qml/bar.qml");
ui->quickWidget->setSource(QString("file://").append(sQMLPath));

       这将确保QML文件在生产(或调试)中部署时具有正确的路径。

注意:我尝试通过Qt资源(qrc://路径)加载这些QML和JS文件,但它似乎并不正确,并抱怨找不到QChart.qml文件或显示“ QChart is不是类型”。

  1. 运行应用程序时,应该会看到一个条形图。然后,您可以研究chart.js网站,以获取有关如何操作此图表的更多信息。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章