QtCharts之QAbstractAxis圖表類樣式自定義

0x00 QtCharts中座標軸結構
在學習QAbstractAxis類之前,需要先熟悉QtCharts中軸的組成元素都有哪些:

QtCharts座標軸組成

QtCharts中,一個座標軸的內容大致包含以下幾種:軸標題(title)、軸刻度標籤(labels)、軸線(lines)、網格線(grid lines)、和軸陰影(shades)。通過QAbstractAxis可以分別對以上幾種元素進行單獨控制。

0x01 設置標題
QAbstractAxis可以設置座標軸標題的顯示/隱藏、顏色、內容和字體等幾個屬性。

示例
例如,設置座標軸標題內容爲axisTitle,顏色爲藍色,字體15號加粗,並顯示出來:

// 顯示標題                                                      
axisXLeft->setTitleVisible(true);                            
// 設置標題內容                                                    
axisXLeft->setTitleText(QStringLiteral("I am axis's title"));
// 設置顏色                                                      
axisXLeft->setTitleBrush(QBrush(Qt::blue));                  
// 設置字體12號加粗                                                 
QFont font = axisXLeft->titleFont();                         
font.setPointSize(15);                                       
font.setBold(true);                                          
axisXLeft->setTitleFont(font);                               
結果:

設置標題屬性

titleVisible:設置標題顯示
bool isTitleVisible() const;
void setTitleVisible(bool visible = true);
座標軸標題默認情況下是顯示的。

修改該屬性時會觸發titleVisibleChanged(bool visible)信號。
titleText:設置標題內容
QString titleText() const;
void setTitleText(const QString &title);
默認情況下,QAbstractAxis不會設置任何標題內容。用戶可以根據需要修改座標軸標題。

標題發生改變時會觸發titleTextChanged(const QString &text)信號。
titleFont:設置標題字體
QFont titleFont() const;
void setTitleFont(const QFont &font);
該屬性通過QFont來設置標題的字體風格。

該屬性發生改變時,會觸發titleFontChanged(const QFont &font)信號。
titleBrush:設置標題顏色畫刷
QBrush titleBrush() const;
void setTitleBrush(const QBrush &brush);
注意目前只支持通過畫刷來設置顏色,不支持設置畫刷得其他效果(如畫刷風格BrushStyle等)。

該屬性發生改變會觸發titleBrushChanged(const QBrush &brush)信號。
0x02 設置刻度標籤
QAbstractAxis除了可以設置座標軸刻度標籤的顯示/隱藏、顏色、和字體幾個屬性外,還可設置刻度標籤的傾斜角度。

示例
例如,設置軸刻度標籤顯示,傾斜-45度,紅色,加粗9號字體:

// 顯示刻度標籤                           
axisXLeft->setLabelsVisible(true);  
// 傾斜45度                            
axisXLeft->setLabelsAngle(-45);     
// 顏色                               
axisXLeft->setLabelsColor(Qt::red); 
// 加粗9號                             
font = axisXLeft->labelsFont();     
font.setBold(true);                 
font.setPointSize(9);               
axisXLeft->setLabelsFont(font);     
效果:

 

設置軸刻度標籤

labelsAngle:設置傾斜角度
int labelsAngle() const;
void setLabelsAngle(int angle);
設置刻度標籤的傾斜角度,默認爲水平顯示。

該屬性發生改變時,觸發labelsAngleChanged(int angle)信號。
labelsColor、labelsBrush:設置顏色
QColor labelsColor() const;
void setLabelsColor(QColor color);

QBrush labelsBrush() const;
void setLabelsBrush(const QBrush &brush);
軸刻度標籤的顏色可以通過labelsColor者labelsBrush任一屬性設置來實現。兩者的區別在於被修改時觸發的信號不一樣、修改labelsColor屬性稍微便利些而已,且通過修改labelsBrush實現時也只支持修改QBrush顏色,而不支持QBrush的其它屬性設置。實際上修改軸刻度標籤顏色,內部都是通過設置QBrush來實現。

修改labelsColor屬性會觸發labelsColorChanged(QColor color)信號;
修改labelsBrush屬性會觸發labelBrushChanged(const QBrush &brush)信號。

labelsFont:設置字體風格
QFont labelsFont() const;
void setLabelsFont(const QFont &font);
使用方式與修改軸標題字體相同。

該屬性發生改變會觸發labelsFontChanged(const QFont &font)信號。
labelsVisible:設置顯示/隱藏刻度標籤
bool labelsVisible() const;
void setLabelsVisible(bool visible = true);
默認爲顯示刻度標籤。

該屬性修改時觸發labelsVisibleChanged(bool visible)信號:


0x03 設置軸線
可以設置軸線顯示/隱藏、軸線畫筆、方向倒置。

示例
例如顯示軸線,併爲其設置顏色爲紅色、寬度爲2的畫筆:

// 顯示軸線
axisXLeft->setLineVisible(true);  
// 設置軸線畫筆
QPen pen = axisXLeft->linePen();  
pen.setColor(Qt::red);            
pen.setWidth(2);                  
axisXLeft->setLinePen(pen);
效果:設置軸線屬性

lineVisible:設置顯示軸線
bool isLineVisible() const;
void setLineVisible(bool visible = true);
默認會顯示軸線。

該屬性發生改變時會觸發lineVisibleChanged(bool visible)信號。
linePen:設置軸線畫筆
QPen linePen() const;
void setLinePen(const QPen &pen);
通過設置軸線畫筆,可以自定義軸線寬度、繪製顏色等。如果只需要修改軸線顏色,可以直接調用setLinePenClolor(QColor color)方法。

改屬性發生改變時會觸發linePenChanged(const QPen &pen)信號。
通過setLinePenColor修改軸線顏色時會觸發gridLineColorChanged(const QColor &color)信號。

reverse:翻轉座標軸
bool isReverse() const;
void setReverse(bool reverse = true);
將座標軸的極值方向翻轉,左側爲默認reverse=false,右側爲翻轉之後的效果:

翻轉座標軸

注意:該屬性僅在使用笛卡爾座標系的圖表上有效,比如折線、曲線、散點圖和使用笛卡爾座標系的面積圖。

reverse值改變時會觸發reverseChanged(bool)信號。

 


0x04 設置網格線
QtCharts的座標軸網格線分爲主網格線gridLine和次網格線minorGridLine,主網格線相當於刻度線的延申(例如在QValueAxis),次網格線分佈在相鄰的兩條主網格線之間,且次網格線需要由QAbstractAxis的子類,即具體類型的座標軸實現才能支持。

示例:
以QValueAxis爲例,顯示主次網格線並設置顏色:

// 設置網格線/刻度數量
axisXLeft->setTickCount(5);
axisXLeft->setMinorTickCount(5);
// 主網格線
axisXLeft->setGridLineVisible(true);
axisXLeft->setGridLineColor(Qt::darkGray);
// 次網格線
axisXLeft->setMinorGridLineVisible(true);
axisXLeft->setMinorGridLineColor(Qt::gray);
效果:

 

設置網格線

gridVisible、minorGridVisible設置顯示網格線
// 獲取/設置顯示主網格線,默認顯示
bool isGridLineVisible() const;
void setGridLineVisible(bool visible = true);

// 獲取/設置顯示次網格線,默認不顯示
bool isMinorGridLineVisible() const;
void setMinorGridLineVisible(bool visible = true);
gridVisible改變時觸發gridVisibleChanged(bool visible)信號。
minorGridVisible改變時觸發minorGridVisibleChanged(bool visible)信號。

gridLinePen、minorGridLinePen設置網格線畫筆
// 設置主網格線畫筆
QPen gridLinePen() const;
void setGridLinePen(const QPen &pen);

// 設置次網格線畫筆
QPen minorGridLinePen() const;
void setMinorGridLinePen(const QPen &pen);
與軸線顏色的設置類似,如果只需要修改網格線的顏色,可以直接調用對應的setGridLineColor(const QColor &color)或者setMinorGridLineColor(const QColor &color)方法快速設置。

gridLinePen改變時觸發gridLinePenChanged(const QPen &pen)信號。
minorGridLinePen改變時觸發minorGridLinePenChanged(const QPen &pen)信號。

gridLineColor改變時觸發gridLineColorChanged(const QPen &pen)信號。

minorGridLineColor改變時觸發minorGridLineColorChanged(const QPen &pen)信號。

0x05 設置陰影
QtCharts座標軸陰影指的是相鄰主網格線之間的區域。QAbstractAxis中提供了對陰影邊框(shadesBorder)、陰影區域(shadesArea)的設置:

示例
以QValueAxis爲例,設置座標軸的陰影邊框和填充:

// 顯示陰影區域,包括陰影邊框
axisXLeft->setShadesVisible(true);
// 設置陰影邊框
QPen sPen = axisXLeft->shadesPen();
sPen.setWidth(5);
sPen.setColor(Qt::yellow);
axisXLeft->setShadesPen(sPen);
//axisXLeft->setShadesBorderColor(Qt::darkYellow);
// 設置陰影區域顏色填充
axisXLeft->setShadesBrush(QBrush(QColor(48,157,255,125)));
//axisXLeft->setShadesColor(Qt::blue);
效果:

設置座標軸陰影

shadesBorderColor、shadesPen設置陰影邊框
QColor shadesBorderColor() const;
void setShadesBorderColor(QColor color);

QPen shadesPen() const;
void setShadesPen(const QPen &pen);
設置陰影邊框,如果只需要改變顏色可以直接調用setShadesBorderColor(QColor),需要設置更多屬性可以調用setShadesPen(const QPen&)爲陰影邊框設置一個畫筆對象。

shadesBorderColor屬性改變會觸發shadesBorderColorChanged(QColor color)信號。
shadesPen屬性改變會觸發shadesPenChanged(const QPen &pen)信號。

shadesBrush、shadesColor設置陰影區域填充
QBrush shadesBrush() const;
void setShadesBrush(const QBrush &brush);

QColor shadesColor() const;
void setShadesColor(QColor color);
設置陰影區域填充,如果只需要修改顏色可以直接使用setShadesColor(QColor),需要設置更多效果可以調用setShadesBrush(const QBrush&)爲陰影區域設置一個畫刷,例如,設置畫刷的填充風格爲DiagCrossPattern:

QBrush sBrush = axisXLeft->shadesBrush();
sBrush.setColor(QColor(48,157,255,125));
// 設置畫刷風格
sBrush.setStyle(Qt::BrushStyle::DiagCrossPattern);
axisXLeft->setShadesBrush(sBrush);
效果:

設置陰影填充風格

shadesBrush值修改會觸發shadesBrushChanged(const QBrush &brush)信號。
shadesColor值修改會觸發shadesColorChanged(QColor color)信號。

本文系轉載,如侵權請聯繫刪除。

作者:nullobject
鏈接:https://segmentfault.com/a/1190000018738307
來源:SegmentFault 思否

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章