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

QML Chart组件之图例

backend 2025/9/1 5:59:29

- 前言
- 相关系列
- 图例基础知识
- 基础示例
- 图例属性说明
- - 1. 设置图例不可见
  - 2. 设置图例边框和背景样式
  - 3. 设置图例字体
  - 4. 设置标签颜色
  - 5. 设置标记形状
  - 6. 反转标识
  - 7. 设置图例位置
  - 8. 设置图例ToolTips
- 结语
- 源码下载

前言

在上文 QML Chart组件之坐标轴共有属性中介绍了坐标轴基类的通用方法，本篇主要介绍Chart组件的 Legend（图例）用法。图例是图表中用于标识不同数据系列的视觉元素，它通过颜色、形状和文本来区分各个数据序列，帮助用户更好地理解图表内容。

图例基础知识

在Qt Charts中，Legend类是图表的图例组件，用于展示各个数据系列的标识。每个ChartView都有一个默认的图例，可以通过legend属性进行访问和配置。图例可以显示系列名称、颜色标记，并支持交互操作（如点击隐藏/显示系列）。

图例的主要作用包括：

标识不同数据系列的含义
通过视觉元素区分数据系列
提供交互功能控制系列显示状态

基础示例

import QtQuick
import QtQuick.Layouts
import QtChartsRectangle {Layout.fillWidth: trueLayout.fillHeight: trueChartView {id: chartViewtitle: "图例"titleFont.bold: truetitleFont.pointSize: 14anchors.fill: parentantialiasing: trueValueAxis {id: valueAxisXmin: 0max: 4titleText: "X Title"}ValueAxis {id: valueAxisYmin: 0max: 16titleText: "Y Title"}LineSeries {name: "line1"XYPoint { x: 0; y: 0 }XYPoint { x: 1; y: 1 }XYPoint { x: 2; y: 4 }XYPoint { x: 3; y: 9 }XYPoint { x: 4; y: 16 }axisX: valueAxisXaxisY: valueAxisY}LineSeries {name: "line2"XYPoint { x: 0; y: 2 }XYPoint { x: 1; y: 4 }XYPoint { x: 2; y: 5 }XYPoint { x: 3; y: 8 }XYPoint { x: 4; y: 12 }axisX: valueAxisXaxisY: valueAxisY}}
}

在这里插入图片描述
▲ 基础示例效果图

接下来要在此示例的基础上进行调整，展示如何设置Legend属性，以及修改后的效果。

图例属性说明

1. 设置图例不可见

默认情况下，图例是可见的。通过设置legend.visible属性为false可以隐藏图例。

ChartView {id: chartViewtitle: "图例"titleFont.bold: truetitleFont.pointSize: 14anchors.fill: parentantialiasing: truelegend.visible: false
}

隐藏图例

2. 设置图例边框和背景样式

可以通过相关属性设置图例的背景和边框样式，增强视觉效果。

ChartView {id: chartViewtitle: "图例"titleFont.bold: truetitleFont.pointSize: 14anchors.fill: parentantialiasing: truelegend.visible: truelegend.backgroundVisible: truelegend.color: "#E0E0E0"legend.borderColor: "#999999"
}

在这里插入图片描述
▲ 设置图例边框和背景样式的效果

3. 设置图例字体

可以自定义图例中文本的字体样式，包括字体家族、大小和粗细。

ChartView {id: chartViewtitle: "图例"titleFont.bold: truetitleFont.pointSize: 14anchors.fill: parentantialiasing: truelegend.visible: truelegend.font.family: "Courier"legend.font.pointSize: 12legend.font.bold: true
}

在这里插入图片描述
▲ 设置图例字体样式的效果

4. 设置标签颜色

通过labelColor属性可以设置图例文本的颜色。

ChartView {id: chartViewtitle: "图例"titleFont.bold: truetitleFont.pointSize: 14anchors.fill: parentantialiasing: truelegend.visible: truelegend.labelColor: "#1296FF"
}

在这里插入图片描述
▲ 设置图例标签颜色的效果

5. 设置标记形状

markerShape属性用于设置图例中标记的形状，可以选择多种预设形状。

ChartView {id: chartViewtitle: "图例"titleFont.bold: truetitleFont.pointSize: 14anchors.fill: parentantialiasing: truelegend.visible: truelegend.markerShape: Legend.MarkerShapeFromSeries
}

常量	描述
`Legend.MarkerShapeRectangle`	图例标记为矩形
`Legend.MarkerShapeCircle`	图例标记为圆形
`Legend.MarkerShapeRotatedRectangle`	图例标记为旋转的矩形
`Legend.MarkerShapeTriangle`	图例标记为三角形
`Legend.MarkerShapeStar`	图例标记为星形
`Legend.MarkerShapePentagon`	图例标记为五边形
`Legend.MarkerShapeFromSeries`	图例标记形状由系列决定

MarkerShapeRectangle（图例标记为矩形）：
在这里插入图片描述

MarkerShapeCircle（图例标记为圆形）：
在这里插入图片描述
MarkerShapeRotatedRectangle（图例标记为旋转的矩形）：

MarkerShapeTriangle（图例标记为三角形）：

MarkerShapeStar（图例标记为星形）：

MarkerShapePentagon（图例标记为五边形）：

MarkerShapeFromSeries（图例标记形状由系列决定）：
在这里插入图片描述
▲ 不同标记形状的效果对比

6. 反转标识

reverseMarkers属性可以控制图例中标记和文本的显示顺序。

ChartView {id: chartViewtitle: "图例"titleFont.bold: truetitleFont.pointSize: 14anchors.fill: parentantialiasing: truelegend.visible: truelegend.reverseMarkers: true
}

在这里插入图片描述
▲ 设置反转标识的效果

7. 设置图例位置

通过alignment属性可以控制图例在图表中的位置。

ChartView {id: chartViewtitle: "图例"titleFont.bold: truetitleFont.pointSize: 14anchors.fill: parentantialiasing: truelegend.visible: truelegend.alignment: Qt.AlignBottom
}

支持的位置包括：