Question

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

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

日期列中的值是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方法，该方法在QStringList中返回请求的列，并在分配给X轴的categories中将其设置为BarCategoryAxis，并在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
            }
        }
    }
}

完整示例可在以下link

中找到

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

1 个答案: