使用数据列的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对象，发送列和recv列中的值是整数。

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

ChartView {
    anchors.fill: parent
    antialiasing: true

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

这是我目前的看法。

​

我的问题是，StackedBarSeries只对x轴标签使用索引，但是我想显示每个条形的日期，因为它是x轴标签。

我尝试将DateTimeAxis用于axisX属性，但它似乎只是将x轴移动到提供的min和max值，同时将原始标签解释为unix时间戳。

Answer 1

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

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
            }
        }
    }
}

​

​

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