QML PieSeries 自定义模型与自定义数据

huangapple
go评论102阅读模式
英文:

QML PieSeries custom model with custom data

问题

我想加载一些自定义数据（不仅仅是标签和大小，还有其他我需要的内容）。比如说，我想要从模型中加载每个切片的颜色。如何访问“第三列”值 - “黑色”或“白色”，并让 QML 使用它？
这是我有的代码：

main.py:

  1. import sys
  2. from PyQt5 import QtCore, QtWidgets, QtQuick
  3. import custom_model
  5. if __name__ == '__main__':
  6.     app = QtWidgets.QApplication(sys.argv)
  8.     view = QtQuick.QQuickView()
  10.     outer_ring_model = custom_model.OuterRingModel()
  12.     view.rootContext().setContextProperty('outerRingModel', outer_ring_model)
  14.     view.setSource(QtCore.QUrl("main.qml"))
  15.     view.show()
  17.     sys.exit(app.exec_())

custom_model.py:

  1. from PyQt5 import QtCore
  3. class OuterRingModel(QtCore.QAbstractTableModel):
  5.     def __init__(self, parent=None):
  6.         super().__init__(parent)
  8.         self.column_count = 2
  9.         self.row_count = 100
  10.         self.data = []
  12.         i = 0
  13.         while i < (self.row_count / 2):
  14.             self.data.append(['Black', 50, 'black'])
  15.             self.data.append(['White', 50, 'white'])
  16.             i += 1
  18.     def rowCount(self, parent):
  19.         return len(self.data)
  21.     def columnCount(self, parent):
  22.         return self.column_count
  24.     def data(self, index, role):
  25.         if role == QtCore.Qt.DisplayRole:
  26.             return self.data[index.row()][index.column()]
  27.         elif role == QtCore.Qt.EditRole:
  28.             return self.data[index.row()][index.column()]
  29.         elif role == QtCore.Qt.BackgroundRole:
  30.             return QtGui.QColor(QtCore.Qt.white)
  31.         return QtCore.QVariant()

main.qml:

  1. import QtQuick 2.7
  2. import QtQuick.Window 2.0
  3. import QtQuick.Controls 1.4
  4. import QtCharts 2.1
  6. Grid {
  7.     id: grid1
  8.     width: 1024
  9.     height: 600
  10.     spacing: 10
  11.     rows: 1
  12.     columns: 2
  14.     Component.onCompleted: { update() }
  16.     ChartView {
  17.         id: chart
  18.         width: 600
  19.         height: 600
  20.         antialiasing: true
  21.         animationDuration: 1000
  22.         animationOptions: ChartView.AllAnimations
  23.         title: "MyTitle"
  24.         legend.visible: false
  26.         PieSeries {
  27.             id: serie0
  28.             name: "Outer Ring"
  29.             size: 0.75
  30.             holeSize: 0.7
  31.             onSliceAdded: {
  32.                 slice.color = Qt.lighter("red", 1.5)
  33.                 // slice.color = 如何在此处导入模型数据
  34.             }
  36.             VPieModelMapper {
  37.                 id: model0
  38.                 model: outerRingModel
  39.                 labelsColumn: 0
  40.                 valuesColumn: 1
  41.                 firstRow: 0
  42.                 rowCount: 100
  43.             }
  44.         }
  45.     }
  46. }
英文:

I want to load some custom data (not Just label and size, but something else I need too). Let say - I want to load every slice's color out of the model too. How can I access the "third column" value - "black" or "white" and make QML to use it?
This is the code I have:

main.py:

  1. import sys
  2. from PyQt5 import QtCore, QtWidgets, QtQuick
  3. import custom_model
  5. if __name__ == &#39;__main__&#39;:
  6.     app = QtWidgets.QApplication( sys.argv )
  8.     view = QtQuick.QQuickView()
  10.     outer_ring_model = custom_model.OuterRingModel()
  12.     view.rootContext().setContextProperty( &#39;outerRingModel&#39;, outer_ring_model )
  14.     view.setSource( QtCore.QUrl( &quot;main.qml&quot; ) )
  15.     view.show()
  17.     sys.exit( app.exec_() )

custom_model.py:

  1. from PyQt5 import QtCore
  3. class OuterRingModel( QtCore.QAbstractTableModel ):
  5.     def __init__( self, parent=None ):
  6.         super().__init__( parent )
  8.         self.column_count = 2
  9.         self.row_count = 100
  10.         self.data = []
  12.         i = 0
  13.         while i &lt; (self.row_count / 2):
  14.             self.data.append([&#39;Black&#39;, 50, &#39;black&#39;])
  15.             self.data.append([&#39;White&#39;, 50, &#39;white&#39;])
  16.             i += 1
  18.     def rowCount( self, parent ):
  19.         return len( self.data )
  21.     def columnCount( self, parent ):
  22.         return self.column_count
  24.     def data( self, index, role ):
  25.         if role == QtCore.Qt.DisplayRole:
  26.             return self.data[ index.row() ][ index.column() ]
  27.         elif role == QtCore.Qt.EditRole:
  28.             return self.data[ index.row() ][ index.column() ]
  29.         elif role == QtCore.Qt.BackgroundRole:
  30.             return QtGui.QColor( QtCore.Qt.white )
  31.         return QtCore.QVariant()

main.qml:

  1. import QtQuick 2.7
  2. import QtQuick.Window 2.0
  3. import QtQuick.Controls 1.4
  4. import QtCharts 2.1
  6. Grid {
  7.     id: grid1
  8.     width: 1024
  9.     height: 600
  10.     spacing: 10
  11.     rows: 1
  12.     columns: 2
  14.     Component.onCompleted: { update() }
  16.     ChartView {
  17.         id: chart
  18.         width: 600
  19.         height: 600
  20.         antialiasing: true
  21.         animationDuration: 1000
  22.         animationOptions: ChartView.AllAnimations
  23.         title: &quot;MyTitle&quot;
  24.         legend.visible: false
  26.         PieSeries {
  27.             id: serie0
  28.             name: &quot;Outer Ring&quot;
  29.             size: 0.75
  30.             holeSize: 0.7
  31.             onSliceAdded: {
  32.                 slice.color = Qt.lighter(&quot;red&quot;, 1.5)
  33.                 // slice.color = HOW_TO_IMPORT_MODEL_DATA_HERE
  34.             }
  36.             VPieModelMapper {
  37.                 id: model0
  38.                 model: outerRingModel
  39.                 labelsColumn: 0
  40.                 valuesColumn: 1
  41.                 firstRow: 0
  42.                 rowCount: 100
  43.             }
  44.         }
  45.     }
  46. }

答案1

得分: 2

以下是您要翻译的代码部分：

  1. What you require cannot be implemented in QML since you cannot know the index associated with the slice so you will have to implement that logic in Python/C++. In addition, your model has errors that I have already corrected.
  3. **main.py**
  4. ```python
  5. import os
  6. import sys
  8. from PyQt5 import QtCore, QtGui, QtWidgets, QtQuick, QtChart
  10. import custom_model
  13. class Manager(QtCore.QObject):
  14.     @QtCore.pyqtSlot(
  15.         QtChart.QPieSeries, QtChart.QPieSlice, QtCore.QAbstractItemModel, int
  16.     )
  17.     def updateSlice(self, serie, sl, model, firstRow):
  18.         row = firstRow + serie.slices().index(sl)
  19.         index = model.index(row, 2)
  20.         color = model.data(index) or &quot;&quot;
  21.         sl.setColor(QtGui.QColor(color))
  24. if __name__ == &quot;__main__&quot;:
  25.     app = QtWidgets.QApplication(sys.argv)
  27.     view = QtQuick.QQuickView()
  29.     manager = Manager()
  30.     outer_ring_model = custom_model.OuterRingModel()
  32.     view.rootContext().setContextProperty(&quot;manager&quot;, manager)
  33.     view.rootContext().setContextProperty(&quot;outerRingModel&quot;, outer_ring_model)
  35.     filename = os.path.join(os.path.dirname(os.path.realpath(__file__)), &quot;main.qml&quot;)
  37.     view.setSource(QtCore.QUrl.fromLocalFile(filename))
  38.     view.show()
  40.     sys.exit(app.exec_())

custom_model.py

  1. from PyQt5 import QtCore
  4. class OuterRingModel(QtCore.QAbstractTableModel):
  5.     def __init__(self, parent=None):
  6.         super().__init__(parent)
  8.         self.column_count = 3
  9.         self._data = []
  11.         for i in range(50):
  12.             self._data.append([&quot;Black&quot;, 50, &quot;black&quot;])
  13.             self._data.append([&quot;White&quot;, 50, &quot;white&quot;])
  15.     def rowCount(self, parent):
  16.         return len(self._data)
  18.     def columnCount(self, parent):
  19.         return self.column_count
  21.     def data(self, index, role=QtCore.Qt.DisplayRole):
  22.         if role in (QtCore.Qt.DisplayRole, QtCore.Qt.EditRole,):
  23.             return self._data[index.row()][index.column()]

main.qml

  1. import QtQuick 2.7
  2. import QtQuick.Window 2.0
  3. import QtQuick.Controls 1.4
  4. import QtCharts 2.1
  6. Grid {
  7.     id: grid1
  8.     width: 1024
  9.     height: 600
  10.     spacing: 10
  11.     rows: 1
  12.     columns: 2
  14.     VPieModelMapper {
  15.         id: mapper0
  16.         model: outerRingModel
  17.         series: serie0
  18.         labelsColumn: 0
  19.         valuesColumn: 1
  20.         firstRow: 0
  21.         rowCount: 100
  22.     }
  24.     ChartView {
  25.         id: chart
  26.         width: 600
  27.         height: 600
  28.         antialiasing: true
  29.         animationDuration: 1000
  30.         animationOptions: ChartView.AllAnimations
  31.         title: &quot;MyTitle&quot;
  32.         legend.visible: false
  34.         PieSeries {
  35.             id: serie0
  36.             name: &quot;Outer Ring&quot;
  37.             size: 0.75
  38.             holeSize: 0.7
  39.             onSliceAdded: {
  40.                 manager.updateSlice(mapper0.series, slice, mapper0.model, mapper0.firstRow)
  41.             }   
  42.         }
  43.     }
  44. }

QML PieSeries 自定义模型与自定义数据

  2. <details>
  3. <summary>英文:</summary>
  5. What you require cannot be implemented in QML since you cannot know the index associated with the slice so you will have to implement that logic in Python/C++. In addition, your model has errors that I have already corrected.
  7. **main.py**
  8. ```python
  9. import os
  10. import sys
  12. from PyQt5 import QtCore, QtGui, QtWidgets, QtQuick, QtChart
  14. import custom_model
  17. class Manager(QtCore.QObject):
  18.     @QtCore.pyqtSlot(
  19.         QtChart.QPieSeries, QtChart.QPieSlice, QtCore.QAbstractItemModel, int
  20.     )
  21.     def updateSlice(self, serie, sl, model, firstRow):
  22.         row = firstRow + serie.slices().index(sl)
  23.         index = model.index(row, 2)
  24.         color = model.data(index) or &quot;&quot;
  25.         sl.setColor(QtGui.QColor(color))
  28. if __name__ == &quot;__main__&quot;:
  29.     app = QtWidgets.QApplication(sys.argv)
  31.     view = QtQuick.QQuickView()
  33.     manager = Manager()
  34.     outer_ring_model = custom_model.OuterRingModel()
  36.     view.rootContext().setContextProperty(&quot;manager&quot;, manager)
  37.     view.rootContext().setContextProperty(&quot;outerRingModel&quot;, outer_ring_model)
  39.     filename = os.path.join(os.path.dirname(os.path.realpath(__file__)), &quot;main.qml&quot;)
  41.     view.setSource(QtCore.QUrl.fromLocalFile(filename))
  42.     view.show()
  44.     sys.exit(app.exec_())

custom_model.py

  1. from PyQt5 import QtCore
  4. class OuterRingModel(QtCore.QAbstractTableModel):
  5.     def __init__(self, parent=None):
  6.         super().__init__(parent)
  8.         self.column_count = 3
  9.         self._data = []
  11.         for i in range(50):
  12.             self._data.append([&quot;Black&quot;, 50, &quot;black&quot;])
  13.             self._data.append([&quot;White&quot;, 50, &quot;white&quot;])
  15.     def rowCount(self, parent):
  16.         return len(self._data)
  18.     def columnCount(self, parent):
  19.         return self.column_count
  21.     def data(self, index, role=QtCore.Qt.DisplayRole):
  22.         if role in (QtCore.Qt.DisplayRole, QtCore.Qt.EditRole,):
  23.             return self._data[index.row()][index.column()]

main.qml

  1. import QtQuick 2.7
  2. import QtQuick.Window 2.0
  3. import QtQuick.Controls 1.4
  4. import QtCharts 2.1
  6. Grid {
  7.     id: grid1
  8.     width: 1024
  9.     height: 600
  10.     spacing: 10
  11.     rows: 1
  12.     columns: 2
  14.     VPieModelMapper {
  15.         id: mapper0
  16.         model: outerRingModel
  17.         series: serie0
  18.         labelsColumn: 0
  19.         valuesColumn: 1
  20.         firstRow: 0
  21.         rowCount: 100
  22.     }
  24.     ChartView {
  25.         id: chart
  26.         width: 600
  27.         height: 600
  28.         antialiasing: true
  29.         animationDuration: 1000
  30.         animationOptions: ChartView.AllAnimations
  31.         title: &quot;MyTitle&quot;
  32.         legend.visible: false
  34.         PieSeries {
  35.             id: serie0
  36.             name: &quot;Outer Ring&quot;
  37.             size: 0.75
  38.             holeSize: 0.7
  39.             onSliceAdded: {
  40.                 manager.updateSlice(mapper0.series, slice, mapper0.model, mapper0.firstRow)
  41.             }   
  42.         }
  43.     }
  44. }

QML PieSeries 自定义模型与自定义数据

答案2

得分: 0

以下是翻译好的部分：

我已经成功完成了，没有任何新的实现。

我的切片列表如下所示：

  1. property variant pieArray: [
  2.     {
  3.         "label":"10",
  4.         "value":0.1,
  5.         "active":true,
  6.         "originalColor":"#ff9900",
  7.         "labelColor":"#000000",
  8.         "labelFont":"Arial",
  9.         "labelPointSize":20,
  10.         "borderWidth":6,
  11.         "borderColor":"#000000",
  12.         "explodeDistanceFactor":0.0,
  13.         "exploded":false,
  14.         "from":0,
  15.         "to":10
  16.     }
  17. ]

以下是用于添加饼图和其自定义属性的函数。自定义属性将自动添加，您无需考虑它。

  1. function addPies(pieArr) {
  2.     for (var i = 0; i < pieArr.length; i++) {
  3.         console.log(pieArr[i]["label"], pieArr[i]["value"]);
  4.         pieOuter.append(pieArr[i]["label"], pieArr[i]["value"]);
  5.         pieOuter.find(pieArr[i]["label"]).labelPosition = PieSlice.LabelInsideHorizontal;
  6.         pieOuter.find(pieArr[i]["label"]).labelVisible = true;
  7.         pieOuter.find(pieArr[i]["label"]).labelColor = pieArr[i]["labelColor"];
  8.         pieOuter.find(pieArr[i]["label"]).labelFont.family = pieArr[i]["labelFont"];
  9.         pieOuter.find(pieArr[i]["label"]).labelFont.pointSize = pieArr[i]["labelPointSize"];
  10.         pieOuter.find(pieArr[i]["label"]).borderWidth = pieArr[i]["borderWidth"];
  11.         pieOuter.find(pieArr[i]["label"]).borderColor = pieArr[i]["borderColor"];
  12.         pieOuter.find(pieArr[i]["label"]).explodeDistanceFactor = pieArr[i]["explodeDistanceFactor"];
  13.         pieOuter.find(pieArr[i]["label"]).exploded = pieArr[i]["exploded"];
  14.         pieOuter.find(pieArr[i]["label"]).color = pieArr[i]["originalColor"];
  15.         pieOuter.find(pieArr[i]["label"]).originalColor = pieArr[i]["originalColor"];
  16.         pieOuter.find(pieArr[i]["label"]).active = pieArr[i]["active"];
  17.         pieOuter.find(pieArr[i]["label"]).from = pieArr[i]["from"];
  18.         pieOuter.find(pieArr[i]["label"]).to = pieArr[i]["to"];
  19.         pieOuter.find(pieArr[i]["label"]).to = pieArr[i]["to"];
  20.     }
  21. }

然后在Component.onCompleted或任何其他您想要使用的事件中调用它：

  1. Component.onCompleted: {
  2.     addPies(pieArray);
  3. }
英文:

I've managed to do it without any new implementations.

My Slice list is something like this:

  1. property variant pieArray: [
  2. {
  3. &quot;label&quot;:&quot;10&quot;,
  4. &quot;value&quot;:0.1,
  5. &quot;active&quot;:true,
  6. &quot;originalColor&quot;:&quot;#ff9900&quot;,
  7. &quot;labelColor&quot;:&quot;#000000&quot;,
  8. &quot;labelFont&quot;:&quot;Arial&quot;,
  9. &quot;labelPointSize&quot;:20,
  10. &quot;borderWidth&quot;:6,
  11. &quot;borderColor&quot;:&quot;#000000&quot;,
  12. &quot;explodeDistanceFactor&quot;:0.0,
  13. &quot;exploded&quot;:false,
  14. &quot;from&quot;:0,
  15. &quot;to&quot;:10}]

And this is the function to add the pies and it's custom properties. Custom properties are added automatically, you don't have to think about it.

  1. function addPies(pieArr) {
  2. for (var i = 0; i&lt; pieArr.length; i++) {
  3. console.log(pieArr[i][&quot;label&quot;],pieArr[i][&quot;value&quot;]);
  4. pieOuter.append(pieArr[i][&quot;label&quot;],pieArr[i][&quot;value&quot;]);
  5. pieOuter.find(pieArr[i][&quot;label&quot;]).labelPosition = PieSlice.LabelInsideHorizontal;
  6. pieOuter.find(pieArr[i][&quot;label&quot;]).labelVisible= true;
  7. pieOuter.find(pieArr[i][&quot;label&quot;]).labelColor=pieArr[i][&quot;labelColor&quot;]
  8. pieOuter.find(pieArr[i][&quot;label&quot;]).labelFont.family=pieArr[i][&quot;labelFont&quot;]
  9. pieOuter.find(pieArr[i][&quot;label&quot;]).labelFont.pointSize=pieArr[i][&quot;labelPointSize&quot;]
  10. pieOuter.find(pieArr[i][&quot;label&quot;]).borderWidth=pieArr[i][&quot;borderWidth&quot;]
  11. pieOuter.find(pieArr[i][&quot;label&quot;]).borderColor=pieArr[i][&quot;borderColor&quot;]
  12. pieOuter.find(pieArr[i][&quot;label&quot;]).explodeDistanceFactor=pieArr[i][&quot;explodeDistanceFactor&quot;]
  13. pieOuter.find(pieArr[i][&quot;label&quot;]).exploded=pieArr[i][&quot;exploded&quot;]
  14. pieOuter.find(pieArr[i][&quot;label&quot;]).color=pieArr[i][&quot;originalColor&quot;]
  15. pieOuter.find(pieArr[i][&quot;label&quot;]).originalColor=pieArr[i][&quot;originalColor&quot;]
  16. pieOuter.find(pieArr[i][&quot;label&quot;]).active=pieArr[i][&quot;active&quot;]
  17. pieOuter.find(pieArr[i][&quot;label&quot;]).from=pieArr[i][&quot;from&quot;]
  18. pieOuter.find(pieArr[i][&quot;label&quot;]).to=pieArr[i][&quot;to&quot;]
  19. pieOuter.find(pieArr[i][&quot;label&quot;]).to=pieArr[i][&quot;to&quot;]
  20. }
  21. }

And then call it with Component.onCompleted or any other event you want to use:

  1.  Component.onCompleted: {
  2. addPies(pieArray);}

huangapple
  • 本文由 发表于 2020年1月6日 22:24:46
  • 转载请务必保留本文链接：https://go.coder-hub.com/59613774.html
  • pyqt
  • pyqt5
  • python
  • qml
  • qtcharts
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定