在 QML 中绘制简单的条形图

Posted 2023-02-16

【中文标题】在 QML 中绘制简单的条形图

【英文标题】：Drawing Simple Bar Charts in QML

【发布时间】：2015-09-06 03:53:34

【问题描述】：

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

我想这个问题可以追溯到 QML 是如何组成的。

【问题讨论】：

你尝试过编写任何 QML 了吗？

【参考方案1】：

这些说明适用于 Mac OSX。对于 Windows 或 Linux，您必须稍微改变一下：

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

在您的 .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 中，在您执行 ui->setupUi(this); 行之后的某个时间将其添加到您的 main() 函数中：

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

       这将确保您的 QML 文件在部署到生产环境时具有正确的路径（或 调试）。

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

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

【参考方案2】：

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

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

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

【讨论】：

看起来很有希望，但文档真的很差。我不知道如何安装它。

Julien Wintz 的版本已离线。 QtCharts 确实以 GPL BUT NOT LGPL 的形式提供，这是闭源商业软件所需要的。到目前为止，只有 Chart Js 实现 vor v1.0.x 可用，而不是 2.0，遗憾的是

【参考方案3】：

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

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

【参考方案4】：

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