Как создавать диаграммы в QML?
Я хотел бы добавить в свое приложение страницу с не только необработанными рисунками, но и удобными для глаз диаграммами для отображения данных.
Есть ли собственный компонент или сторонний плагин, который я мог бы использовать для создания таких элементов в QML?
Я ищу решение с открытым исходным кодом, которое в идеале будет работать не только на Ubuntu-Touch, но и в настольной системе.
2 ответа
Можно использовать QChart.js - привязка QML для Charts.js (простой HTML5 Диаграммы библиотека JavaScript с помощью элемента холста)
, я разветвился, проект здесь для поддержки изменяют размеры событий (для настольного использования). Я в основном должен сбросить контекст холста для разрешения, изменяют размеры событий для надлежащей перерисовки поверхности с обновленным размером окна (См. http://qt-project.org/forums/viewthread/37313 )
пример QML:
следующий отрывок создает вышеупомянутую страницу круговой диаграммы:
import QtQuick 2.0
import QtQuick.Layouts 1.1
import Ubuntu.Components 0.1
import "."
import "QChart.js" as Charts
MainView {
id: root
width: units.gu(50)
height: units.gu(80)
PageStack {
id: pageStack
Component.onCompleted: push(page0)
Page {
id: page0
title: i18n.tr("Test Results")
ColumnLayout {
spacing: units.gu(2)
anchors.margins: units.gu(2);
anchors.fill: parent
Label {
fontSize: "x-large"
text: "Summary"
}
Chart {
id: chart_pie;
Layout.fillHeight: true
Layout.fillWidth: true
chartAnimated: true;
chartAnimationEasing: Easing.Linear;
chartAnimationDuration: 1000;
chartType: Charts.ChartType.PIE;
chartOptions: {"segmentStrokeColor": "#ECECEC"};
chartData: [
{value: 15, color: "#6AA84F"},
{value: 3, color: "#DC3912"},
{value: 5, color: "#FF9900"}];
}
Column {
id: legend
Row {
spacing: units.gu(1)
Text {
text: "█"
color:"#6AA84F"
}
Text {
text: "15 tests passed"
}
}
Row {
spacing: units.gu(1)
Text {
text: "█"
color:"#DC3912"
}
Text {
text: "3 tests failed"
}
}
Row {
spacing: units.gu(1)
Text {
text: "█"
color:"#FF9900"
}
Text {
text: "5 tests skipped"
}
}
}
Button {
id: button
Layout.fillWidth: true
color: "#009E0F";
text: "Save detailed report";
font.bold: true;
onClicked: {
button.color = "#009E0F"
chart_pie.repaint();
}
}
}
}
}
}
Другое решение - использовать наша привязка, которая очень похожа на то, что предлагал Сильвен. Он работает с Chart.js 2 ... он не идеален, но может быть полезен и для вас: https://github.com/Elypson/ChartJs2QML