在 QML 中绘制简单的条形图

Question

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

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

Answer 1

chart.js library for QML available on github. The most popular is probably the one by Julien Wintz 有一些实现。我曾经尝试过，但没有找到一种方法来在 QML canvas 元素内设置与个人 charts/bars 的鼠标交互，而且对于更大的数据集，性能也不是最好的。为了获得最佳解决方案，您必须编写自己的图表库，这应该不会有太多工作（当然取决于您的要求）。

~~如果 Qt 企业版是一个选项，~~ 选择 QtCharts。

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

Answer 2

这些说明适用于 Mac OSX。对于 Windows 或 Linux:

，您必须稍微改变一下

在 Qt/C++ 基于小部件的应用程序中，将 QQuickWidget 添加到您的 MainWindow并将其设置为大约 500x500 大小。不要在该小部件上设置源属性。
在您的 .pro 项目文件中，调整您的 QT 参数以包含 quickwidgets。此外，将以下内容添加到此文件的底部：

mac {
  Resources.files = objects
  Resources.path = Contents/MacOS
  QMAKE_BUNDLE_DATA += Resources
}

在项目文件夹中创建一个 objects 文件夹作为通用容器，当应用程序运行.
在项目文件夹的 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;
}

在您的 mainwindow.cpp 中，在执行 ui->setupUi(this); 行后的某个时间将此添加到您的 main() 函数中：

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 以获取有关如何操作此图表的更多信息。

Answer 3

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

图例可以打开和关闭，只要有值、颜色和图例部分，你可以在里面放任何数据。

Answer 4

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

在 QML 中绘制简单的条形图

Drawing Simple Bar Charts in QML

qt

qml

qtquick2

qquickwidget