QtCharts 时间坐标轴以及利用定时器动态绘制图形

注意！

文章已经进行修改，结构逻辑更加清晰，查看最新的文章和Demo资源请移步↓
新-QtCharts时间坐标轴，利用定时器动态绘制图
↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑

QtCharts 添加时间坐标轴

QtCharts坐标轴说明

QtCharts 的坐标轴主要有两种，一种是QValueAxis 另外一种就是我们需要的QDateTimeAxis
有时候我们需要绘制与时间相关的数据，如与日期相关的天气数据，或者是随分钟变化的传感器数据等，这样就会用到 QDateTimeAxis 坐标轴
目前网上的一些例子，以及QT自带的例子，基本都是和日期相关的数据，没有找到坐标轴是分钟、秒的案例。
踩了一些坑后，写下这篇文章，希望能够帮助到需要的人。

QtCharts初始化操作

如果将来要对x轴时间范围、或者是y轴的范围进行调整，建议在头文件中声明x轴

QDateTimeAxis *axisX_Time ;
QValueAxis *axisY_Data;//数据点

然后在折线图中初始化，绑定数据集，就完成了折线图的初始化

axisX_Time = new QDateTimeAxis(this);//时间轴
axisY_Data= new QValueAxis();//数据点

//QDateTimeAxis需要QDateTime的数值格式
QDateTime temp_StartTime(QDate(2000, 1, 1), QTime(0, 0, 0)); //前面是年月日，后面是小时、分钟、秒
QDateTime temp_EndTime(QDate(2000, 1, 1), QTime(0, 20, 0));//
axisX_Time->setTickCount(5);//设置显示的时间个数
axisX_Time->setRange(temp_StartTime, temp_EndTime);//设置显示范围

//坐标轴显示方式: 分钟:秒
axisX_Time->setFormat("mm:ss");//如果需要其他时间也可以进行修改

axisY_Data->setRange(0,200);
//最后绑定数据即可
dataSeries->attachAxis(axisX_Time);
dataSeries->attachAxis(axisY_Data);

• 这里有一个坑，就是关于QDateTime的，如果初始化输入QDate和QTime时间不正确，那么QDateTime也是错误的，并且不会报错；
• 比如QDate如果是(2000,0,1),不会提示错误，但是其实显示的数值会一直是错误的

根据定时器动态添加点

为了实现传感器数据随时间的变化，每秒进行绘制，需要添加一个定时器，设置1s的任务，往chart中添加一个数据。

添加一个定时器

    timeCount = 0;//在头文件中添加一个全局变量，记录秒数
	myTimer = new QTimer(this);
	connect(myTimer , SIGNAL(timeout()), this, SLOT(oneSecondAction()));//连接定时器时间到达响应的槽函数
	myTimer ->start(1000);//1000ms之行一次
	//定时器还有一些函数，可以时时间间隔更为精确

设置每秒的任务

//定期器启动后，1s执行一次的任务
void MyWidget::oneSecondAction() {
	//*******  每秒绘制折线图一次 *******
	addOnePointToChart(dataSeries, timeCount, addData);//addData来自于传感器赋值的数据
	timeCount++;//秒数+1
}

在chart上添加一个点

• 方法一，这是之前的一种方法，将秒数手动转为时分秒形式

//在折线图上添加一个点
//输入参数说明
//targetSeries：目标曲线集
//secondCount：秒数。即数据添加的横坐标
//y_value：数据的大小
void MyWidget::addOnePointToChart(QLineSeries *targetSeries, int secondCount, int y_value) {

	int second, hour, minute;
	second = secondCount; 
	MyHelper::changeTimeFromSecond(&hour, &minute, &second);//转换为标准的时分秒，保证QTime不会出错
	QDateTime temp_AddTimePos(QDate(2000, 1, 1), QTime(hour, minute, second));//生成一个坐标轴时间QDateTime

	targetSeries->append(temp_AddTimePos.toMSecsSinceEpoch(), y_value);

}

将秒数转换为时分秒的函数

	static void changeTimeFromSecond(int *hour, int *minute, int *second) {

		*hour = *second / 3600;
		*minute = (*second - *hour * 3600) / 60;
		*second -= *hour * 3600 + *minute * 60;
	}

• 方法二利用addSecs()函数更加简单

void MyWidget::addOnePointToChart(QLineSeries *targetSeries, int secondCount, int y_value) {

	QDateTime temp_AddTimePos(QDate(2000, 1, 1), QTime(0, 0, 0).addSecs(secondCount));//生成一个坐标轴时间QDateTime
	targetSeries->append(temp_AddTimePos.toMSecsSinceEpoch(), y_value);

}

如果坐标轴发现时间从分钟变成了小时，需要对坐标轴进行一下修改

//坐标轴显示方式: 小时:分钟:秒
axisX_Time->setFormat("hh:mm:ss");

其他

• 在尝试中发现这里的QTime设置时间分钟数不能超过60，如果要实现纯分:秒显示还需要探索（利用上面方法二已经可以完美解决）
• 因为项目的开发。这里还有一个QtCharts绘制动态心电图
• 还有一个根据传感器数据实时绘制心电图QtCharts绘制动态心电图[2]——利用队列进行实时绘制