Прокручиваемые QML-диаграммы
Я использую QT Charts Чтобы отобразить данные на пользовательском интерфейсе, мой график будет в режиме реального времени, а оси X и Y будут последовательно увеличиваться, для этого мне нужно связать scrollBar на графиках. Как ChartView не имеет встроенного scrollbar как в FlickableМне интересно, как это сделать в QML, следующий код:
import QtQuick 2.6
import QtQuick.Window 2.2
import QtCharts 2.0
import QtQuick.Controls 2.2
Window {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
ChartView {
id:chartview
width: 400
height: 300
antialiasing: true
LineSeries {
name: "LineSeries"
axisX: valueAxis
XYPoint { x: 0; y: 0.0 }
XYPoint { x: 1.1; y: 3.2 }
XYPoint { x: 1.9; y: 2.4 }
XYPoint { x: 2.1; y: 2.1 }
XYPoint { x: 2.9; y: 2.6 }
XYPoint { x: 3.4; y: 2.3 }
XYPoint { x: 200.1; y: 3.1 }
}
ValueAxis {
id: valueAxis
min: 0
max: 20
tickCount: 12
labelFormat: "%.0f"
}
}
ScrollBar{
id:sBarHor
visible:true
width: chartview.width
height:30
anchors.top:chartview.bottom
orientation: Qt.Horizontal
contentItem: Rectangle {
implicitHeight: 50
color:"green"
}
background: Rectangle{
color:"red"
}
onPositionChanged: {
//How to move the chart
}
}
}
Я также обнаружил, что есть
ScrollDown,ScrollRightи т.д. функции для ChartView, но я не понимаю, как интегрировать их с scrollBar.Есть ли альтернатива для построения данных в QML без использования
QT Charts?
Пожалуйста, предложите мне использовать QT 5.9.1.
2 ответа
Решение
A) ScrollView
import QtQuick 2.6
import QtQuick.Window 2.2
import QtQuick.Controls 2.2
import QtCharts 2.0
Window {
id: window
width: 640
height: 480
visible: true
ScrollView {
id: scrollview
anchors.fill: parent
contentWidth: chartview.width
contentHeight: chartview.height
ChartView {
id: chartview
width: 1024
height: 960
LineSeries {
name: "LineSeries"
axisX: ValueAxis {
min: 0
max: 20
tickCount: 12
labelFormat: "%.0f"
}
XYPoint { x: 0; y: 0.0 }
XYPoint { x: 1.1; y: 3.2 }
XYPoint { x: 1.9; y: 2.4 }
XYPoint { x: 2.1; y: 2.1 }
XYPoint { x: 2.9; y: 2.6 }
XYPoint { x: 3.4; y: 2.3 }
XYPoint { x: 200.1; y: 3.1 }
}
}
}
}
Б) Полоса прокрутки
import QtQuick 2.6
import QtQuick.Window 2.2
import QtQuick.Controls 2.2
import QtCharts 2.0
Window {
id: window
width: 640
height: 480
visible: true
ChartView {
id: chartview
x: -hbar.position * width
width: parent.width * 2
height: parent.height
LineSeries {
name: "LineSeries"
axisX: ValueAxis {
min: 0
max: 20
tickCount: 12
labelFormat: "%.0f"
}
XYPoint { x: 0; y: 0.0 }
XYPoint { x: 1.1; y: 3.2 }
XYPoint { x: 1.9; y: 2.4 }
XYPoint { x: 2.1; y: 2.1 }
XYPoint { x: 2.9; y: 2.6 }
XYPoint { x: 3.4; y: 2.3 }
XYPoint { x: 200.1; y: 3.1 }
}
}
ScrollBar {
id: hbar
hoverEnabled: true
active: hovered || pressed
orientation: Qt.Horizontal
size: window.width / chartview.width
anchors.left: parent.left
anchors.right: parent.right
anchors.bottom: parent.bottom
}
}
Ответ@jpnurmi очень помог расширить код для использования Flickable так что я могу использовать scrollbar а также flick:
Window {
id: window
width: 640
height: 480
visible: true
Flickable{
id:flick
width : parent.width
height : 300
contentHeight: chartview.height
contentWidth: chartview.width
ChartView {
id: chartview
width: window.width * 2
height: 300
LineSeries {
name: "LineSeries"
axisX: ValueAxis {
min: 0
//max: 200
tickCount: 12
labelFormat: "%.0f"
}
XYPoint { x: 0; y: 0.0 }
XYPoint { x: 1.1; y: 3.2 }
XYPoint { x: 1.9; y: 2.4 }
XYPoint { x: 2.1; y: 2.1 }
XYPoint { x: 2.9; y: 2.6 }
XYPoint { x: 3.4; y: 2.3 }
XYPoint { x: 200.1; y: 3.1 }
}
}
ScrollBar.horizontal: ScrollBar {
id: hbar
hoverEnabled: true
active: hovered || pressed
orientation: Qt.Horizontal
}
}
}
import QtQuick 2.0
import QtQuick.Controls 1.0
import QtQuick 2.0
import QtQuick.Window 2.1
import QtQuick.Layouts 1.3
import QtQuick.Controls 2.1
import QtQuick 2.12
import QtQuick.Controls 2.13
ApplicationWindow {
id: applicationWindow
visible: true;
property string wifiname:""
header: ToolBar {
id: toolbar1
RowLayout {
anchors.fill: parent
ToolButton {
Image {
id: image1
fillMode: Image.PreserveAspectFit
source: "qrc:/png/menu.png"
anchors.fill: parent
anchors.margins: 8
}
onClicked: stack.pop()
}
Label {
text: "Add New Home"
font.bold: true
// font.pointSize: 20
elide: Label.ElideRight
horizontalAlignment: Qt.AlignHCenter
verticalAlignment: Qt.AlignVCenter
Layout.fillWidth: true
}
ToolButton {
id: toolButton1
Image {
id: image9
anchors.top: parent.top
anchors.topMargin: 8
anchors.bottom: parent.bottom
anchors.bottomMargin: 8
anchors.left: parent.left
anchors.leftMargin: 8
anchors.right: parent.right
anchors.rightMargin: 8
fillMode: Image.PreserveAspectFit
source: "qrc:/png/swap.png"
anchors.margins: 8
}
onClicked: menu.open()
}
ToolButton {
Image {
id: image2
fillMode: Image.PreserveAspectFit
source: "qrc:/png/ask.png"
anchors.fill: parent
anchors.margins: 8
}
onClicked: menu.open()
}
}
}
ColumnLayout{
id: mainl
anchors.fill: parent
ColumnLayout {
id:column1
spacing: 20
anchors.left: parent.left
anchors.right: parent.right
Label{
id: label1
text: "Name"
anchors.left: parent.left
anchors.right: parent.right
anchors.leftMargin: 40
anchors.rightMargin: 40
font.bold: true
}
TextField {
id:usernameText1;
placeholderText: "Enter Your Name Here";
anchors.left: parent.left
anchors.right: parent.right
anchors.leftMargin: 40
anchors.rightMargin: 40
anchors.top:label1.bottom
anchors.topMargin:10
}
Label{
id: label2
text: "Location"
anchors.left: parent.left
anchors.right: parent.right
anchors.leftMargin: 40
anchors.rightMargin: 40
font.bold: true
}
TextField {
id:passwordText2;
placeholderText: "Enter Your Location";
anchors.left: parent.left
anchors.right: parent.right
anchors.leftMargin: 40
anchors.rightMargin: 40
anchors.top:label2.bottom
anchors.topMargin:10
}
}
ColumnLayout
{
id:column234
width: parent.width
anchors.top: column1.bottom
anchors.topMargin: 20
// anchors.left: applicationWindow.left
// anchors.leftMargin: 40
// anchors.rightMargin: 40
// anchors.right: applicationWindow.right
Label{
Text {
id: name
text: qsTr("Add Wi-Fi")
anchors.left: parent.left
anchors.leftMargin: 40
font.bold: true
}
}
RowLayout{
id: brlayout11111
anchors.left: parent.left
anchors.leftMargin: 40
anchors.right: applicationWindow.right
anchors.rightMargin: 40
spacing: 20
Image {
id:bluetoothIcon
width: 30
height: 30
fillMode: Image.PreserveAspectFit
Layout.fillHeight: false
Layout.alignment: Qt.AlignLeft
source: "qrc:/png/wifi.png"
}
Label {
id: turnOnBluthoothText2
text: qsTr("Turn on the Wi-Fi")
color: "#9E9E9E"
Layout.fillHeight: false
Layout.alignment: Qt.AlignLeft
//Layout.preferredWidth: 200
//anchors.left: bluetoothIcon.right
//anchors.leftMargin: 40
//font.pointSize: 15
}
Button{
id:onButton
text: qsTr("On")
Layout.fillHeight: false
Layout.alignment: Qt.AlignLeft
anchors.right: parent.right
anchors.rightMargin: 80
contentItem: Text {
text: onButton.text
font: onButton.font
opacity: enabled ? 1.0 : 0.3
color: onButton.down ? "light gray" : "black"
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
elide: Text.ElideRight
}
background: Rectangle {
implicitWidth: 100
implicitHeight: 40
opacity: enabled ? 1 : 0.3
border.color: onButton.down ? "light gray" : "gray"
border.width: 1
radius: 5
}
onClicked: {
busyIndicator.running = false
console.log("in onclicked of Wi-Fi On Button")
signalFromWiFi("1121","","","")
}
}
Item {
Layout.fillWidth: true
}
}
}
ColumnLayout{
id:column2
anchors.top: column234.bottom
anchors.topMargin: 40
anchors.left: parent.left
anchors.right: parent.right
anchors.leftMargin: 40
anchors.rightMargin : 40
Label {
id: turnOnBluthoothText1
text: qsTr("Select Wi-Fi from List")
color: "Black"
font.bold: true
}
ListView {
id: listview
height: screen.height/6
//anchors.top: lablelist.bottom
//anchors.bottom: toolBar2.top
//anchors.bottomMargin: applicationWindow.height/4
//anchors.topMargin: 20
anchors.left: parent.left
anchors.right: parent.right
flickableDirection: Flickable.VerticalFlick
boundsBehavior: Flickable.VerticalFlick
focus: true
clip: true
ScrollBar.vertical: ScrollBar {}
model: listmodel
highlight: highlightBar
delegate: Item {
//width: 400; height: 20
//Text { text: name }
width:applicationWindow.width
height: applicationWindow.height/15
Column{
width: parent.width
height: parent.height
spacing: 5
Rectangle {
id: rectangleac
color: "white"
Text {
visible: true
id: text2
anchors.top: parent.top
anchors.topMargin: (applicationWindow.height/15) / 3
anchors.left: parent.left
anchors.leftMargin: (applicationWindow.height/15) / 5
//anchors.bottom: parent.bottom
//anchors.centerIn: parent
//anchors.horizontalCenter: horizontalCenter
text: wifiName
//font.pointSize: 20
font.bold: true
font.family: "Arial"
}
}
}
MouseArea {
id: mArea
anchors.fill: parent
onClicked: {
wifiname = text2.text
listview.currentIndex = index;
popup.open()
}
}
}
}
Component {
id: highlightBar
Rectangle {
width: parent.width;
height: applicationWindow.height/15
color: "light gray"
}
}
ListModel {
id: listmodel
}
Component.onCompleted: {
for(var i = 0; i < 100; i++) {
listmodel.append({ wifiName: "REPL- : " + i});
}
}
}
ColumnLayout{
id:colmn222
anchors.left: applicationWindow.left
anchors.right:applicationWindow.right
anchors.top: column2.bottom
anchors.topMargin: 40
Label{
id:labelone
text: "To Add Wi-Fi:"
anchors.top: listview.bottom
anchors.topMargin: 40
anchors.left: parent.left
anchors.leftMargin: 40
font.bold: true
}
TextArea{
id:textarea
text: "• Now Go Settings and turn on Wi-Fi\n• Select the Wi-Fi from list and enter password\n• Tap on save."
anchors.top: labelone.bottom
anchors.left: parent.left
anchors.leftMargin: 30
//anchors.right: parent.right
//anchors.rightMargin: 40
readOnly: true
wrapMode: TextArea.Wrap
}
}
Button{
id:donebutton
text: qsTr("Save")
enabled: false
//anchors.left: applicationWindow.left
//anchors.leftMargin: applicationWindow.width/3
anchors.horizontalCenter: parent.horizontalCenter
anchors.bottom: parent.bottom
anchors.bottomMargin: 10
contentItem: Text {
text: donebutton.text
font: donebutton.font
opacity: enabled ? 1.0 : 0.3
color: donebutton.down ? "light gray" : "black"
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
elide: Text.ElideRight
}
background: Rectangle {
implicitWidth: 100
implicitHeight: 40
opacity: enabled ? 1 : 0.3
border.color: donebutton.down ? "light gray" : "gray"
border.width: 1
radius: 5
}
onClicked: {
console.log(" save Button clcked ")
console.log("height ,width of save button::",donebutton.height,donebutton.width)
signalFromWiFi("1122", wifiname, wifiPasswordTf.text,"")
signalFromQmlToUiman("11222",homeNametextfield.text,locationtext.text,wifiPasswordTf.text,"","")
wifiPasswordTf.clear();
}
}
}
footer: ToolBar {
id: toolBar2
height :toolBarFooterHeight
RowLayout {
anchors.fill: parent
Layout.fillWidth: true
ToolButton {
height: 500
Image {
id: image3
fillMode: Image.PreserveAspectFit
source: "qrc:/png/hills.png"
anchors.fill: parent
anchors.margins: 8
}
Layout.fillWidth: true
onClicked: {
console.log("btn1 clicked")
var arr=["light1","light2"]
myfunction(2,arr)
}
}
ToolButton {
Image {
id: image4
fillMode: Image.PreserveAspectFit
source: "qrc:/png/car.png"
anchors.fill: parent
anchors.margins: 8
}
Layout.fillWidth: true
onClicked: {
console.log("btn2 clicked")
var arr=["light1","light2","light3","light4"]
//myfunction(4,arr)
}
}
ToolButton {
Image {
id: image5
fillMode: Image.PreserveAspectFit
source: "qrc:/png/home.png"
anchors.fill: parent
anchors.margins: 8
}
Layout.fillWidth: true
onClicked: {
console.log("btn3 clicked")
}
}
ToolButton {
id: toolButton6
Image {
id: image6
fillMode: Image.PreserveAspectFit
source: "qrc:/png/gridview.png"
anchors.fill: parent
anchors.margins: 8
}
Layout.fillWidth: true
onClicked: {
console.log("btn4 clicked")
}
}
ToolButton {
id: toolButton7
Image {
id: image7
fillMode: Image.PreserveAspectFit
source: "qrc:/png/settings.png"
anchors.fill: parent
anchors.margins: 8
}
Layout.fillWidth: true
onClicked: {
console.log("btn5 clicked")
}
}
}
}
}
не может сделать этот экран прокручиваемым