带有自定义数据的 QML PieSeries 自定义模型

Question

我想加载一些自定义数据（不仅仅是标签和尺寸，还有其他我需要的数据）。比方说 - 我也想从模型中加载每个切片的颜色。如何访问 "third column" 值 - "black" 或 "white" 并让 QML 使用它？这是我的代码：

main.py:

import sys
from PyQt5 import QtCore, QtWidgets, QtQuick
import custom_model

if __name__ == '__main__':
    app = QtWidgets.QApplication( sys.argv )

    view = QtQuick.QQuickView()

    outer_ring_model = custom_model.OuterRingModel()

    view.rootContext().setContextProperty( 'outerRingModel', outer_ring_model )

    view.setSource( QtCore.QUrl( "main.qml" ) )
    view.show()

    sys.exit( app.exec_() )

custom_model.py:

from PyQt5 import QtCore

class OuterRingModel( QtCore.QAbstractTableModel ):

    def __init__( self, parent=None ):
        super().__init__( parent )

        self.column_count = 2
        self.row_count = 100
        self.data = []

        i = 0
        while i < (self.row_count / 2):
            self.data.append(['Black', 50, 'black'])
            self.data.append(['White', 50, 'white'])
            i += 1

    def rowCount( self, parent ):
        return len( self.data )

    def columnCount( self, parent ):
        return self.column_count

    def data( self, index, role ):
        if role == QtCore.Qt.DisplayRole:
            return self.data[ index.row() ][ index.column() ]
        elif role == QtCore.Qt.EditRole:
            return self.data[ index.row() ][ index.column() ]
        elif role == QtCore.Qt.BackgroundRole:
            return QtGui.QColor( QtCore.Qt.white )
        return QtCore.QVariant()

main.qml:

import QtQuick 2.7
import QtQuick.Window 2.0
import QtQuick.Controls 1.4
import QtCharts 2.1

Grid {
    id: grid1
    width: 1024
    height: 600
    spacing: 10
    rows: 1
    columns: 2

    Component.onCompleted: { update() }

    ChartView {
        id: chart
        width: 600
        height: 600
        antialiasing: true
        animationDuration: 1000
        animationOptions: ChartView.AllAnimations
        title: "MyTitle"
        legend.visible: false

        PieSeries {
            id: serie0
            name: "Outer Ring"
            size: 0.75
            holeSize: 0.7
            onSliceAdded: {
                slice.color = Qt.lighter("red", 1.5)
                // slice.color = HOW_TO_IMPORT_MODEL_DATA_HERE
            }

            VPieModelMapper {
                id: model0
                model: outerRingModel
                labelsColumn: 0
                valuesColumn: 1
                firstRow: 0
                rowCount: 100
            }
        }
    }
}

Answer 1

您需要的内容无法在 QML 中实现，因为您不知道与切片关联的索引，因此您必须在 Python/C++ 中实现该逻辑。另外，你的模型有错误我已经更正了。

main.py

import os
import sys

from PyQt5 import QtCore, QtGui, QtWidgets, QtQuick, QtChart

import custom_model


class Manager(QtCore.QObject):
    @QtCore.pyqtSlot(
        QtChart.QPieSeries, QtChart.QPieSlice, QtCore.QAbstractItemModel, int
    )
    def updateSlice(self, serie, sl, model, firstRow):
        row = firstRow + serie.slices().index(sl)
        index = model.index(row, 2)
        color = model.data(index) or ""
        sl.setColor(QtGui.QColor(color))


if __name__ == "__main__":
    app = QtWidgets.QApplication(sys.argv)

    view = QtQuick.QQuickView()

    manager = Manager()
    outer_ring_model = custom_model.OuterRingModel()

    view.rootContext().setContextProperty("manager", manager)
    view.rootContext().setContextProperty("outerRingModel", outer_ring_model)

    filename = os.path.join(os.path.dirname(os.path.realpath(__file__)), "main.qml")

    view.setSource(QtCore.QUrl.fromLocalFile(filename))
    view.show()

    sys.exit(app.exec_())

custom_model.py

from PyQt5 import QtCore


class OuterRingModel(QtCore.QAbstractTableModel):
    def __init__(self, parent=None):
        super().__init__(parent)

        self.column_count = 3
        self._data = []

        for i in range(50):
            self._data.append(["Black", 50, "black"])
            self._data.append(["White", 50, "white"])

    def rowCount(self, parent):
        return len(self._data)

    def columnCount(self, parent):
        return self.column_count

    def data(self, index, role=QtCore.Qt.DisplayRole):
        if role in (QtCore.Qt.DisplayRole, QtCore.Qt.EditRole,):
            return self._data[index.row()][index.column()]

main.qml

import QtQuick 2.7
import QtQuick.Window 2.0
import QtQuick.Controls 1.4
import QtCharts 2.1

Grid {
    id: grid1
    width: 1024
    height: 600
    spacing: 10
    rows: 1
    columns: 2

    VPieModelMapper {
        id: mapper0
        model: outerRingModel
        series: serie0
        labelsColumn: 0
        valuesColumn: 1
        firstRow: 0
        rowCount: 100
    }

    ChartView {
        id: chart
        width: 600
        height: 600
        antialiasing: true
        animationDuration: 1000
        animationOptions: ChartView.AllAnimations
        title: "MyTitle"
        legend.visible: false

        PieSeries {
            id: serie0
            name: "Outer Ring"
            size: 0.75
            holeSize: 0.7
            onSliceAdded: {
                manager.updateSlice(mapper0.series, slice, mapper0.model, mapper0.firstRow)
            }   
        }
    }
}

Answer 2

我在没有任何新实现的情况下设法做到了。

我的切片列表是这样的：

property variant pieArray: [
    {
    "label":"10",
    "value":0.1,
    "active":true,
    "originalColor":"#ff9900",
    "labelColor":"#000000",
    "labelFont":"Arial",
    "labelPointSize":20,
    "borderWidth":6,
    "borderColor":"#000000",
    "explodeDistanceFactor":0.0,
    "exploded":false,
    "from":0,
    "to":10}]

这是添加饼图及其自定义属性的函数。自定义属性自动添加，您无需考虑。

function addPies(pieArr) {
    for (var i = 0; i< pieArr.length; i++) {
        console.log(pieArr[i]["label"],pieArr[i]["value"]);
        pieOuter.append(pieArr[i]["label"],pieArr[i]["value"]);
        pieOuter.find(pieArr[i]["label"]).labelPosition = PieSlice.LabelInsideHorizontal;
        pieOuter.find(pieArr[i]["label"]).labelVisible= true;
        pieOuter.find(pieArr[i]["label"]).labelColor=pieArr[i]["labelColor"]
        pieOuter.find(pieArr[i]["label"]).labelFont.family=pieArr[i]["labelFont"]
        pieOuter.find(pieArr[i]["label"]).labelFont.pointSize=pieArr[i]["labelPointSize"]
        pieOuter.find(pieArr[i]["label"]).borderWidth=pieArr[i]["borderWidth"]
        pieOuter.find(pieArr[i]["label"]).borderColor=pieArr[i]["borderColor"]
        pieOuter.find(pieArr[i]["label"]).explodeDistanceFactor=pieArr[i]["explodeDistanceFactor"]
        pieOuter.find(pieArr[i]["label"]).exploded=pieArr[i]["exploded"]
        pieOuter.find(pieArr[i]["label"]).color=pieArr[i]["originalColor"]
        pieOuter.find(pieArr[i]["label"]).originalColor=pieArr[i]["originalColor"]
        pieOuter.find(pieArr[i]["label"]).active=pieArr[i]["active"]
        pieOuter.find(pieArr[i]["label"]).from=pieArr[i]["from"]
        pieOuter.find(pieArr[i]["label"]).to=pieArr[i]["to"]
        pieOuter.find(pieArr[i]["label"]).to=pieArr[i]["to"]
    }
}

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

 Component.onCompleted: {
    addPies(pieArray);}

带有自定义数据的 QML PieSeries 自定义模型

QML PieSeries custom model with custom data

python

pyqt

qml

pyqt5

qtcharts