将 c++ QAbstractSeries 添加到 QML 图表视图

Question

我很难将 c++ 与 qml 和 QtCharts/Chartview 结合使用。如果在任何时候有任何建议，我很乐意在这里！

问题：我想在 QML 的 Chartview 中添加一个用 c++ 定义的 QLineSeries。 我的主要问题是将我的 c++class setLineSeries() 连接到我的 qml Chartview{}Object。

我尝试通过使用

创建一个新系列来做到这一点

var series = diabBig.createSeries(ChartView.SeriesTypeLine, "Test", diabBig.axisX(lineseries), diabBig.axisY(lineseries));

然后将此系列对象更改为我的 c++QLineSeriesObject

series = diabetesView.setLineSeries();

是否有可能这样做，或者如何从 c++ 中使用我的 QLineSeries(QAbstractSeries)？

编辑：“如果我想要做的事情不可能，这将是一个可以接受的答案，即使它不是我想要阅读的答案！”

这是我简短的示例代码：

diabChart.h

#ifndef DIABCHART_H
#define DIABCHART_H

#include <QtCharts/QChartView>
#include <QtCharts/QLineSeries>
#include <QtCharts/QDateTimeAxis>
#include <QtCharts/QCategoryAxis>
#include <QDateTime>
#include <QtQuick/QQuickPaintedItem>
#include <QColor>
#include <QObject>

QT_CHARTS_USE_NAMESPACE

class DiabChart : public QObject
{
    Q_OBJECT

public:
    explicit DiabChart(QObject *parent = 0);

    Q_INVOKABLE QAbstractSeries* setLineSeries();

};

#endif // DIABCHART_H

diabChart.cpp

#include "diabchart.h"
#include <QtCharts/QChartView>

QT_CHARTS_USE_NAMESPACE

Q_DECLARE_METATYPE(QAbstractSeries *)
Q_DECLARE_METATYPE(QAbstractAxis *)

DiabChart::DiabChart(QObject *parent)
    : QObject(parent)
{
    qRegisterMetaType<QAbstractSeries*>();
    qRegisterMetaType<QAbstractAxis*>();
}

QAbstractSeries* DiabChart::setLineSeries()
{
    QLineSeries *bloodSugarSeries = new QLineSeries();

    QPen penBloodSugar;
    penBloodSugar.setColor(QColor(34, 102, 102));
    penBloodSugar.setWidth(5);
    QDateTime xValue;
    xValue.setDate(QDate(2016,7,3));
    xValue.setTime(QTime(0,0));
    bloodSugarSeries->append(xValue.toMSecsSinceEpoch(), 192.6);
    xValue.setTime(QTime(7,0));
    bloodSugarSeries->append(xValue.toMSecsSinceEpoch(), 89);
    xValue.setTime(QTime(9,0));
    bloodSugarSeries->append(xValue.toMSecsSinceEpoch(), 100);
    xValue.setTime(QTime(12,0));
    bloodSugarSeries->append(xValue.toMSecsSinceEpoch(), 50);
    xValue.setTime(QTime(14,0));
    bloodSugarSeries->append(xValue.toMSecsSinceEpoch(), 250);
    xValue.setTime(QTime(18,0));
    bloodSugarSeries->append(xValue.toMSecsSinceEpoch(), 140);
    xValue.setTime(QTime(21,0));
    bloodSugarSeries->append(xValue.toMSecsSinceEpoch(), 80);
    xValue.setTime(QTime(23,30));
    bloodSugarSeries->append(xValue.toMSecsSinceEpoch(), 200);
    xValue.setDate(QDate(2016,7,4));
    xValue.setTime(QTime(0,0));
    bloodSugarSeries->append(xValue.toMSecsSinceEpoch(), 192.6);
    bloodSugarSeries->setPen(penBloodSugar);


    return bloodSugarSeries;
}

ma​​in.cpp

#include <QQmlApplicationEngine>
#include <QtWidgets/QApplication>
#include <QtCharts/QChartView>
#include <QtWidgets/QMainWindow>
#include <QtQuick/QQuickView>
#include <QApplication>

#include "diabchart.h"

QT_CHARTS_USE_NAMESPACE

int main(int argc, char *argv[])
{

    QApplication app(argc, argv);

    qmlRegisterType<DiabChart>("DiabChart", 1, 0, "DiabChart");


    QQmlApplicationEngine engine;
    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));

    return app.exec();
}

ma​​in.qml

import QtQuick 2.5
import QtQuick.Controls 1.4
import QtCharts 2.0
import DiabChart 1.0

ApplicationWindow {
    id: windowwindow
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")


    DiabChart{
        id: diabetesView
    }

    function addseries()
    {
        // var xyz = diabetesView.setLineSeries();

        var series = diabBig.createSeries(ChartView.SeriesTypeLine, "Test", diabBig.axisX(lineseries), diabBig.axisY(lineseries));
        series.append(0,50);
        series.append(4,130);

        series = diabetesView.setLineSeries();

        diabBig.update();
    }
    Column{
        Rectangle{
            id: infoArea1
            color: "green"
            width: windowwindow.width
            height: windowwindow.height *0.25

            MouseArea{
                anchors.fill: parent
                onClicked: addseries()
            }
        }
        ChartView{
            id: diabBig
            width: windowwindow.width
            height: windowwindow.height *0.75
            title: "Line"

            antialiasing: true

            ValueAxis{
                id: vlaueAxisX
                min: 0
                max: 24
                tickCount: 12
                labelFormat: "%2.0f:00"
            }
            ValueAxis{
                id: valueAxisY
                min:0
                max: 500
                tickCount: 50
            }

            LineSeries {
                id: lineseries
                axisX: vlaueAxisX
                axisY: valueAxisY
                name: "LineSeries"
                XYPoint { id: zero; x: 0; y: 192.6}
                XYPoint { id: first; x: 7; y: 89 }
                XYPoint { x: 9; y: 80 }
                XYPoint { x: 12; y: 30 }
                XYPoint { x: 14; y: 150 }
                XYPoint { x: 18; y: 40 }
                XYPoint { x: 21; y: 280 }
                XYPoint { id: last; x: 23.5; y: 200 }
                XYPoint { id: twentyfour; x: 24; y: 192.6}
            }
        }
    }
}

test.pro

TEMPLATE = app

QT += charts qml quick

CONFIG += c++11

SOURCES += main.cpp \
    diabchart.cpp

RESOURCES += qml.qrc

# Additional import path used to resolve QML modules in Qt Creator's code model
QML_IMPORT_PATH = #../Diabetes

# Default rules for deployment.
include(deployment.pri)

DISTFILES +=

HEADERS += diabchart.h

Answer 1

我没有使用 QAbstractSeries* DiabChart::setLineSeries() 这样的函数，而是将其改为：void DiabChart::setLineSeries(QLineSeries* lineSeries)

调用更改 ChartView 输入的函数如下所示：

function addSeries()
{
    //Define Axes of the ChartView
    diabetesView.getAxisYDescription(yDescription);
    diabetesView.getAxisXTime(xTime);
    diabetesView.getAxisYValues(yValues);

    // Create new LineSeries with 3 Axes (Two-Y-Axis, One-X-Axis)
    var mySeries = diabChartBig.createSeries(ChartView.SeriesTypeLine, "Line", xTime, yValues);
    var mySeries2 = diabChartBig.createSeries(ChartView.SeriesTypeLine, "Overview", xTime, yDescription);

    // Define series on specific wishes
    diabetesView.setLineSeries(mySeries);

    //Delete not needed series (only created because second y-Axis
    diabChartBig.removeSeries(mySeries2);
}

最低设置的 ChartView-Object 如下所示：

ChartView{
    id: diabChartBig
    title: "Overview"
    width: diabetesApplicationArea.width * 0.78
    height: diabetesApplicationArea.height * 0.66
    antialiasing: true
    backgroundColor: "grey"
    CategoryAxis{
        id: yDescription
    }
    DateTimeAxis{
        id: xTime
    }
    CategoryAxis{
        id: yValues
    }
}

结果如下：