当前位置：首页 > article >正文

QML使用ChartView绘制饼状图

article 2025/3/14 11:51:37

一、工程配置

首先修改CMakeLists.txt，按下图修改：
在这里插入图片描述

find_package(Qt6 6.4 REQUIRED COMPONENTS Quick Widgets) PRIVATE

target_link_libraries(appuntitled
    PRIVATE Qt6::Quick
    PRIVATE Qt6::Widgets
)

其次修改main.cpp，按下图修改：
在这里插入图片描述

#include <QApplication>
QApplication app(argc, argv);

二、ChartView介绍

ChartView是QML中用于绘制各种图表的组件，可以通过简单的QML代码快速创建各种类型的图表，如折线图、柱状图、饼图等。ChartView基于Qt Charts模块，提供了丰富的功能和样式选项，使开发者可以定制自己的图表风格。
使用ChartView，开发者可以轻松地绑定数据模型，并通过属性设置来调整图表的外观和交互方式。同时，ChartView还支持动画效果、交互式操作和事件处理，可以让图表更加生动和用户友好。
总的来说，ChartView是一个强大而灵活的工具，帮助开发者快速地实现各种图表需求，并为用户提供更好的数据可视化体验。

三、饼状图介绍

饼状图是一种常用的数据可视化图表，用于展示各部分占整体的比例关系。它由一个圆形区域组成，被划分成若干个扇形区域，每个扇形的大小与所代表的部分在整体中所占比例成正比。通常，饼状图的每个扇形区域会有相应的标签，用于标识该部分代表的具体数据或类别。

饼状图适用于展示数据的相对比例和占比关系，能够直观地呈现数据的分布情况。常见的应用场景包括市场份额、调查结果、销售额占比等方面。

在制作饼状图时，需要注意以下几点：

数据准确性：确保数据准确无误，饼状图的每部分比例总和应等于整体。
清晰标签：为每个扇形区域添加清晰的标签，以便观众理解各部分的含义。
色彩搭配：选取合适的颜色搭配，使饼状图更加美观和易于理解。
避免过多扇形：避免饼状图中扇形过多，以免造成视觉混乱，通常建议不超过6-8个扇形。

总的来说，饼状图是一种简单而有效的数据可视化工具，在呈现数据占比关系时能够起到直观和易于理解的作用。

四、效果展示

在这里插入图片描述

五、源码分享

import QtQuick
import QtQuick.Controls
import Qt.labs.qmlmodels
import QtQuick.Controls.Basic
import QtQuick.Layouts
import QtQuick.Effects
import Qt.labs.platform
import QtQuick.VirtualKeyboard
import QtCharts

ApplicationWindow {
    id:root
    width: 1000
    height: 730
    visible: true
    title: qsTr("Hello World")

    ChartView {
        id: chart
        title: "pie chart"
        anchors.fill: parent
        legend.alignment: Qt.AlignBottom
        antialiasing: true

        property variant othersSlice: 0

        PieSeries {
            id: pieSeries
            PieSlice { label: "xupeng1"; value: 13.5 }
            PieSlice { label: "xupeng2"; value: 10.9 }
            PieSlice { label: "xupeng3"; value: 8.6 }
            PieSlice { label: "xupeng4"; value: 8.2 }
            PieSlice { label: "xupeng5"; value: 6.8 }
        }

        Component.onCompleted: {
            othersSlice = pieSeries.append("others", 52.0);
            pieSeries.find("xupeng1").exploded = true;
        }
    }

}