一、例子
1、例子1:基本使用
import QtQuick 2.0
import QtCharts 2.2
Rectangle {
id: root
property string info: "info"
color: "#000C3C"
width: 600;
height: 400;
function setValue(list_y,txt)
{
root.info = txt;
spline.clear();
axisY.min = Math.min.apply(null,list_y)
axisY.max = Math.max.apply(null,list_y)
for(var i=0;i<list_y.length;i++)
{
spline.append(i,list_y[i]);
}
}
ChartView {
id:chartView
width: 0.66*parent.width
height: parent.height
backgroundColor: "#000C3C"
ValueAxis {
id: axisX
min: 0
max: 10
labelsVisible: false
gridVisible: false
visible: false
}
ValueAxis {
id: axisY
labelsColor: "white"
gridLineColor: "#3379B7"
titleText: "取值趋向"
}
LineSeries {
id:spline;
axisX: axisX
axisY: axisY
color:"red"
name: "参数分析"
width:1
pointsVisible: true
}
}
Text {
id: text
color: "white"
font.pixelSize: 15;
anchors.left: chartView.right
width: 0.34*parent.width
height: parent.height
text: root.info
wrapMode: Text.Wrap
verticalAlignment:Text.AlignVCenter
// Component.onCompleted: {
// text.text = "参数名:xxx\n经分析2000.01.01~2020.01.01的数据,
//发现参数取值总体呈现上升趋势,出厂阈值为100~200,实际阈值为150~180,
//最大取值:190,最小取值:129,最可能取值:148\n2020.05.01";
// }
}
}
2、例子2:缩放等
import QtQuick 2.0
import QtCharts 2.2
Rectangle {
id: root
property string info: "info"
color: "green"
width: 600;
height: 400;
MouseArea {
hoverEnabled: true
anchors.fill: parent;
onClicked: {
console.log("MouseArea")
}
propagateComposedEvents: true
onPressed: {
mouse.accpted = false
}
}
ChartView {
id:chartView
title: "XXX数据源"
antialiasing: true
backgroundColor: "#9917719b"
titleColor: "#ccffffff"
titleFont.bold: true
titleFont.family: "方正粗倩_GBK"
titleFont.pointSize: 15
anchors.centerIn: parent;
// width: 200;
// height: 200;
anchors.fill: parent
LineSeries {
name: "LineSeries"
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 }
onHovered: {
console.log("LineSeries")
}
}
MouseArea{
id:mouseArea
anchors.fill: parent
property int currentX:0
property int currentY: 0
onWheel: {//图形缩放
if(wheel.angleDelta.y>0){
chartView.zoom(1.1)
chartView.scrollRight(40)
}
else{
chartView.zoom(0.9)
}
}
onPressed: {//获取点击时位置
mouseArea.cursorShape = Qt.ClosedHandCursor
currentX = mouse.x
currentY = mouse.y
}
onReleased: {
mouseArea.cursorShape = Qt.ArrowCursorArrowCursor
}
onPositionChanged:{//拖拽功能实现
var moveX = mouse.x-currentX
var moveY = mouse.y-currentY
currentX = mouse.x
currentY = mouse.y
chartView.scrollLeft(moveX)
chartView.scrollUp(moveY)
}
}
}
}
3、添加标记实时更新
import QtQuick 2.0
import QtQuick.Layouts 1.15
import QtCharts 2.15
ChartView {
id: id_chart
width: 500;
height: 400
ValueAxis {
id: id_baseAxisX
tickCount: 11
labelsVisible: false
gridLineColor: /*"#B5C2B9"*/"gray"
lineVisible: false //突出的小段线不可见
min: 0
max: 1000
tickInterval: 1
}
ValueAxis {
id: id_baseAxisY
tickCount: 11
labelsVisible: false
gridLineColor: /*"#B5C2B9"*/"gray"
lineVisible: false
min: 0;
max: 80
}
LineSeries {
id:testLine
name: "LineSeries"
axisX: id_baseAxisX
axisY: id_baseAxisY
XYPoint { x: 0; y: 0 }
XYPoint { x: 110; y: 21 }
XYPoint { x: 190; y: 33 }
XYPoint { x: 210; y: 21 }
XYPoint { x: 290; y: 49 }
XYPoint { x: 340; y: 30 }
XYPoint { x: 410; y: 33 }
}
Rectangle {
id: rect
width: 10
height: 10
radius: 5
color: "red"
}
Timer {
interval: 1000
repeat: true
running: true
onTriggered: {
var p = id_chart.mapToPosition(testLine.at(3), testLine)
rect.x = p.x-rect.width/2
rect.y = p.y-rect.height/2
}
}
}
二、相关继承图
①、视图
②、图形系列
③、坐标轴
PS:
1、问题:在QML里加入了ChartView运行程序崩溃,将main.cpp里的QGuiApplication改成QApplication。
2、问题:使用QValueAxis时,报错:error: expected class-name,在开头加上QT_CHARTS_USE_NAMESPACE:
3、触摸屏的使用:PinchArea
https://stackoverflow.com/questions/50050391/how-to-set-zoom-origin-for-a-qml-chart-view
4、设置绘制区域
id_chart.plotArea = Qt.rect(id_chart.x,id_chart.y,id_chart.width,id_chart.height)
这个函数有个bug,需要重新设置宽度或高度,才会触发自绘,相关见官方:https://bugreports.qt.io/browse/QTBUG-95870
5、在C++中访问ChartView的线
①、方法1:通过查找chartview对象然后调用函数
QObject* chartview = viewer.rootObject()->findChild<QObject*>("myChartView"); //points to chartview object from QML
QAbstractSeries* series; //will point to PieSeries or LineSeries in ChartView once invokeMethod returns it
QMetaObject::invokeMethod(chartview, "series", Qt::AutoConnection, Q_RETURN_ARG(QAbstractSeries*, series), Q_ARG(int, 0)); //Get first series in ChartView; series method expect an integer
②、方法2:在C++中设置函数接口,在QML中调用传入line对象
//C++
Q_INVOKABLE void bindLine(QtCharts::QAbstractSeries* line)
{
QtCharts::QLineSeries* s = static_case<QtCharts::QLineSeries>(line);
QVector<QPointf> pts;
//add points to pts
s.replace(pts);
}
//QML
LineSeries {
id: line
Component.onComplect {
bindLine(line);
}
}
6、动态创建线
接口:ChartView.createSeries
7、为线添加点时,是按照x从小到大绘制的,如果某个点的x值比前一个点的x大,则此点被忽略
import QtQuick 2.0
import QtQuick.Layouts 1.15
import QtCharts 2.15
ChartView {
id: id_chart
width: 500;
height: 400
ValueAxis {
id: id_baseAxisX
tickCount: 11
labelsVisible: false
gridLineColor: /*"#B5C2B9"*/"gray"
lineVisible: false //突出的小段线不可见
min: 0
max: 1000
tickInterval: 1
}
ValueAxis {
id: id_baseAxisY
tickCount: 11
labelsVisible: false
gridLineColor: /*"#B5C2B9"*/"gray"
lineVisible: false
min: 0;
max: 80
}
ScatterSeries {
id: scatter1
name: "Scatter1"
axisX: id_baseAxisX
axisY: id_baseAxisY
XYPoint { x: 15; y: 15 }
XYPoint { x: 115; y: 15 }
XYPoint { x: 20; y: 15 }//会被忽略
}
}
如果不指定y轴,则效果是:
8、chart坐标系和qml坐标系的转换
/*
*描述:根据chart坐标系上的一个点转化为chart所在的qt坐标系点
*参数1:[NULL] 参数2:[NULL]
*返回:NULL
*作者:zhuxy
*/
function getQMLPositionFromChart(chartPoint)
{
console.assert(id_chart.count>0, "chart series count is 0");
return id_chart.mapToPosition(chartPoint, id_chart.series(0));
}
/*
*描述:根据qt坐标系点转化为chart所在的坐标系点
*参数1:[NULL] 参数2:[NULL]
*返回:NULL
*作者:zhuxy
*/
function getChartPositionFromQML(qmlPoint)
{
console.assert(id_chart.count>0, "chart series count is 0");
return id_chart.mapToValue(qmlPoint, id_chart.series(0));
}
搜索
复制