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

时间:2018-12-03 08:09:29

标签: c++ qt

enter image description here

我想在qt中创建这样的图表。我已经搜索过,找不到解决方法。

在基于Widget的应用程序中,我也找不到自定义Barchart并看起来像这样的方法

3 个答案:

答案 0 :(得分:1)

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

屏幕截图

enter image description here

答案 1 :(得分:1)

由于OP没有指定他想要基于Qt小部件的应用程序的解决方案(他在编辑问题后就这样做了),答案是:

创建自己的QWidget类。覆盖paintEvent并使用QPainter对其进行绘制。我认为,如果您使用Google搜索,就会有很多例子。

像这样:http://doc.qt.io/qt-5/qtwidgets-painting-basicdrawing-example.html

或者这个:http://programmingexamples.wikidot.com/qt-qpainter-example

或者这个:Draw on QWidget

答案 2 :(得分:0)

You can go for Custom QQuickPaintedItem here you can find an Example.