如何在Qt中创建或实现这样的图表？

Question

I want to create a chart like this in qt. I already searched and can not find a way to do it.

I also can not find a way to customize Barchart and look like this in Widget Based Applications

Answer 1

Easy in QML!

import QtQuick 2.0
import QtQuick.Layouts 1.1

Rectangle
{
    width: 600
    height: 300

    ListModel
    {
        id: dataModel
        ListElement { label: "C.A"; value: 37 }
        ListElement { label: "C.B"; value: 58 }
        ListElement { label: "C.C"; value: 16 }
        ListElement { label: "C.D"; value: 5 }
        ListElement { label: "C.E"; value: 95 }
        ListElement { label: "C.F"; value: 10 }
        ListElement { label: "C.G"; value: 27 }
        ListElement { label: "C.H"; value: 2 }
    }

    Rectangle
    {
        height: 4
        width: layout.width
        anchors.top: layout.bottom
        anchors.horizontalCenter: layout.horizontalCenter
        color: "#bbbdbe"
    }
    RowLayout
    {
        id: layout
        width: 400
        height: 200
        spacing: 0
        anchors.centerIn: parent

        Repeater
        {
            id: rpt
            property int barWidth: layout.width / count
            model: dataModel
            delegate:
                Rectangle
                {
                    width: rpt.barWidth
                    height: layout.height
                    color: "transparent"

                    Rectangle
                    {
                        anchors.bottom: parent.bottom
                        anchors.horizontalCenter: parent.horizontalCenter
                        width: 3
                        height: (parent.height * value) / 100
                        color: "#448bbe"

                        Rectangle
                        {
                            color: "#448bbe"
                            radius: width / 2
                            width: 8
                            height: 8
                            anchors.top: parent.top
                            anchors.horizontalCenter: parent.horizontalCenter
                        }
                    }
                    Text
                    {
                        y: parent.height + 3
                        anchors.horizontalCenter: parent.horizontalCenter
                        text: label
                    }
                }
        }
    }
}

Screenshot

Answer 2

Since the OP didn't specify he wants a solution for a Qt widgets based application [he did after editing the question], the answer is:

Create your own QWidget class. Override the paintEvent and paint in it with a QPainter. I think there's plenty of examples if you google it.

Like this: http://doc.qt.io/qt-5/qtwidgets-painting-basicdrawing-example.html

Or this: http://programmingexamples.wikidot.com/qt-qpainter-example

Or this: Draw on QWidget

Answer 3

你可以去定制QQuickPaintedItem在这里你可以找到一个例子 。