qt - 在 QML 中绘制简单的条形图

Question

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

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

Answer 1

这些说明适用于 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
}

在项目文件夹中创建一个 objects 文件夹作为通用容器，该容器将在应用程序运行时复制到生产 .app 文件中。

在项目文件夹的 objects 文件夹内，创建一个 qml 文件夹。

从此位置将文件下载到 qml 文件夹中，并确保解压缩该 zip 下载内容。

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

在同一 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;
}

在您的 ma​​inwindow.cpp 中，将其添加到 main() 中在执行 ui->setupUi(this); 后的某个时间起作用行:

QString sQMLPath = QCoreApplication::applicationDirPath().append("/objects/qml/bar.qml");
ui->quickWidget->setSource(QString("file://").append(sQMLPath));

       这将确保您的 QML 文件在部署到生产环境(或调试)。

Note: I tried loading these QML and JS files via a Qt Resource (qrc:// pathing), but it didn't seem to properly like that and complained either about not finding the QChart.qml file or a message that "QChart is not a type".

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