? ?
目錄
1 QtCharts模塊
2 圖表的主要組成部分
2.1 QChartView的功能
2.2 序列
2.3 坐標軸
2.4 圖例
3 一個簡單的QChart繪圖程序
?? ?QtCharts是Qt提供的圖表模塊,在Qt5.7以前只有商業版才有Qt Charts,但是從Qt5.7開始,社區版本也包含了Qt Charts。Qt Charts可以很方便地繪制常見的折線圖、柱狀圖、餅圖等圖表。
1 QtCharts模塊
?? ??? ?Qt Charts模塊是一組易于使用的圖表組件,它基于Qt的Graphics View架構,其核心組件是QChartView和QChart。
?? ??? ?QChartView的父類是QGraphicsView,就是Graphics View架構中的視圖組件,所以,QChart?View是用于顯示圖表的視圖。
?? ??? ?QChart的繼承關系如圖9-1所示,可以看到,QChart是從QGraphicsItem繼承而來的,所以,QChart是一種圖形項。
?? ??? ?QPolarChart是用于繪制極坐標圖的圖表類,它從QChart繼承而來。
要在項目中使用QtCharts模塊,必須在項目的配置文件(.pro文件)中增加下面的一行語句:
Qt+=charts
?? ??? ?在需要使用QtCharts的類的頭文件或源程序文件中,要使用如下的包含語句:
?? ??? ?#include?<QtCharts>
?? ??? ?using namespace QtCharts;
?? ??? ?也可以使用宏定義:
?? ??? ?#include?<QtCharts>
?? ??? ?Qt_CHARTS_USE_NAMESPACE
2 圖表的主要組成部分
?? ??? ?QChartView是QChart的視圖組件,而一個QChart一般包括序列、坐標軸、圖例、圖表標題等部分。
?? ??? ?QChart接口函數眾多,其主要接口函數分類整理后見下表。
分組 | 函數名 | 功能描述 |
圖表外觀 | void setTitle() void setTitIeFont() void setTitleBrush() void setTheme() void setMargins() QLegend * legend() void setAnimationOptions() | 設置圖表標題.顯示在圖表上方,支持HTML格式 設置圖表標題字體 設置圖表標題畫刷 設置主題,主題是內置的UI設置,定義了圖表的配色 設置繪圖區與圖表邊界的4個邊距 返回圖表的圖例 設置序列或坐標軸的動畫效果 |
數據序列 | void addSeries() QList< QAbstractSeries > series() void removeSeries() void removeAIISeries() | 添加序列 返回圖表擁有的序列的列表 移除-個序列,但并不刪除序列對象 移除并刪除圖表的所有序列 |
坐標軸 | void addAxis() QList axes()? void setAxisX()? void setAxisY()? void removeAxis()? void createDefaultAxes() | 為圖表的某個方向添加坐標軸? 返回某個方向的坐標軸列表? 設置某個序列的水平方向的坐標軸 設罝某個序列的垂直方向的坐標軸? 移除一個坐標軸? 根據己添加的序列的類型,創建缺省的坐標軸,前面已有的坐標軸會被刪除 |
?? ??? ?setAnimationOptions(AnimationOptions options)函數設置圖表的動畫效果,輸入參數是QChart::AnimationOptions枚舉類型,有以下幾種取值:
-
????QChart::NoAnimation---- 無動畫效果
-
????QChart::GridAxisAnimations---- 背景網格有動畫效果:
-
????QChart::SeriesAnimations---- 序列有動畫效果:
-
????QChart::AllAnimations—-—都有動畫效果
2.1 QChartView的功能
?? ??? ?QChartView是QChart的視圖組件,類似于GraphicsView架構中的QGraphicsView。實際上,在窗口設計界面上使用QChartView時,就是先放置一個QGraphicsView組件,然后升級為QChartView。
QChartView類定義的函數很少,只有以下幾個。
-
void setChart(QChart *chart),設置一個QChart對象作為顯示的圖表。
-
QChart* chart(),返回QChartView當前設置的QChart類對象。
-
void setRubberBand(RubberBands &rubberBand),設置選擇框的類型,即鼠標在視圖組件上拖動選擇范圍的方式,是一個QChartView::RubberBand枚舉類型的組合,QChartView::
RubberBand枚舉類型有以下幾種取值:
-
QChartView::NoRubberBand—無選擇框;
-
QChartView::VerticalRubberBand—垂向選擇:
-
QChartView::HorizontalRubberBand—水平選擇;
-
QChartView::RectangleRubberBand—矩形框選擇;
-
RubberBandsrubberBand(),返回設置的選擇框類型。
2.2 序列
?? ??? ?序列是數據的表現形式,如圖9-2中的兩條曲線就是兩個QLineseries類型的序列。
?? ??? ?圖表的類型主要就是由序列的類型決定的,常見的圖表類型有折線圖、柱狀圖、餅圖、散點圖等,QtCharts能實現的常見圖表示例及用到的序列類見表9-1。
?? ?? ??圖9-3是這些序列類的繼承關系,可見它們都是從QAbstractSenes類繼承而來的。折線、光滑線和散點的序列是從QXYSeries繼承而來,用于繪制二維平面的數據;QAbstractBarSeries派生出柱狀圖、百分比柱狀圖和堆疊圖等圖表的序列;面積圖、火柴盒圖、餅圖的序列都直接繼承于QAbstractSeries。
???? ?QLineSeries的主要函數見下表:
分組 | 函數 | 功能描述 |
序列名稱 | void setName() | void setName() |
圖表 | QChart* chart() | 返回序列所屬的圖表對象 |
序列外觀 | void setVisibte() void show() void hide() void setColor() void setPen() void setBrush() void setOpacity() | 設置序列可見性 顯示序列,使序列可見 隱藏序列,使序列不可見 設置序列線條的顏色 設置繪制線條的顏色 設置繪制數據點的畫刷 設置序列的透明度,0表示完全透明,1表示不透明 |
數據點 | void setPointsVisible() void append() void insert() void replace() void clear() void remove() void removePoints() int count() QPointF& at() QList<QPointF> points() QVetor<QPointF> pointsVector() | 設置數據點的可見性 添加一個數據點到序列 在某個位置插入一個數據點 替換某個數據點 清除所有數據點 刪除某個數據點 從某個位置開始,刪除指定個數的數據點 數據點的個數 返回某個位置上的數據點 返回數據點的列表 返回數據點的列表,效率更高 |
數據點標簽 | void setPointLabeIsVisible() void setPointLabelsColor() void setPointLabelsFont() void setPointLabelsFormat() void setPointLabelsClipping() | 設置數據點標簽的可見性 設置數據點標簽的文字顏色 設置數據點標簽字體 設置數據點標簽格式 設置標簽的裁剪屬性,缺省為True,即繪圖區外的標簽被裁剪掉 |
坐標軸 | bool attachAxis() bool detachAxis() Qlist attachedAxes() | 為序列附加-個坐標軸,通常需要一個X軸和一個Y軸 解除一個附加的坐標軸 返回附加的坐標軸的列表 |
2.3 坐標軸
? ? ? ? 一般的圖表都有橫軸和縱軸兩個坐標軸,如折線圖一般表示數據,坐標軸用QValueAxis類的數值坐標軸,如果用對數坐標,就可以使用QLogValueAxis類的坐標軸;柱狀圖的橫坐標通常是文字,可以用QBarCategoryAxis作為橫軸,而餅圖一般沒有坐標軸。
? ? ? ? Qt Charts的坐標軸類、特點及其適用情況見表9-2,類的繼承關系如圖9-4所示。
? ? ? ? QValueAxis類的 主要函數見下表:
分組 | 函數 | 功能描述 |
坐標軸整體 | void setVisible() Qt::Orientation orientation() void setMin() void setMax() void setRange() | 設置坐標軸可見性 返回坐標軸方向 設置坐標軸最小值 設置坐標軸最大值 設置坐標軸最小最大值表示的范圍 |
void setLabelFormat() ? void setLabelsAngle() void setLabelsBrush() void setLabelsColor() ? void setLabe!sFont() void setLabelsVisible() | void setLabelFormat() ? void setLabelsAngle() void setLabelsBrush() void setLabelsColor() ? void setLabe!sFont() void setLabelsVisible() | 設置標簽格式,例如可以設置顯示的小數點位數 設置標簽的角度,單位為度 設置標簽的畫刷 設置標簽文字顏色 設置標簽文字字體 設置軸標簽文字是否可見 |
軸線和刻度線 | void setTickCount() void setLineVisible() void setLinePen() void setLinePenColor() | 設置坐標軸主刻度的個數 設置軸線和刻度線的可見性、 設置軸線和刻度線的凼筆 設置軸線和刻度線的顏色 |
主網格線 | void setGridUneColor() ? void setGridLinePen() ? void setGridLineVisible() | 設置網格線的顏色 設置網格線的畫筆 設置網格線的可見性 |
次刻度線和次網格線 | void setMinorTickCount() void setMinorGridLineColor() void setMinorGridLinePen() void setMinorGridLineVisible() | 設置兩個主刻度之間的次刻度的個數 設置次網格線的顏色 設置次網格線的畫筆 設置次網格線的可見性 |
2.4 圖例
ui.chartView->chart()->legend()->setAlignment(Qt::AlignBottom);
void MainWindow::on_btnLegendFont_clicked(){????????//圖例的字體設置????????QFont font=ui->chartView->chart()->legend()->font();????????bool ok=false;????????font=QFontDialog::getFont(&ok,font);????????if (ok)????????????ui.chartView->chart()->legend()->setFont(font);}
3 一個簡單的QChart繪圖程序
MainWindow::MainWindow(QWidget *parent) :QMainWindow(parent),ui(new Ui::MainWindow)
{ui->setupUi(this);createChart();
}
?createChart()函數用于創建圖表,其代碼如下:
void MainWindow::createChart()
{ //創建圖表QChartView *chartView=new QChartView(this); //創建 ChartViewQChart *chart = new QChart(); //創建 Chartchart->setTitle("簡單函數曲線");chartView->setChart(chart); //Chart添加到ChartViewthis->setCentralWidget(chartView);//創建曲線序列QLineSeries *series0 = new QLineSeries();QLineSeries *series1 = new QLineSeries();series0->setName("Sin曲線");series1->setName("Cos曲線");chart->addSeries(series0); //序列添加到圖表chart->addSeries(series1);// QPen pen;
// pen.setStyle(Qt::DotLine);//Qt::SolidLine, Qt::DashLine, Qt::DotLine, Qt::DashDotLine
// pen.setWidth(2);
// pen.setColor(Qt::red);
// series0->setPen(pen);// pen.setStyle(Qt::SolidLine);//Qt::SolidLine, Qt::DashLine, Qt::DotLine, Qt::DashDotLine
// pen.setColor(Qt::blue);
// series1->setPen(pen);//序列添加數值qreal t=0,y1,y2,intv=0.1;int cnt=100;for(int i=0;i<cnt;i++){y1=qSin(t);//+qrand();series0->append(t,y1);y2=qSin(t+20);series1->append(t,y2);t+=intv;}// chart->createDefaultAxes();
// chart->axisX()->setTitleText("time(secs)");
// chart->axisY()->setTitleText("value");//創建坐標軸QValueAxis *axisX = new QValueAxis; //X 軸
// curAxis=axisX;axisX->setRange(0, 10); //設置坐標軸范圍
// axisX->setLabelFormat("%.1f"); //標簽格式
// axisX->setTickCount(11); //主分隔個數
// axisX->setMinorTickCount(4);axisX->setTitleText("time(secs)"); //標題
// axisX->setGridLineVisible(false);QValueAxis *axisY = new QValueAxis; //Y 軸axisY->setRange(-2, 2);axisY->setTitleText("value");
// axisY->setTickCount(5);
// axisY->setMinorTickCount(4);
// axisY->setLabelFormat("%.2f"); //標簽格式
// axisY->setGridLineVisible(false);chart->setAxisX(axisX, series0); //為序列設置坐標軸chart->setAxisY(axisY, series0); //chart->setAxisX(axisX, series1); //為序列設置坐標軸chart->setAxisY(axisY, series1); //
}
? ?程序運行后界面如圖9-2所示。
?? ??? ?在createChart()函數里,首先創建一個QChartView對象chartView,再創建一個QChart對象chart,將chart在chartView里顯示,使用下面一行語句:
chartView->setChart(chart);
?? ??? ?圖表上用于顯示數據的稱為序列(series),這里使用折線序列QLineSeries,創建了兩個QLineSeries類型的序列,并且將序列添加到chart中。
chart->addSeries(series0);
chart->addSeries(series1);
?? ??? ?序列存儲用于顯示的數據,所以需要為直線序列添加平面數據點的坐標數據。程序將生成正弦和余弦函數的數據作為序列的數據。
?? ??? ?序列還需要坐標軸,創建QValueAxis類型的坐標軸作為圖表的X軸和Y軸,調用QChart的setAxisX()和setAxisY()函數為兩個序列分別設置X軸和Y軸。
圖9-2實例samp9_1運行時界面