Qt图表概览

Qt图表允许创建风格独特、交互式、以数据为中心的用户界面。Qt图表使用图形视图框架以便于集成。图表组件可以用作QWidget或QGraphicsWidget对象,或者QML类型。

QChart类管理不同类型系列及其他与图表相关的对象(如图例和坐标轴)的图形表示。QChart是一个QGraphicsWidget,可以在QGraphicsScene中显示。一个更简单的解决方案是使用便利类QChartView,而不是直接使用QChart,在布局中显示图表。在QML中,使用ChartView类型来显示图表。

某些图表组件也可以通过使用QPolarChart类(它是QChart类的专用化)或PolarChartView QML类型(它是ChartView类型的专用化)来呈现为极坐标图表。

可以使用主题、修改颜色和属性、隐藏图表组件或动画化图表来自定义图表的外观和感觉。

模型映射器允许使用从QAbstractItemModel派生的数据模型作为图表的数据源。模型映射器可以是水平或垂直的。

图表类型

Qt图表模块提供了以下图表类型

每个图表类型都由一个从QAbstractSeries派生的类或QML中的AbstractSeries派生的类型表示。通过使用系列类的实例并将其添加到QChart或ChartView实例中创建图表。

例如

QLineSeries* series = new QLineSeries();
series->add(0, 6);
series->add(2, 4);
...
chartView->chart()->addSeries(series);
chartView->chart()->createDefaultAxes();

或者,在QML中

ChartView {
    id: chart
    title: "Top-5 car brand shares in Finland"
    anchors.fill: parent
    legend.alignment: Qt.AlignBottom
    antialiasing: true

    property variant othersSlice: 0

    PieSeries {
        id: pieSeries
        PieSlice { label: "Volkswagen"; value: 13.5 }
        PieSlice { label: "Toyota"; value: 10.9 }
        PieSlice { label: "Ford"; value: 8.6 }
        PieSlice { label: "Skoda"; value: 8.2 }
        PieSlice { label: "Volvo"; value: 6.8 }
    }

    Component.onCompleted: {
        // You can also manipulate slices dynamically, like append a slice or set a slice exploded
        othersSlice = pieSeries.append("Others", 52.0);
        pieSeries.find("Volkswagen").exploded = true;
    }
}

import QtQuick

您可以在一个图表中组合不同类型的系列。

线和样条图

线和样条图将数据以一系列数据点表示,这些点通过线连接。在线图中,数据点由直线连接,而在样条图中,它们由样条连接。样条是用QPainterPath绘制的。

线图通过QLineSeries类或LineSeries QML类型实现。

样条图通过使用继承自QLineSeriesQSplineSeries类或继承自LineSeriesSplineSeries类型来实现。

更多信息,请参阅创建折线图创建样条图。有关将折线图与条形图结合并使用公共轴的示例,请参阅合并折线和条形图

面积图和散点图

面积图将数据表示为两条线所围成的面积,而散点图将数据表示为点集。

面积图通过使用QAreaSeries类或AreaSeries QML类型实现。默认情况下,x轴用作一条边界,QLineSeriesLineSeries用作另一条边界。但是,您可以使用QLineSeriesLineSeries作为两条边界。

散点图通过使用QScatterSeries类或ScatterSeries QML类型实现。

更多信息,请参阅创建面积图创建散点图

条形图

条形图以分类分组的方式表示水平或垂直条形的数据。在条形图中,QBarSet类和BarSet QML类型表示一组条形。在所有条形图类中,QAbstractBarSeries类是抽象父类,AbstractBarSeries类型是条形系列类型的父类型。系列类型决定数据如何呈现。

在条形图中,通过使用QBarSeries类和BarSeries QML类型,数据以按类别分组的垂直条形的形式呈现。类似地,通过使用QHorizontalBarSeries类和HorizontalBarSeries QML类型,数据以水平条形的形式呈现。

通过使用QStackedBarSeries类和StackedBarSeries类型,将一系列数据以垂直堆叠条形的形式呈现,每个类别一条条形。相应的水平和类型分别是QHorizontalStackedBarSeriesHorizontalStackedBarSeries

在条形图中,通过使用QPercentBarSeries类和PercentBarSeries QML类型,将一系列分类数据以每个类别的百分比形式呈现。相应的水平和类型分别是QHorizontalPercentBarSeriesHorizontalPercentBarSeries

更多信息,请参阅创建条形图创建水平堆叠条形图创建水平条形图创建水平百分比条形图

饼图

饼图以饼的形式展示数据,该饼由饼片组成。饼图使用 QPieSeries 类或 PieSeries QML 类型实现,而饼片则使用 QPieSlice 类或 PieSlice QML 类型添加。

可以通过指定介于 0.0 和 1.0 之间的孔径大小,将饼图转换为甜甜圈。

更多信息请参阅 带有小部件的图表画廊创建甜甜圈分解图表创建嵌套甜甜圈图表

箱线和须图

箱线和须图通过具有须的箱线扩展展示数据,须显示了值的变异性。箱线系列中的项目按类别分组,与柱状系列的柱状图相似。对于每个箱线和须图项目,指定下限、下四分位数、中位数、上四分位数和上限值。

箱线和须图使用 QBoxPlotSeriesQBoxSet 类或 BoxPlotSeriesBoxSet QML 类型实现。

更多信息请参阅 创建箱线和须图

蜡烛图

蜡烛图以蜡烛的形式展示一系列数据。

蜡烛图使用 QCandlestickSeriesQCandlestickSet 类或 CandlestickSeriesCandlestickSet QML 类型实现。

极坐标图

极坐标图以圆形图形展示数据,其中数据的位置基于从图形中心(即 极点)的角度和距离。

QPolarChart 类是 QChart 类的特化。它支持线、样条、面积和散点系列,以及它们支持的所有轴类型。轴可以用作径向轴或角度轴。在 QML 中,相应的类型是 PolarChartView

更多信息请参阅 创建极坐标图在 QML 中使用极坐标图

Qt Charts 支持以下轴类型

  • 数值轴
  • 类别轴
  • 条形类别轴
  • 日期时间轴
  • 对数数值轴

可以设置轴以显示带有刻度线、网格线和阴影的线。轴上的值在刻度线位置上绘制。所有轴类型都是 QAbstractAxis 类或 AbstractAxis QML 类型的特化。

数值轴向图表的轴添加实数值。它使用 QValueAxis 类或 ValueAxis QML 类型实现。

类别轴使用 QCategoryAxis 类或 CategoryAxis QML 类型实现。它具有命名范围和可调整的范围宽度。

条形类别轴类似于类别轴,但所有范围的范围宽度相同。条形类别轴使用 QBarCategoryAxis 类或 BarCategoryAxis QML 类型实现。

日期时间轴向图表的坐标轴添加日期和时间。它使用QDateTimeAxis类或DateTimeAxis QML类型实现。

对数轴将一个对数尺度添加到图表的坐标轴上。对数尺度是一个基于量级的非线性尺度,因此坐标轴上的每个刻度是前一个刻度乘以一个值。对数轴使用QLogValueAxis类或LogValueAxis QML类型实现。

一个图表可以定义多个坐标轴。坐标轴可以放在图表的下方、上方、左侧或右侧。此外,坐标轴可以是不同类型。然而,不支持混合会导致不同域的坐标轴类型,例如,在相同的方向上指定QValueAxisQLogValueAxis

有关更多信息,请参阅具有日期和时间轴的折线图使用对数值轴使用多个坐标轴在QML中使用坐标轴

图例

图例是一个显示图表图例的图形对象。图例对象不能被创建或删除,但可以通过QChart类或ChartView QML类型进行引用。图例状态由QChartChartView在序列更改时更新。

图例可以放在图表下方或上方,以及其左侧或右侧。默认情况下,图例附加到图表视图中,但它可以分离到一个可以自由移动的单独的图形元素中。

可以隐藏图例中的部分或全部标记。

可以使用QLegendMarker基类以及每个序列类型的子类来修改图例标记:QAreaLegendMarkerQBarLegendMarkerQBoxPlotLegendMarkerQCandlestickLegendMarkerQXYLegendMarker

在QML中,可以通过创建自定义图例来修改图例标记,如自定义图例示例所示。

与图表交互

最终用户可以通过动态向图表添加值、深入数据分析、放大或缩小图表、滚动图表以及点击图表中的项目或悬停在它们上与图表进行交互。

动态绘制数据

可以动态向图表中添加数据,并使图表视图自动滚动以显示新数据。

有关更多信息,请参阅创建样条图

深入数据

可以实施对条形图或饼图进行深入效果的实现。当用户选择图表中的项时,将显示该项的更详细视图。这是通过删除第一个序列并添加另一个序列来实现的。

有关更多信息,请参阅实现深入功能

缩放和滚动

用户可以使用键盘进行缩放和滚动。他们可以使用箭头键滚动图表,使用加号键和减号键缩放和缩小图表。此外,可以使用QRubberBand选择要缩放的区域。

在触摸设备上,可以使用手势进行平移和缩放。

更多信息,请参阅缩放线示例

点击和悬停

您可以将槽连接到当最终用户在图表中点击项或将其悬停时发出的信号。这使您可以向图表添加元素,如注释。

更多信息,请参阅在图表上绘制注释

主题

主题是一组内建的UI风格相关设置集合,它应用于图表的所有视觉元素,如系列的颜色、画笔、刷子和字体,以及坐标轴、标题和图例。

Qt Charts提供了以下预定义主题

  • 浅色主题,这是默认主题
  • 天蓝主题
  • 深色主题
  • 沙褐色主题
  • 自然色彩系统(NCS)蓝色主题
  • 高对比度主题
  • 冰蓝色主题
  • Qt主题

可以通过更改颜色、画笔、刷子和字体来自定义主题。可以通过修改Qt Charts源代码添加新主题。

注意:更改主题将覆盖之前应用于系列的全部自定义。

更多信息,请参阅使用主题创建图表

© 2024 Qt公司有限公司。本文件中的文档贡献属于其各自所有者的版权。提供的文档是根据自由软件基金会发布并由其发布的GNU自由文档许可证版本1.3的条款许可的。Qt及其标志是芬兰和/或世界其他地区的Qt公司有限公司的商标。所有其他商标均归其各自所有者所有。