QtCharts绘制动态图——较简单的方法(以加速度信息为例)

QtCharts绘制动态图方法

写在前面：
本周由于项目需要，涉及使用Qt来绘制从下位机发送来的加速度动态波形图，经过两天的摸索，找到一种简单的实现方法（对比网上现有的方法）。
这两天探索过qcustomplot模块和Qtcharts模块，觉得还是Qtcharts模块好用，主要是方便。本文主要介绍如何使用QT自带的QtCharts模块绘制动态图，如下图：

第一步：配置QtCharts模块

本文采用的开发环境VS2017+Qt5.11.2。
具体QtCharts模块配置，参考大佬：https://blog.csdn.net/weixin_43277501/article/details/100693872?utm_medium=distribute.pc_relevant.none-task-blog-baidujs-5
在这里将这个窗口，命名为Widget_4，并提升为QChart类

第二步：关键代码

1.头文件定义

private:
	QSplineSeries*series = new QSplineSeries();//定义QtChart需要用到的数据
	int indexlocation=0;//用于数据定位
	QList<QPointF>m_data;//数据点队列
	QValueAxis *axisY = new QValueAxis();//坐标轴y
	QValueAxis *axisX = new QValueAxis();//坐标轴x
	QChart *m_chart;//绘图窗口
private slots:
	void initQtChartSetup();//窗口初始化
	void AddSeries(QList<QPointF>& data);//添加数据

2.主函数初始化定义

ui.setupUi(this);
initQtChartSetup();//绘图窗初始化
m_data.append(QPointF(0, 0));//数据点初始化，添加第一个点（0,0）

3.void initQtChartSetup()函数定义

void dm01::initQtChartSetup()//第0个显示区域
{
	m_chart = new QChart();
	//设置x轴
	axisX = new QValueAxis;
	axisX->setRange(0, 150);//显示区域0-150的范围
	axisX->setMinorGridLineVisible(true);
	axisX->setTitleText("samepoints");//标题
	//设置y轴
	axisY = new QValueAxis;
	axisY->setRange(-350, 350);
	axisY->setMinorGridLineVisible(true);
	axisY->setTitleText("gyro_deg/s");//标题
	m_chart->addAxis(axisX, Qt::AlignBottom);
	m_chart->addAxis(axisY, Qt::AlignLeft);
	QList<QPointF>mydata;	
	mydata.append(QPointF(0, 0));//窗口绘制点初始化
	AddSeries(mydata);//将series与m_chart构建连接
	m_chart->setAxisX(axisX, series);
	m_chart->setAxisY(axisY, series);
	m_chart->legend()->hide();//不显示注释
	m_chart->setTheme(QChart::ChartThemeLight);//这个背景主题可以根据自己的喜好更换
	ui.widget_4->setChart(m_chart);//在我们定义的widget_4中建立窗口
}

4.void AddSeries(QList& data)函数定义

void dm01::AddSeries(QList<QPointF>&data)
{
	QSplineSeries *m_series = new QSplineSeries;//如果想使用折线，使用QplineSeries进行声明
	series=m_series;
	m_series->append(data);
	m_chart->addSeries(m_series);
	QPen splinePen;//设置曲线的颜色，red,blue.....设成自己喜欢的类型
	splinePen.setBrush(Qt::blue);
	splinePen.setColor(Qt::blue);
	m_series->setPen(splinePen);
}

5.绘图调用，本文采用的是串口更新调用（这里本质是将串口接收的加速度值绘制在图中，因此数据更新也是采用加速度值变化进行更新的），有些文章采用定时器进行数据刷新也可以，只是把这里的函数放到定时器更新的函数中去就行

//--------------绘制第1条曲线-----------------------
	if (indexlocation < 150)//数据不满150个
	{
		m_data.append(QPointF(indexlocation, acc_x_real));
		indexlocation++;					
		series->replace(m_data);//替换数据
	}
	else//数据大于150个,数组前移一个，尾部加1
	{
		QList<QPointF>newdata;
		for (int i = 0; i < indexlocation - 1; i++)
		{
			newdata.append(QPointF(i,m_data.at(i+1).y()));
		}
		newdata.append(QPointF(indexlocation,acc_x_real));
		series->replace(newdata);//替换数据
		m_data = newdata;
	}

[1]https://blog.csdn.net/weixin_43277501/article/details/100693872?utm_medium=distribute.pc_relevant.none-task-blog-baidujs-5