QML中绘制LineSeries(折线图)

最新推荐文章于 2025-02-13 08:56:53 发布

士毅

最新推荐文章于 2025-02-13 08:56:53 发布

阅读量1.5k

点赞数 9

分类专栏： QML 基础文章标签： qml

本文链接：https://blog.csdn.net/liushiyi3083862599/article/details/136892009

版权

QML 基础专栏收录该内容

17 篇文章

订阅专栏

一.LineSeries(折线图)介绍

在QML中绘制折线图，通常使用QtCharts模块。

QtCharts是Qt提供的一个专门用于绘制图表的模块，它支持多种类型的图表绘制，包括折线图、饼状图、曲线图等。为了在QML中使用QtCharts，首先需要在项目的.pro文件中添加对QtCharts模块的依赖，即添加QT += charts。接着，在QML文件中包含必要的头文件并声明命名空间Qt。

接下来，我们可以通过创建LineSeries对象来定义数据系列，并通过ValueAxis对象来设置坐标轴。通过修改坐标轴样式，例如字体、颜色、显示范围等，可以自定义折线图的外观。此外，还可以利用定时器动态更新图表的数据，以实现动态折线图的效果。

二.具体的使用示例，可以参考以下代码框架

import QtQuick 2.12
import QtQuick.Window 2.12
import QtCharts 2.3

Window
{
    visible: true
    width: 640
    height: 480
    title: qsTr("Test Example")

    ChartView
    {
        id: chartView
        title: "折线图示例"
        antialiasing: true
        backgroundColor: Qt.rgba(0, 0, 1, 0.1)
        animationOptions: ChartView.SeriesAnimations
        animationDuration: 1
        anchors.fill: parent

        ValueAxis {
            id: x_axis
            min: 0
            max: 10
        }

        ValueAxis {
            id: y_axis
            min: 0
            max: 100
        }

        LineSeries {
            id: lineSeries
            axisX: x_axis
            axisY: y_axis
            //style:Qt.DotLine
        }
         Component.onCompleted: addSeries(lineSeries)
    }

    function addSeries(lineSeries )
    {
        lineSeries.append(0, 0);
        lineSeries.append(2, 90);
        lineSeries.append(4, 25);
        lineSeries.append(5, 95);
        lineSeries.append(6, 50);
        lineSeries.append(7, 90);
        lineSeries.append(10, 25);
    }
}

运行结果：