QML ChartView: custom draw graph

377 Views Asked by At

I need to draw a custom time series graph like this. I tried to use QML HorizontalStackedBarSeries, but I think, it's not effective for this kind of work.

My QML code:

    ChartView {
    anchors.fill: parent
    legend.visible: false
    ValueAxis {
        id: axisX
        min: 0
        max: 1
        tickCount: 11
        labelFormat: "%.3f s"
        labelsFont.bold: true
    }
    HorizontalStackedBarSeries {
        id: mySeries
        axisY: BarCategoryAxis {
            categories: ["C1"]
            visible: false
        }
        axisX: axisX
    }
    HorizontalStackedBarSeries {
        id: mySeries2
        axisY: BarCategoryAxis {
            categories: ["C2"]
            visible: false
            labelsVisible: false
        }
        axisX: axisX
    }
    HorizontalStackedBarSeries {
        id: mySeries3
        axisY: BarCategoryAxis {
            categories: ["C3"]
            visible: false
        }
        axisX: axisX
    }
}

Fill the graph on C++ just for test:

void CbTimingRecordReader::setContactSeries2(QAbstractSeries* ch1Series, QAbstractSeries* ch2Series, QAbstractSeries* ch3Series)
{
    QHorizontalStackedBarSeries* series = qobject_cast<QHorizontalStackedBarSeries*>(ch1Series);
    QHorizontalStackedBarSeries* series2 = qobject_cast<QHorizontalStackedBarSeries*>(ch2Series);
    QHorizontalStackedBarSeries* series3 = qobject_cast<QHorizontalStackedBarSeries*>(ch3Series);

    series->attachedAxes().at(0)->setRange(0, 1);
    QList<QBarSet*> sets;
    for (int i = 0; i < 25; i++) {
        QBarSet* set = new QBarSet("");
        set->append(i / 25.0);
        if (i % 2 == 0)
            set->setColor(Qt::transparent);
        else
            set->setColor(Qt::red);
        sets << set;
    }
    series->append(sets);
    sets.clear();
    for (int i = 0; i < 25; i++) {
        QBarSet* set = new QBarSet("");
        set->append(i / 25.0);
        if (i % 2 == 0)
            set->setColor(Qt::transparent);
        else
            set->setColor(Qt::blue);
        sets << set;
    }
    series2->append(sets);
    sets.clear();

    for (int i = 0; i < 25; i++) {
        QBarSet* set = new QBarSet("");
        set->append(i / 25.0);
        if (i % 2 == 0)
            set->setColor(Qt::transparent);
        else
            set->setColor(Qt::green);
        sets << set;
    }
    series3->append(sets);
    sets.clear();
}

The result is here

  1. Is it possible to change QBarSet width?
  2. If the first question answer is NO, what can I use to create this kind of graphs?
0

There are 0 best solutions below