Рисование простых гистограмм в QML

Использование Qt/C++ для обычного приложения-виджета и QQuickWidget с QML, как бы я нарисовал простую гистограмму, как показано ниже?

введите описание изображения здесь

Я думаю, этот вопрос восходит к тому, как будет составлен QML.

Источник

3 ответа

Решение

Эти инструкции предназначены для Mac OSX. Вам придется немного изменить это для Windows или Linux:

  1. В приложении на основе виджетов Qt/C++ добавьте QQuickWidget в главное окно и установите его размер около 500x500. Не устанавливайте свойство Source для этого виджета.

  2. В файле проекта .pro настройте QT параметр для включения quickwidgets, Также добавьте следующее в конец этого файла:

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

  1. Создайте папку объектов внутри папки вашего проекта как контейнер общего назначения, который будет скопирован в производственный.app-файл при запуске приложения.

  2. Внутри этой папки объектов в папке вашего проекта создайте папку qml.

  3. Загрузите файлы из этого места в эту папку qml и обязательно разархивируйте этот zip-файл.

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

  1. Создайте файл 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;
}
  1. В вашем mainwindow.cpp добавьте это в ваш main() функционировать через некоторое время после того, как вы делаете ui->setupUi(this); линия:
QString sQMLPath = QCoreApplication::applicationDirPath().append("/objects/qml/bar.qml");
ui->quickWidget->setSource(QString("file://").append(sQMLPath));

Это обеспечит правильность пути к файлу QML при его развертывании в рабочей среде (или отладке).

Примечание: я пытался загрузить эти файлы QML и JS через Qt Resource (qrc:// pathing), но, похоже, это не совсем так, и пожаловался либо на то, что не нашел файл QChart.qml, либо на сообщение "QChart is не тип ".

  1. Когда вы запустите свое приложение, вы должны увидеть гистограмму. Затем вы можете изучить веб-сайт chart.js для получения дополнительной информации о том, как управлять этим графиком.
Источник

На github есть несколько реализаций библиотеки chart.js для QML. Самым популярным, вероятно, является тот, который Жюльен Винц. Однажды я попробовал это, но не нашел способа настроить взаимодействие мыши с отдельными графиками / гистограммами внутри элемента холста QML, а также производительность была не самой лучшей для больших наборов данных. Для лучшего решения вам нужно написать свою собственную библиотеку диаграмм, которая не должна быть слишком сложной (конечно, в зависимости от ваших требований).

Если Qt Enterprise Edition является опцией, используйте QtCharts.

Обновление: Начиная с Qt 5.7, Qt Charts будут доступны как часть Qt с лицензией GPL: https://blog.qt.io/blog/2016/06/16/qt-5-7-released/

Источник

Или вы можете просто сесть и написать это.

Я прочитал ваш вопрос перед поездкой в ​​Нидерланды (я не занимался вождением), и вы можете найти результат на https://gist.github.com/paulbendixen/f14cd848a3f89a38ef37

Легенда может быть включена и выключена, и вы можете помещать в нее любые данные, если они имеют значение, цвет и части легенды.

Это достаточно хорошо?

Источник

Вы также можете использовать библиотеку, которая объединяет библиотеку JS для рисования. Мы работали над этой версией лицензии MIT, которую вы можете использовать с GPL, LGPL или проектом с закрытым исходным кодом. Возможно, вам тоже интересно: https://github.com/Elypson/ChartJs2QML

Источник
Другие вопросы по тегам