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

QML Charts组件之LineSeries、SplineSeries与ScatterSeries

news 2025/9/8 23:39:33

- 前言
- 相关系列
- 图表组件介绍
- - LineSeries（折线图）
  - SplineSeries（曲线图）
  - ScatterSeries（散点图）
- 代码示例详解
- - LineSeriesDemo.qml - 折线图示例
  - SplineSeriesDemo.qml - 曲线图示例
  - ScatterSeriesDemo.qml - 散点图示例
- 结语
- 工程下载
- 参考

前言

在QML应用中，通过ChartView和各种Series组件，我们可以轻松创建美观且功能完善的图表。本文将重点介绍三种基于XYSeries的图表类型：LineSeries（折线图）、SplineSeries（曲线图）和ScatterSeries（散点图），并结合代码示例说明它们的使用方法和特性。

图表组件介绍

LineSeries（折线图）

LineSeries是Qt Charts中最常用的图表类型之一，用于显示数据点之间的线性连接。它适合展示数据的趋势变化，特别适用于时间序列数据或连续数值的对比分析。LineSeries支持多种线条样式、颜色和宽度设置，可以满足不同场景的视觉需求。

主要特性：

支持多种线条样式（实线、虚线、点线等）
可自定义线条颜色、宽度和端点样式
支持数据点的交互操作

SplineSeries（曲线图）

SplineSeries是LineSeries的平滑版本，通过样条插值算法将数据点连接成平滑的曲线。这种图表类型特别适合展示数据的整体趋势，能够减少数据波动带来的视觉干扰，让用户更容易识别数据模式。

主要特性：

自动进行样条插值计算、生成平滑的曲线连接
保持与LineSeries相同的样式定制能力
适合展示连续数据的趋势

ScatterSeries（散点图）

ScatterSeries用于显示独立的数据点，不进行点与点之间的连接。这种图表类型适合展示数据的分布情况、相关性分析或离散数据的可视化。ScatterSeries支持多种标记形状和自定义图标。

主要特性：

支持多种标记形状（圆形、矩形、自定义图标形状）
可设置标记大小、颜色和边框
适合展示数据分布和相关性

代码示例详解

LineSeriesDemo.qml - 折线图示例

import QtQuick
import QtQuick.Layouts
import QtChartsRectangle {Layout.fillWidth: trueLayout.fillHeight: trueChartView {id: chartViewtitle: "折线图示例"titleFont.bold: truetitleFont.pointSize: 14anchors.fill: parentantialiasing: trueLineSeries {name: "line"XYPoint { x: 0; y: 0 }XYPoint { x: 1; y: 3 }XYPoint { x: 2; y: 5 }XYPoint { x: 3; y: 3 }XYPoint { x: 4; y: 8 }XYPoint { x: 5; y: 10 }//只需要一组 x、yaxisX: ValuesAxis {}axisY: ValuesAxis {}color: "#1296FF"capStyle: Qt.FlatCap  //Qt.SquareCap、Qt.RoundCapstyle: Qt.SolidLinewidth: 2}}
}

代码说明（LineSeries配置）：

name属性用于图例显示
通过XYPoint定义数据点，每个点包含x和y坐标
axisX和axisY使用ValuesAxis自动计算坐标轴范围
color设置线条颜色为蓝色
capStyle设置线条端点样式为平头
style设置为实线样式
width设置线条宽度为2像素

运行效果：

在这里插入图片描述

显示一条蓝色实线，连接6个数据点，形成上升趋势的折线图。

SplineSeriesDemo.qml - 曲线图示例

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: 5titleText: "X Title"}ValueAxis {id: valueAxisYmin: 0max: 10titleText: "Y Title"}SplineSeries {name: "spline"XYPoint { x: 0; y: 0 }XYPoint { x: 1; y: 3 }XYPoint { x: 2; y: 5 }XYPoint { x: 3; y: 3 }XYPoint { x: 4; y: 8 }XYPoint { x: 5; y: 10 }axisX: valueAxisXaxisY: valueAxisYcolor: "#1296FF"capStyle: Qt.FlatCap  //Qt.SquareCap、Qt.RoundCapstyle: Qt.DashLinewidth: 2}}
}

代码说明（SplineSeries配置）：

数据点与LineSeries相同，但会通过样条插值生成平滑曲线
使用自定义的坐标轴而非自动计算的ValuesAxis
style设置为虚线样式（Qt.DashLine）
其他样式属性与LineSeries保持一致

运行效果：

在这里插入图片描述

显示一条蓝色虚线，通过样条插值将6个数据点连接成平滑的曲线，X轴标题为"X Title"，Y轴标题为"Y Title"。

ScatterSeriesDemo.qml - 散点图示例

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: 5titleText: "X Title"}ValueAxis {id: valueAxisYmin: 0max: 10titleText: "Y Title"}ScatterSeries {name: "point"XYPoint { x: 0; y: 0 }XYPoint { x: 1; y: 3 }XYPoint { x: 2; y: 5 }XYPoint { x: 3; y: 3 }XYPoint { x: 4; y: 8 }XYPoint { x: 5; y: 10 }axisX: valueAxisXaxisY: valueAxisY//borderColor: "#FF0000"//borderWidth: 1//markerShape: ScatterSeries.MarkerShapeRectanglemarkerSize: 32brushFilename: ":/images/star.png"}}
}

代码说明（ScatterSeries配置）：

数据点定义方式与其他Series相同
markerSize设置标记大小为32像素
brushFilename指定自定义图标文件（星形图标）
注释掉的属性展示了其他可配置选项：
- borderColor：标记边框颜色
- borderWidth：边框宽度
- markerShape：标记形状（矩形、圆形等）

运行效果：

在这里插入图片描述