我想在我的应用程序中添加一个页面,它不仅有原始的数字,而且还具有显示数据的友好图表。
我是否可以使用本地组件或第三方插件在QML中创建这样的元素?
我正在寻找一种开源解决方案,理想情况下,它不仅适用于ubuntu触摸,而且也适用于桌面系统。
发布于 2014-10-02 16:54:21
您可以将QChart.js - QML绑定用于Charts.js (使用画布元素的简单HTML5图表javascript库)。
我对项目这里进行了分叉,以支持调整事件大小(供桌面使用)。我基本上需要重置画布上下文,以允许调整大小的事件正确地用更新的窗口大小重新绘制曲面(请参阅http://qt-project.org/forums/viewthread/37313)。
下面的片段创建了上面的饼图页面:
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();
}
}
}
}
}
}
发布于 2020-02-25 15:28:26
另一个解决方案是使用我们的绑定,这非常类似西尔万的建议。适用于Chart.js 2..。这并不完美,但也可能对你有帮助:https://github.com/Elypson/ChartJs2QML
https://askubuntu.com/questions/531472
复制相似问题