QML Chart组件之图例-EW帮帮网

前言

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

图例基础知识

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

图例的主要作用包括：

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

基础示例

import QtQuick
import QtQuick.Layouts
import QtCharts

Rectangle {
    Layout.fillWidth: true
    Layout.fillHeight: true

    ChartView {
        id: chartView
        title: "图例"
        titleFont.bold: true
        titleFont.pointSize: 14

        anchors.fill: parent
        antialiasing: true

        ValueAxis {
            id: valueAxisX
            min: 0
            max: 4
            titleText: "X Title"
        }

        ValueAxis {
            id: valueAxisY
            min: 0
            max: 16
            titleText: "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: valueAxisX
            axisY: 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: valueAxisX
            axisY: valueAxisY
        }
    }
}

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

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

图例属性说明

1. 设置图例不可见

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

ChartView {
    id: chartView
    title: "图例"
    titleFont.bold: true
    titleFont.pointSize: 14
    anchors.fill: parent
    antialiasing: true

    legend.visible: false
}

隐藏图例

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

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

ChartView {
    id: chartView
    title: "图例"
    titleFont.bold: true
    titleFont.pointSize: 14
    anchors.fill: parent
    antialiasing: true

    legend.visible: true
    
    legend.backgroundVisible: true
    legend.color: "#E0E0E0"
    legend.borderColor: "#999999"
}

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

3. 设置图例字体

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

ChartView {
    id: chartView
    title: "图例"
    titleFont.bold: true
    titleFont.pointSize: 14
    anchors.fill: parent
    antialiasing: true

    legend.visible: true

    legend.font.family: "Courier"
    legend.font.pointSize: 12
    legend.font.bold: true
}

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

4. 设置标签颜色

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

ChartView {
    id: chartView
    title: "图例"
    titleFont.bold: true
    titleFont.pointSize: 14
    anchors.fill: parent
    antialiasing: true

    legend.visible: true
    legend.labelColor: "#1296FF"
}

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

5. 设置标记形状

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

ChartView {
    id: chartView
    title: "图例"
    titleFont.bold: true
    titleFont.pointSize: 14
    anchors.fill: parent
    antialiasing: true

    legend.visible: true
    legend.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: chartView
    title: "图例"
    titleFont.bold: true
    titleFont.pointSize: 14
    anchors.fill: parent
    antialiasing: true

    legend.visible: true
    legend.reverseMarkers: true
}

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

7. 设置图例位置

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

ChartView {
    id: chartView
    title: "图例"
    titleFont.bold: true
    titleFont.pointSize: 14
    anchors.fill: parent
    antialiasing: true

    legend.visible: true
    legend.alignment: Qt.AlignBottom
}

支持的位置包括：