1. 程式人生 > 程式設計 >Qt圖形影象開發之曲線圖表庫QtChart編譯安裝詳細方法與使用例項

Qt圖形影象開發之曲線圖表庫QtChart編譯安裝詳細方法與使用例項

Qt曲線圖表庫QtChart簡介

Qt的線性繪圖控制元件有大名鼎鼎的Qwt,ChartDirector,小巧玲瓏的QCustomPlot,當然還有自家的QtChart。長久以來QtChart在Qt家族裡一直是收費的模組,只有商業版才可以使用,但Qt5.7之後將開放其許可權,可參見:Qt 5.7 亮瞎眼的更新。下面將介紹如何安裝QtChart並進行簡單的繪圖。

Qt曲線圖表庫QtChart下載

這裡用git下載QtChart,參考Qt Charts 5.7.0 安裝教程

Git地址:https://github.com/qtproject/qtcharts.git

git clone https://github.com/qtproject/qtcharts.git

Qt圖形影象開發之曲線圖表庫QtChart編譯安裝詳細方法與使用例項

大家也可以直接到https://github.com/qt/qtcharts這裡直接下載

下載完目錄是這樣的:

Qt圖形影象開發之曲線圖表庫QtChart編譯安裝詳細方法與使用例項

開始編譯前需要下載Perl:activePerl

直接下一步點到頭安裝。

安裝完成後需要重啟一下電腦或者手動啟用一下環境變數。

編譯QtChart庫

此時用Qt Creator載入qtcharts.pro

Qt圖形影象開發之曲線圖表庫QtChart編譯安裝詳細方法與使用例項

稍等片刻後:

Qt圖形影象開發之曲線圖表庫QtChart編譯安裝詳細方法與使用例項

此時在生成目錄下生成:

Qt圖形影象開發之曲線圖表庫QtChart編譯安裝詳細方法與使用例項

至此QtChart庫編譯成功

安裝QtChart庫

編譯結束後就可以進行安裝了

選擇Qt Creator專案欄 - 執行標籤 - 新增部署構建

Qt圖形影象開發之曲線圖表庫QtChart編譯安裝詳細方法與使用例項

這裡需要新增兩個部署,一個是QtChart的安裝,一個是QtChart文件的編譯。

如圖所示配置完後,點選執行

Qt圖形影象開發之曲線圖表庫QtChart編譯安裝詳細方法與使用例項

這時會有很多複製的資訊,它會把編譯好的dll和標頭檔案複製到Qt的安裝目錄下

Qt圖形影象開發之曲線圖表庫QtChart編譯安裝詳細方法與使用例項

Qt圖形影象開發之曲線圖表庫QtChart編譯安裝詳細方法與使用例項

開啟Qt目錄下的lib資料夾和include資料夾可以看到被複制過來的QtChart資訊。

這時,再看QtChart的生成目錄,比第一次編譯時多了一個doc資料夾

你只要把這個doc資料夾裡的qtcharts資料夾和qtcharts.qch檔案複製到Qt安裝目錄下的Docs資料夾內對應版本資料夾下即可

Qt圖形影象開發之曲線圖表庫QtChart編譯安裝詳細方法與使用例項

這時開啟Qt Assisant,搜QtChart,即可看到說明文件!

Qt圖形影象開發之曲線圖表庫QtChart編譯安裝詳細方法與使用例項

這時你的QtChart大部分已經配置完成。

QtChart使用例項

下面演示如何用Qt Creator的介面設計師建立一個QtChart,其他方法可見參考文獻。

首先新建一個Widget專案

使用一個Widget作為Chart的載體,在介面上放置一個Widget

Qt圖形影象開發之曲線圖表庫QtChart編譯安裝詳細方法與使用例項

右鍵點選這個widget,把這個Widget提升。

Qt圖形影象開發之曲線圖表庫QtChart編譯安裝詳細方法與使用例項

把這個Widget提升為QChartView

QtChart有兩類繪圖視窗容器,分別為QChart(QPolarChart)和QChartView,其區別官方文件說明為:

QChart is a QGraphicsWidget that you can show in a QGraphicsScene. It manages the graphical representation of different types of series and other chart related objects like legend and axes. If you simply want to show a chart in a layout,you can use the convenience class QChartView instead of QChart.

QChartView is a standalone widget that can display charts. It does not require separate QGraphicsScene to work. If you want to display a chart in your existing QGraphicsScene,you need to use the QChart (or QPolarChart) class instead.

因為這裡是單獨作為一個窗體放置,因此用QChartView

Qt圖形影象開發之曲線圖表庫QtChart編譯安裝詳細方法與使用例項

提升的類名為QChartView

標頭檔案也為QChartView ,Qt每個類都有個無後綴的同類名檔案,方便include

嘗試編譯一下程式會出現一個錯誤:

Qt圖形影象開發之曲線圖表庫QtChart編譯安裝詳細方法與使用例項

官方文件說明,使用QtChart還需要對pro檔案進行設定:

To create a simple application,start by creating a new Qt Gui Application project in Qt Creator and add this line to the .pro file of the project:

QT += charts

In the main.cpp file,include the module headers and declare namespace usage:

#include <QtCharts>

using namespace QtCharts;

其中,可以使用QT_CHARTS_USE_NAMESPACE替代using namespace QtCharts;

Qt圖形影象開發之曲線圖表庫QtChart編譯安裝詳細方法與使用例項

新增完所需要的內容,編譯還是發生錯誤,錯誤定位到ui_widget裡

Qt圖形影象開發之曲線圖表庫QtChart編譯安裝詳細方法與使用例項

前面說了,用到QtChart的地方需要包含#include <QtCharts>以及名稱空間using namespace QtCharts;(或者QT_CHARTS_USE_NAMESPACE替代using namespace QtCharts;)

但是ui_widget檔案是自動生成的,不能再此檔案裡進行修改,此檔案是包含在widget.h的一個叫Ui的名稱空間中,因此,可以把

#include <QtCharts>

QT_CHARTS_USE_NAMESPACE

放置在widget.h上:

#ifndef WIDGET_H
#define WIDGET_H
#include <QWidget>
namespace Ui {
class Widget;
}
class Widget : public QWidget
{
  Q_OBJECT
public:
  explicit Widget(QWidget *parent = 0);
  ~Widget();
private:
  Ui::Widget *ui;
};
#endif // WIDGET_H

此時在編譯即可:

Qt圖形影象開發之曲線圖表庫QtChart編譯安裝詳細方法與使用例項

在建構函式裡新增:

QLineSeries* line1 = new QLineSeries();
for(double x=0;x<10;x+=0.1)
{
  line1->append(x,sin(x));
}
QChart* c = new QChart();
c->addSeries(line1);
ui->chart->setChart(c);

效果如下:

Qt圖形影象開發之曲線圖表庫QtChart編譯安裝詳細方法與使用例項

總結

在使用介面設計師用QtChart時,需要在對應的介面標頭檔案上新增:

#include <QtCharts>

QT_CHARTS_USE_NAMESPACE

否則會發生編譯錯誤!

至此本文講解的Qt曲線圖表庫QtChart編譯安裝詳細步驟與使用例項就結束了,更多關於Qt曲線圖表庫QtChart相關知識請檢視下面的相關文章