qt - 使用数据列的 QML StackedBarSeries x 轴标签

Question

我在 QSqlQueryModel 中有一个数据集，看起来像这样

+-----------+-----------+------------+
| date      | sent      | recv       |
|===========+===========+============+
| 2013-4-21 | 3839088   | 140036219  |
| 2013-4-22 | 146037305 | 1439537452 |
| 2013-4-23 | 67140372  | 1787850213 |
| ...                                |
+-----------+-----------+------------+

date 列中的值是 QDateTime 对象， sent 和 recv 列中的值是整数。

我想使用 StackedBarSeries 和 VBarModelMapper 在 QML ChartView 中显示这些数据：

ChartView {
    anchors.fill: parent
    antialiasing: true

    StackedBarSeries {
        VBarModelMapper {
            model: SqlTrafficModel {}
            firstBarSetColumn: 1
            lastBarSetColumn: 2
            firstRow: 0
        }
    }
}

这是我目前的看法

我的问题是 StackedBarSeries 仅使用 x 轴标签的索引，但是我想将每个条的日期显示为 x 轴标签。

我尝试将 DateTimeAxis 用于 axisX 属性，但看起来它只是将 x 轴移动到提供的最小值和最大值，同时将原始标签解释为 unix 时间戳。

Answer 1

一种可能的解决方案是实现一种Q_INVOKABLE方法，该方法在 a 中返回请求的列，QStringList并将其设置categories为BarCategoryAxis分配给 X 轴的 a，并在发出Component.onCompletedandonModelReset信号时调用它：

sqltrafficmodel.h

#ifndef SQLTRAFFICMODEL_H
#define SQLTRAFFICMODEL_H

#include <QSqlQuery>
#include <QSqlQueryModel>

class SqlTrafficModel : public QSqlQueryModel
{
    Q_OBJECT
    Q_PROPERTY(QString queryStr READ queryStr WRITE setQueryStr NOTIFY queryStrChanged)
public:
    SqlTrafficModel(QObject *parent = nullptr):QSqlQueryModel(parent){}

    Q_INVOKABLE QStringList getColumn(int col){
        QStringList mColumn;
        for(int row=0; row< rowCount(); ++row){
            mColumn<<index(row, col).data().toString();
        }
        return mColumn;
    }

    QString queryStr() const{
        return mQueryStr;
    }
    void setQueryStr(const QString &queryStr){
        if(queryStr == mQueryStr)
            return;
        mQueryStr = queryStr;
        setQuery(mQueryStr);
        emit queryStrChanged();
    }

signals:
    void queryStrChanged();
private:
    QString mQueryStr;
};

#endif // SQLTRAFFICMODEL_H

main.qml

import QtQuick 2.9
import QtQuick.Window 2.2
import QtCharts 2.2

import com.eyllanesc.models 1.0

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    visibility: Window.FullScreen

    ChartView {
        anchors.fill: parent
        antialiasing: true

        StackedBarSeries {
            VBarModelMapper {
                model: SqlTrafficModel {
                    id: trafficModel
                    queryStr: "select * from traffic"
                    onModelReset: bar_axis.categories = getColumn(0)
                    Component.onCompleted: bar_axis.categories = getColumn(0)
                }
                firstBarSetColumn: 1
                lastBarSetColumn: 2
                firstRow: 0
            }
            axisX: BarCategoryAxis {
                id: bar_axis
            }
        }
    }
}

完整的示例可以在以下链接中找到