在QML中绘制简单条形图

对于常规窗口小部件应用程序使用Qt/C++，使用QML使用QQuickWidget，如何绘制如下的简单条形图？在QML中绘制简单条形图

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

2015-09-06 Volomike

您是否试过编写任何QML？ – Mitch

这些说明适用于Mac OSX。您将有轻微变化本作的Windows或Linux：

在一个Qt/C++基于工具的应用，添加QQuickWidget您主窗口并将其设置为500×500左右大小。不要在该小部件上设置Source属性。
在您的.pro项目文件中，将您的QT参数调整为包括quickwidgets。此外，以下内容添加到该文件的底部：

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

作为一种通用集装箱，将获得创建对象的项目文件夹内文件夹在应用程序运行时拷贝到生产.app文件。

里面在你的项目文件夹对象文件夹中创建QML文件夹。

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

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

创建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; 
}

在你mainwindow.cpp，在你的main()功能添加该你做的ui->setupUi(this);线之后的某个时间：

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

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

注：我尝试通过加载一个Qt资源QML这些和JS文件（QRC：//寻路），但它似乎没有正确这样的抱怨或者约没有找到QChart.qml文件或“QChart不是一种类型”的消息。

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

来源

2015-09-09 06:14:50 Volomike

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

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

更新：由于Qt的5.7，Qt的图表将作为Qt的与GPL许可证的一部分：https://blog.qt.io/blog/2016/06/16/qt-5-7-released/

来源

2015-09-06 09:16:45 qCring

看起来很有希望，但文档非常差。我不知道如何安装。 – Volomike

我终于搞定了：https：//github.com/jwintz/qchart.js/issues/12 – Volomike

或者你可以坐下来写下来。

我开车到荷兰（我没有做驱动），前阅读你的问题，你可以找到在https://gist.github.com/paulbendixen/f14cd848a3f89a38ef37

结果图例可以打开和关闭，你可以把任何数据，它只要它具有价值，颜色和图例部分。

这够好吗？

来源

2016-03-25 19:42:36 Paul

在QML中绘制简单条形图

回答

相关问题