4

将 Qt/C++ 用于普通的小部件应用程序，以及QQuickWidget使用 QML，我将如何绘制如下所示的简单条形图？

在此处输入图像描述

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

4

4 回答 4

3

这些说明适用于 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. 在项目文件夹中创建一个objects文件夹作为通用容器，在运行应用程序时将其复制到生产 .app 文件中。

  2. 在项目文件夹的对象文件夹中，创建一个qml文件夹。

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

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

  1. 在同一个qml目录中创建一个bar.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:// pathing) 加载这些 QML 和 JS 文件，但它似乎并不像那样，并且抱怨找不到 QChart.qml 文件或“QChart is不是类型”。

  1. 当您运行您的应用程序时，您应该会看到一个条形图。然后，您可以研究chart.js 网站以获取有关如何操作此图表的更多信息。
于 2015-09-09T06:14:50.520 回答
1

github上有一些用于 QML的chart.js库的实现。最受欢迎的可能是 Julien Wintz 的作品。我曾经尝试过，但没有找到一种方法来设置鼠标与 QML 画布元素内的单个图表/条的交互，而且对于更大的数据集，性能也不是最好的。为了获得最佳解决方案，您必须编写自己的图表库，这不应该是太多的工作（当然取决于您的要求）。

如果可以选择 Qt 企业版，请使用QtCharts。

更新：自 Qt 5.7 起，Qt Charts 将作为 Qt 的一部分提供 GPL 许可：https ://blog.qt.io/blog/2016/06/16/qt-5-7-released/

于 2015-09-06T09:16:45.243 回答
1

试试：https ://gist.github.com/paulbendixen/f14cd848a3f89a38ef37

图例可以打开和关闭，您可以在其中放入任何数据，只要它具有值、颜色和图例部分。

于 2016-03-25T19:42:36.357 回答
0

您还可以使用集成了 JS 库的库来进行绘图。我们已经开发了这个 MIT 许可版本，您可以将它与 GPL、LGPL 或闭源项目一起使用。也许，这对你来说也很有趣：https ://github.com/Elypson/ChartJs2QML

于 2020-02-28T19:33:37.437 回答