QT charts 動態刷新曲線圖

前沿

         用vs+QT開發應用程序時，當需要顯示圖表時，使用QtCharts是不錯的選擇。QtCharts是Qt提供的圖表模塊，在Qt5.7以前只有商業版纔有QtCharts，但是從5.7開始，社區版也包含了QtCharts。QtCharts可以很方便地繪製常見的折線圖、柱狀圖、餅圖等圖表。

概念介紹

1、QChart   

類管理圖表中的線、圖例和軸的圖形表示

2、QChartView

視圖組件。一般在窗口設計界面上使用QChartView時，先放置一個QGraphicsView組件，然後升級爲QChartView。

QChartView通過 setChart將QChart 添加爲顯示的圖表。

ui.charView->setChart(chart);

3、QLineSeries

序列是數據的表現形式。也就是我們需要展示的數據。一般通過 chart->addSeries，將數據添加到圖表。

當然，數據有多種類型，比如QSplineSeries等。

4、QValueAxis

座標軸。一般的圖表都有橫軸和縱軸兩個座標軸。

chart->addAxis(axisX, Qt::AlignBottom);設置座標軸與QChart   的關係。

serial->attachAxis(axisX); 設置數據與座標軸的關係。

 

創建工程

要注意勾選 Charts模塊，這樣創建的工程，纔會自動添加 QtCharts需要的頭文件和lib文件。

在窗口設計界面上使用QChartView時，先放置一個QGraphicsView組件，然後升級爲QChartView。

示例代碼

1、初始化Charts

Fidx = 0;
	FmaxX = 0;
	FmaxY = 0;
	FminX = 1000;
	FminY = 1000;

	//創建QChart 和 QLineSeries
	chart = new QChart;
	serial = new QLineSeries();
	serial->setPointsVisible(true);
	chart->removeAllSeries();
	serial->clear();
	
	//創建 座標軸
	QValueAxis* axisX = new QValueAxis;
	QValueAxis* axisY = new QValueAxis;
	axisX->setTitleText(bcq::str2qstr("時間")); //標題
	axisY->setTitleText(bcq::str2qstr("y")); //標題

	//關聯chart、axisX、serial
	chart->addAxis(axisX, Qt::AlignBottom);
	chart->addAxis(axisY, Qt::AlignLeft);

	chart->addSeries(serial);
	serial->attachAxis(axisX);
	serial->attachAxis(axisY);

	chart->setTitle(bcq::str2qstr("test"));
	chart->legend()->hide();// clear up bar
	chart->setAnimationOptions(QChart::SeriesAnimations);

	ui.charView->setChart(chart);
	ui.charView->setRenderHint(QPainter::Antialiasing);

	chart->axisX()->setMin(0);
	chart->axisX()->setMax(1);

	chart->axisY()->setMin(175);
	chart->axisY()->setMax(225);

2、通過信號槽，動態添加需要顯示的數據

//最多顯示100個
	int count = serial->points().size();
	if (count >100)
	{
		serial->remove(0);
	}

	//改變座標軸的範圍
	chart->axisX()->setMin(FmaxX-100);
	chart->axisX()->setMax(FmaxX);
	//chart->axisY()->setMin(FminY);
	//chart->axisY()->setMax(FmaxY);

	//添加數據到serial
	serial->append(QPointF(x, y));