QML之QtCharts模块

最新推荐文章于 2024-09-26 08:32:10 发布
最新推荐文章于 2024-09-26 08:32:10 发布
阅读量5.9k 收藏 41
点赞数 7
分类专栏： Qt 文章标签： Qt QML QCharts QtQuick
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/RGBMarco/article/details/80225898
版权

Qt有QtCharts模块，主要针对能够快速的绘制出各种类型的表格,QtCharts主要包含的表格有:
1.PieSeries(饼状图)
2.LineSeries(折线图)
3.SplineSeries(曲线图)
4.ScatterSeries(散点图)
5.BarSeries(条状图)
6.StackedBarSeries(层叠条状图)
7.PercentBarSeries(百分比条状图)
8.HorizontalBarSeries(水平条状图)
9.HorizontalStackedBarSeries(水平层叠条状图)
10.HorizontalPercentBarSeries(水平百分比条状图)
下面一一做些小例子:

1.PieSeries(饼状图)

import QtQuick 2.0
import QtCharts 2.0
Item {
    width:400
    height:400
    ChartView {
        id:chart
        title:"对各编程语言掌握程度"
        anchors.fill:parent
        legend.alignment:Qt.AlignBottom     //图表样例底部居中
        antialiasing:true           //是否抗锯齿
        PieSeries {
            id:pieSeries
            PieSlice {label:"Go";value:13.5;color:"red"}
            PieSlice {label:"Java"; value:10.9;color:"yellow"}
            PieSlice {label:"Matlab"; value:8.6;color:"blue"}
            PieSlice {label:"PHP"; value:8.2;color:"cyan"}
            PieSlice {label:"JS"; value:6.8;color:"black"}
        }
    }
    Component.onCompleted: {
        pieSeries.append("C++",52.0)            //动态增加Label为”C++"的元素
        pieSeries.find("Go").exploded = true;   //使带“Go"Lable的元素暴露
    }
}

运行

这里写图片描述

2.LineSeries(折线图)

import QtQuick 2.0
import QtCharts 2.0

Item {
    width:300
    height:300
    ChartView {
        title:"折线图"
        id:chart
        anchors.fill:parent
        antialiasing:true
        legend.alignment:Qt.AlignBottom
        LineSeries {
            name:"学生"
            id:line
            XYPoint {x:0;y:0}
            XYPoint {x:1.1;y:2.1}
            XYPoint {x:1.9;y:3.3}
            XYPoint {x:2.1;y:2.1}
            XYPoint {x:2.9;y:4.9}
            XYPoint {x:3.4;y:3.0}
            XYPoint {x:4.1;y:3.3}
        }
    }
    Component.onCompleted: {
    }
}

这里写图片描述

3.SplineSeries(曲线图)

import QtQuick 2.0
import QtCharts 2.0

Item {
    id:root
    width:400
    height:400
    ChartView {
        title:"曲线图"
        antialiasing:true
        legend.alignment:Qt.AlignTop
        anchors.fill:parent
        SplineSeries {
            name:"学生"
            XYPoint{x:0.0;y:0.0}
            XYPoint{x:0.12;y:0.4}
            XYPoint{x:0.3;y:0.7}
            XYPoint{x:0.25;y:0.66}
            XYPoint{x:0.4;y:0.83}
            XYPoint{x:0.6;y:0.52}
            XYPoint{x:0.7;y:0.35}
        }
    }
}

这里写图片描述

4.ScatterSeries(散点图)

import QtQuick 2.0
import QtCharts 2.0

Item {
    width:400
    height:400
    ChartView {
        title:"散点图"
        anchors.fill:parent
        antialiasing:true
        ValueAxis {
            id:valueAx
            min:1998
            tickCount:9
            max:2006
            labelFormat:"%d"
        }
        ScatterSeries {
            axisX:valueAx
            id:scatter1
            name:"散点分布"
            XYPoint {x:1998;y:2}
            XYPoint {x:1999;y:1.5}
            XYPoint {x:2000;y:2.3}
            XYPoint {x:2001;y:2.2}
            XYPoint {x:2002;y:2.4}
            XYPoint {x:2003;y:3.1}
            XYPoint {x:2004;y:1.0}
            XYPoint {x:2005;y:3.5}
            XYPoint {x:2006;y:2.1}
        }
    }
}

这里写图片描述

5.AreaSeries(区域图)

import QtQuick 2.0
import QtCharts 2.0

Item {
    width:400
    height:400
    ChartView {
        title:"区域图"
        antialiasing:true
        legend.alignment:Qt.AlignTop
        anchors.fill:parent
        ValueAxis {
            id:valueAxis
            min:2000
            max:2011
            tickCount:12
            labelFormat:"%.0f"
        }
        AreaSeries {
            name:"俄罗斯"
            axisX:valueAxis
            upperSeries:LineSeries {
                XYPoint {x:2000;y:1}
                XYPoint {x:2001;y:1}
                XYPoint {x:2002;y:1}
                XYPoint {x:2003;y:1}
                XYPoint {x:2004;y:0}
                XYPoint {x:2005;y:0}
                XYPoint {x:2006;y:1}
                XYPoint {x:2007;y:1}
                XYPoint {x:2008;y:4}
                XYPoint {x:2009;y:3}
                XYPoint {x:2010;y:2}
                XYPoint {x:2011;y:1}
            }
        }
    }
}

这里写图片描述

6.BarSeries(条状图)

import QtQuick 2.0
import QtCharts 2.0

Item {
    width:400
    height:400
    ChartView {
        title:"条状图"
        anchors.fill:parent
        antialiasing:true
        legend.alignment:Qt.AlignBottom
        BarSeries {
            axisX:BarCategoryAxis{categories:["2007","2008","2009","2010","2011","2012"]}
            id:barseries
            BarSet {label:"Bob";values:[2,2,3,4,5,6]}
            BarSet {label:"Susan";values:[2,1,2,4,1,7]}
            BarSet {label:"James";values:[2,5,8,13,5,8]}
        }
    }
}

这里写图片描述

7.StackedBarSeries(层叠条状图)

import QtQuick 2.0
import QtCharts 2.0

Item {
    width:400
    height:400
    ChartView {
        id:chart
        title:"层叠条状图"
        antialiasing:true
        legend.alignment:Qt.AlignBottom
        anchors.fill:parent
        StackedBarSeries {
            axisX:BarCategoryAxis {categories:["2007","2008","2009","2010","2011","2012"]}
            BarSet {label:"Bob";values:[2,2,3,4,5,6]}
            BarSet {label:"Susan";values:[5,1,2,4,1,7]}
            BarSet {label:"James";values:[3,5,8,13,5,8]}
        }
    }
}`

这里写图片描述

8.PercentBarSeries(百分比条状图)

import QtQuick 2.0
import QtCharts 2.0

Item {
    width:400
    height:400
    ChartView {
        id:chart
        anchors.fill:parent
        antialiasing:true
        title:"百分比条状图"
        legend.alignment:Qt.AlignTop
        PercentBarSeries {
            axisX:BarCategoryAxis{categories:{["2007","2008","2009","2010","2011","2012"]}}
            BarSet{label:"Bob";values:[2,2,3,4,5,6]}
            BarSet{label:"Susan";values:[5,1,2,4,1,7]}
            BarSet{label:"James";values:[3,5,8,13,5,8]}
        }
    }
}

这里写图片描述

9.HorizontalBarSeries(水平条状图)

import QtQuick 2.0
import QtCharts 2.0

Item {
    width:400
    height:400
    ChartView {
        title:"水平条状图"
        anchors.fill:parent
        antialiasing:true
        legend.alignment:Qt.AlignBottom
        HorizontalBarSeries {
            axisY:BarCategoryAxis{categories:{["2007","2008","2009","2010","2011","2012"]}}
            BarSet{label:"Bob";values:[2,2,3,4,5,6]}
            BarSet{label:"Susan";values:[5,1,2,4,1,7]}
            BarSet{label:"James";values:[3,5,8,13,5,8]}
        }
    }
}

这里写图片描述

10.HorizontalStackedBarSeries(水平层叠条状图)

import QtQuick 2.0
import QtCharts 2.0

Item {
    width:400
    height:400
    ChartView {
        id:chart
        title:"水平层叠图"
        anchors.fill:parent
        antialiasing:true
        legend.alignment:Qt.AlignBottom
        HorizontalStackedBarSeries {
            axisX:BarCategoryAxis{categories:{["2007","2008","2009","2010","2011","2012"]}}
            BarSet{label:"Bob";values:[2,2,3,4,5,6]}
            BarSet{label:"Susan";values:[5,1,2,4,1,7]}
            BarSet{label:"James";values:[3,5,8,13,5,8]}
        }
    }
}

这里写图片描述

11.HorizontalPercentBarSeries(水平百分比条状图)

import QtQuick 2.0
import QtCharts 2.0

Item {
    width:400
    height:400
    ChartView {
        title:"层叠水平百分比条状图"
        anchors.fill:parent
        antialiasing:true
        legend.alignment:Qt.AlignBottom
        HorizontalPercentBarSeries {
            axisY:BarCategoryAxis{categories:{["2007","2008","2009","2010","2011","2012"]}}
            BarSet{label:"Bob";values:[2,2,3,4,5,6]}
            BarSet{label:"Susan";values:[5,1,2,4,1,7]}
            BarSet{label:"James";values:[3,5,8,13,5,8]}
        }
    }
}

这里写图片描述

综合:

“import QtQuick 2.0
import QtCharts 2.0

Item {
width:800
height:700
Row {
id:row1
anchors.left:parent.left
anchors.leftMargin:4
ChartView {
id:pie
antialiasing:true
title:”饼状图”
width:200
height:200
legend.alignment:Qt.AlignTop
PieSeries {
holeSize:0.5
PieSlice {label:”C++”;value:30.0}
PieSlice {label:”Java”;value:45.0}
PieSlice {label:”C#”;value:30.0}
}
}

    ChartView {
        title:"折线图"
        legend.alignment:Qt.AlignTop
        antialiasing:true
        width:200
        height:200
        LineSeries {
            XYPoint {x:0;y:0}
            XYPoint {x:1;y:0.5}
            XYPoint {x:2.0;y:0.6}
            XYPoint {x:2.3;y:2.0}
            XYPoint {x:3.0;y:1.5}
        }
    }

    ChartView {
        title:"曲线图"
        legend.alignment:Qt.AlignTop
        antialiasing:true
        width:200
        height:200
        SplineSeries {
            XYPoint {x:0.0;y:0.3}
            XYPoint {x:0.3;y:1.3}
            XYPoint {x:0.34;y:1.5}
            XYPoint {x:0.62;y:4.5}
            XYPoint {x:0.7;y:2.1}
        }
    }

    ChartView {
        title:"区域图"
        width:200
        height:200
        antialiasing:true
        AreaSeries {
            upperSeries:LineSeries {
                XYPoint {x:0;y:0}
                XYPoint {x:1;y:3}
                XYPoint {x:4;y:3}
                XYPoint {x:5;y:0}
            }
        }
    }

}
Row {
    anchors.top:row1.bottom
    id:row2
    ChartView {
        title:"散点图"
        width:200
        height:200
        ValueAxis {
            id:valueAxis
            min:2007
            max:2012
            tickCount:6
            labelFormat:"%d"
        }
        ScatterSeries {
            axisX:valueAxis
            XYPoint {x:2007;y:0.5}
            XYPoint {x:2008;y:0.7}
            XYPoint {x:2009;y:0.9}
            XYPoint {x:2010;y:1.3}
            XYPoint {x:2011;y:1.5}
            XYPoint {x:2012;y:3.1}
        }
    }
    ChartView {
        title:"条状图"
        width:200
        height:200
        BarSeries {
            axisX:BarCategoryAxis{categories:["2007","2008","2009","2010","2011","2012"]}
            BarSet{label:"中国";values:[2,2,3,4,5,6]}
            BarSet{label:"美国";values:[3,4,5,6,7,1]}
            BarSet{label:"俄国";values:[2,5,6,7,1,2]}
        }
    }

    ChartView {
        title:"层叠条状图"
        width:200
        height:200
        StackedBarSeries {
            axisX:BarCategoryAxis{categories:["2007","2008","2009","2010","2011","2012"]}
            BarSet {label:"美国";values:[2,2,3,4,5,6]}
            BarSet {label:"中国";values:[3,4,5,6,7,1]}
            BarSet {label:"日本";values:[4,5,6,1,2,3]}
        }
    }

    ChartView {
        title:"百分比条状图"
        width:200
        height:200
        PercentBarSeries {
            axisX:BarCategoryAxis{categories:["2007","2008","2009","2010","2011","2012"]}
            BarSet {label:"美国";values:[2,3,4,5,6,7]}
            BarSet {label:"中国";values:[3,4,5,1,2,3]}
            BarSet {label:"日本";values:[4,5,6,1,2,3]}
        }
    }
}
Row {
    anchors.top:row2.bottom
    id:row3
    ChartView {
        title:"水平条状图"
        width:200
        height:200
        antialiasing:true
        HorizontalBarSeries {
            axisY:BarCategoryAxis{categories:["2007","2008","2009","2010","2011","2012"]}
            BarSet {label:"美国";values:[2,3,4,5,6,7]}
            BarSet {label:"中国";values:[2,4,2,1,2,4]}
            BarSet {label:"俄国";values:[3,4,1,2,4,5]}
        }
    }

    ChartView {
        title:"水平层叠条状图"
        antialiasing:true
        width:200
        height:200
        HorizontalStackedBarSeries {
            axisY:BarCategoryAxis{categories:["2007","2008","2009","2010","2011","2012"]}
            BarSet {label:"美国";values:[2,3,2,3,5,6]}
            BarSet {label:"中国";values:[2,5,7,1,2,3]}
            BarSet {label:"俄国";values:[4,5,1,2,3,1]}
        }
    }
    ChartView {
        title:"水平百分比条状图"
        antialiasing:true
        width:200
        height:200
        HorizontalPercentBarSeries {
            axisY:BarCategoryAxis{categories:["2012","2013","2014","2015","2016"]}
            BarSet {label:"美国";values:[2,3,2,1,2,4]}
            BarSet {label:"中国";values:[3,4,5,1,2,3]}
            BarSet {label:"俄国";values:[2,5,6,1,2,3]}
        }
    }
}

}`

“`

这里写图片描述

RGBMarco
关注
专栏目录
qt qml qchart 图表组件
02-05
charts.js 的qml封装，支持各种图表类型：柱形图、饼形图、环形图、折线图、极坐标图、雷达图。自带动画、样式精美，使用方便，代码量小。快抢啊。感觉自己快成王婆了 http://surfsky.cnblogs.com
QML 折线图 （缩放 拖动 截图）
10-09
使用QML里面的ChartView控件画折线图，实现了折线图的缩放 左右移动 抓图等功能
ChartJs2QML 开源项目使用教程
最新发布
gitblog_01064的博客
09-26 315
ChartJs2QML 开源项目使用教程 ChartJs2QML QML adaptor for Chart.js 2.x that supports startup animations and tooltips 项目地址: h...
QML中绘制LineSeries(折线图)
liushiyi3083862599的博客
03-20 1184
QtCharts是Qt提供的一个专门用于绘制图表的模块，它支持多种类型的图表绘制，包括折线图、饼状图、曲线图等。为了在QML中使用QtCharts，首先需要在项目的.pro文件中添加对QtCharts模块的依赖，即添加。通过修改坐标轴样式，例如字体、颜色、显示范围等，可以自定义折线图的外观。此外，还可以利用定时器动态更新图表的数据，以实现动态折线图的效果。接着，在QML文件中包含必要的头文件并声明命名空间。二.具体的使用示例，可以参考以下代码框架。在QML中绘制折线图，通常使用。接下来，我们可以通过创建。
QML之动态Charts（一）
m0_51390725的博客
12-28 715
QML中Charts的简单使用，平移波+音乐频谱
79.qt qml-如何在QML中使用QCustomPlot之曲线/折线示例(已适配黑白风格)
抵抗时间扭曲，坚持做一件有意义的事
03-29 3021
但我们添加完线段后,只需要重新更新下XY轴,然后在调用qcp.replot()重新渲染,图就出来了.所以感兴趣的可以自己去优化一下caurve曲线点的生成. 不过如果时间短的话, 还是建议尽量用折线。剩下的交互篇,本人就暂时没时间提供了,有经验的可以自己添加标记等操作。所以本章我们需要实现在QML中如何使用。我们学习了 qcp简单使用。
Qt Charts QML下的图形绘制方法
weixin_41922484的博客
02-21 7061
目录一、参考二、简介三、静态绘制曲线图四、动态绘制曲线图和散点图五、如何确定哪些QML对象属性可以被JS调用六、如何确定某些QML属性赋值的格式 一、参考 https://doc.qt.io/qt-5/qtcharts-index.html 二、简介 Qt Charts 提供了一系列使用图表功能的简单方法。它使用Qt Graphics View Framework 图形视图框架，因此可以很容易集成到用户界面。可以使用Qt Charts作为QWidgets, QGraphicsWidget, 或者 Q.
Qt开发之QtCharts柱形图绘制
03-23
如果使用Qt Creator，可以通过新建项目时选择"QML应用程序"，并在项目设置中启用QtCharts模块。 3. **创建QtCharts项目** 创建一个新的Qt项目，并在.pro文件中包含QtCharts模块，例如： ```cpp QT += charts ``...
QTCharts源代码
10-10
QTCharts是Qt框架的一个扩展模块，它提供了丰富的图表组件，用于在Qt应用程序中展示数据可视化。这个源代码包是为那些需要在Qt环境下开发具有图形界面，并且希望展示复杂数据趋势或统计信息的开发者准备的。QtCharts...
QtCharts module.zip
03-28
在本篇中，我们将深入探讨QtCharts模块的特性、使用方法以及如何在实际项目中集成和应用。 **1. QtCharts模块介绍** QtCharts是Qt5的一个模块，它提供了一个面向对象的API，用于创建复杂的图表和图形。这个模块...
QT qtdatavis3d 5.7 模块 + qtcharts
04-06
`qtcharts-dev.zip` 则可能是qtcharts模块的开发包，包含了头文件和库文件，供开发者在项目中链接和使用。 总的来说，QT qtdatavis3d 5.7 模块与 qtcharts 提供了丰富的数据可视化能力，无论是在2D还是3D领域，都能...
qt qml c++ 折线图
03-28
如果使用GraphView，首先确保在项目中包含对应的模块，如`import QtQuick.Controls 2.x`。然后，你可以声明一个GraphView并设置其属性，例如X轴和Y轴的范围、数据源等。 ```qml GraphView { id: lineGraph ...
QML的Chart View记录
zjl_yujizhong的博客
12-08 4036
一、柱状图 1、X、Y轴网格线设置（网格线属于 基础继承属性，基本都有gridVisible; axisX: BarCategoryAxis { gridVisible: false; // 网格线隐藏 gridLineColor: "gray"; // 网格线颜色，gray为灰色 categories: ["总数", "投入", "产出", "欠数"]; // X轴标签枚举 labelsColor: "white" // X轴标签显示颜色 ...
QML在Charts中动态修改Series（LineSeries, ScatterSeries, ，SplineSeries）的值
木牛的博客
02-19 980
注意：在Series中修改数据的值比remove后再insert效率要高很多，特别是数据量特别大的时候，remove的时候很可能界面就卡死了，因此在动态修改Series值首选替换数据值！中数据的值，通过查看帮助文档，发现QML Charts中关于XYSeries的方法的说明如下图，共7个方法，其中数据替换的方法replace只写了一种通过点的值进行替换的方法。因此根据数据index动态替换Series的数据的方法。项目需要对Charts中的图表动态的修改。
[QML开发笔记]-QML Chart 动态绘制
Qt自定义控件及应用开发
04-18 2583
####QMLChart 动态绘制 KdmChartView1.qml import QtQuick 2.0 import QtCharts 2.13 ChartView { id: view title: "动态绘制" antialiasing: true backgroundColor: "teal" animationOptions: ChartView.SeriesAnimations legend.visible: false .
Qt qml 下使QtCharts
DreamLife
05-06 1758
欢迎来到我的博客，希望这篇文章对你有所帮助，如果觉得不错，请点赞搜藏哈。 文章目录Qt Qml 下使用QtCharts1.1 引入文档1.2 在pro中包含 charts1.3 运行官方例子1.4 修改main文件1.5 手动拷贝 相关文件 Qt Qml 下使用QtCharts 先说场景，项目中需要用到QtCharts，所以就得搞一下了，最简单的方式还是直接看Qt的帮助文档。 1.1 引入文档 根据帮助文档显示，我们只需要引入对应的包就可以了，在项目中引入QtCharts模块，如下 import QtCh.
Qt Chart在Qml中初体验
LHRui_1的博客
11-08 5083
Chart之初体验Qml与QCustomPlot准备使用实时曲线Qml中获取数据ChartView的Scroll函数让曲线移动起来坐标轴Range动起来坐标动起来，然后replaceQml的坑 Qml与QCustomPlot 最近想在Qml中实现绘制实时曲线，一开始想到了好用且强大的[*QCustomPlot][1]，但伤心的发现其在Qml中无法使用。因为其是基于QWidget开发而来的第三方库，...
qml 动态折线图
C__Dull的博客
07-04 773
qml 动态折线图绘制 ChartView { legend.visible: false // 设置图例不可见 antialiasing: true // 抗锯齿 margins.left: 0 margins.right: 0 margins.top: 0 margins.bottom: 0 anchors.fill: parent ValueAxis { // X轴 id: x_axis max: 10 min: 0 visible: false
qt qml LineSeries画实时动态折线图
zjgo007的专栏
05-15 7113
当程序动态的获取数据，例如某个固定时间获取远端数据并需要实时在折线图中进行显示时，可使用如下方法，我设置了一个计时器TImer，每秒钟往图表中添加一个数据，并动态更新坐标轴数值：
qml ValueAxis
03-27
qml ValueAxis是QML中用于显示数值轴的组件。它可以在ChartView中使用，用于显示曲线图或折线图的数值范围。ValueAxis可以根据提供的数据自动计算并显示刻度线和标签。 以下是一个使用qml ValueAxis的示例代码： ```qml import QtQuick 2.15 import QtCharts 2.15 ChartView { width: 400 height: 300 ValueAxis { id: valueAxis min: 0 max: 100 tickCount: 5 } LineSeries { XYPoint { x: 0; y: 10 } XYPoint { x: 1; y: 30 } XYPoint { x: 2; y: 50 } XYPoint { x: 3; y: 70 } XYPoint { x: 4; y: 90 } axisX: valueAxis axisY: valueAxis } } ``` 在上面的示例中，我们创建了一个ChartView，并在其中添加了一个ValueAxis和一个LineSeries。ValueAxis的min属性设置最小值为0，max属性设置最大值为100，tickCount属性设置刻度线的数量为5。LineSeries中的XYPoint表示曲线上的点的坐标，axisX和axisY属性分别设置X轴和Y轴为刚刚创建的ValueAxis。 这样，当我们运行这段代码时，就会在ChartView中显示出一个数值范围为0到100的曲线图，并且有5个刻度线和标签。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值