Qt如何使用QWT绘制柱状图
本文將為大家詳細介紹“Qt如何使用QWT繪制柱狀圖”,內容步驟清晰詳細,細節處理妥當,而小編每天都會更新不同的知識點,希望這篇“Qt如何使用QWT繪制柱狀圖”能夠給你意想不到的收獲,請大家跟著小編的思路慢慢深入,具體內容如下,一起去收獲新知識吧。
有的時候我們會遇到這樣一種功能,需要在柱狀圖中顯示不同顏色的柱狀體,每個主狀態代表的狀態不同,那么如果只是用簡單的QChart是難以實現的。
QT中提供了一個叫做QWT的庫。QWT,全稱是Qt Widgets for Technical Applications,是一個基于LGPL版權協議的開源項目,可生成各種統計圖。它為具有技術專業背景的程序提供GUI組件和一組實用類,其目標是以基于2D方式的窗體部件來顯示數據,數據源以數值,數組或一組浮點數等方式提供,輸出方式可以是Curves(曲線),Slider(滾動條),Dials(圓盤),Compasses(儀表盤)等等。該工具庫基于Qt開發,所以也繼承了Qt的跨平臺特性。
下面介紹的實現效果如下所示:
主要難實現功能:
1:柱狀圖實現了一類下有多種顏色顯示,
2:文本、每個柱狀體可以進行偏移
3:修改柱狀體的寬度
4:修改有效圖表的鼠標顯示狀態
QWT中給的example例子也可以實現一種類型對應多種顏色的柱狀圖,但是,無法實現文字以及柱狀圖的偏移。
很明顯,當前效果圖的文本以及柱狀圖顯示在了網格中間。如果有博友想實現和我一樣的效果,那就請繼續往下看。
該效果我是在example的例子基礎上進行改進的,其中基本框架不變,在我看來,沒有實現不了的功能,只有你對這個庫的熟悉程度,該功能代碼簡單,但是還是耗費了我三天的時間。
下面我進行功能講解
1:設置QChart的整體背景色
m_pChart->setAutoFillBackground(true); m_pChart->setFrameStyle(QFrame::NoFrame); m_pChart->setLineWidth(0); m_pChart->setPalette(QColor(255,255,255));
2:設置有效區域的背景色
QwtPlotCanvas*canvas=newQwtPlotCanvas(); canvas->setFrameStyle(QFrame::NoFrame); m_pChart->setCanvas(canvas);
3:設置X、Y坐標軸數據
當前X軸顯示的是0-30條數據,Y軸是0-8條數據
m_pChart->setAxisScale(QwtPlot::xBottom,0,30); m_pChart->setAxisMaxMajor(QwtPlot::xBottom,30); m_pChart->setAxisMaxMinor(QwtPlot::xBottom,0); m_pChart->setAxisScale(QwtPlot::yLeft,0,8); m_pChart->setAxisMaxMajor(QwtPlot::yLeft,6); m_pChart->setAxisMaxMinor(QwtPlot::yLeft,2);
這是設置X、Y軸的基本設置,如果想要設置字體呢?如下:
QFontfontX;
fontX.setFamily(QStringLiteral("微軟雅黑"));
fontX.setPointSize(12);
m_pChart->setAxisFont(QwtPlot::xBottom,fontX);
在此處,我只是顯示了X軸的字體設置,Y軸同理,就不顯示了。
4:設置網格線
QwtPlotGrid*grid=newQwtPlotGrid; grid->setMajorPen(QColor(193,193,193),1,Qt::SolidLine); grid->attach(m_pChart);
如果按照當前代碼設置網格時,大家會發現,中間刻度沒有網格線顯示,效果如下圖所示:
如果有需要類似功能的,僅用上面代碼就可以實現。但是,有人卻說,想要中間刻度也有網格線顯示,那么,使用以下代碼實現
QwtPlotGrid*grid=newQwtPlotGrid; grid->enableXMin(true); grid->enableYMin(true); grid->setMajorPen(QColor(193,193,193),1,Qt::SolidLine); grid->setMinorPen(QColor(193,193,193),1,Qt::SolidLine); grid->attach(m_pChart);
強制顯示網格線的中間刻度網格線。經過設置之后,就和1-1圖一致,根據大家需求自行設置。
5:插入實際數據
當前操作是在柱狀圖中插入數據,可以對每一條柱狀體進行顏色設置,實現代碼:
m_pChartItemAir=newCustomBarChartItem();
QStringListlistPData;
QVector<double>vetSample;
for(inti=0;i<vetColorData.size();i++)
{
ColorDatastInfo=vetColorData[i];
vetSample.append(stInfo.nNum);
QStringsText=QString::number(i+1,10);
listPData.append(sText);
QColorcolor=stInfo.color;
m_pChartItemPress->InsertBarData(sText,color);
}
//數據插入之后,進行綁定
m_pChartItemPress->setSamples(vetSample);
m_pChartItemPress->attach(m_pChartPress);
CustomBarChartItem該類是我對QwtPlotBarChart類的重寫。
其中,InsertBarData()該函數設置了每個柱狀體對應的不同顏色值。
插入數據之后,進行數據綁定。
InsertBarData()中調用QwtPlotBarChart::itemChanged(),讓類中自動調用specialSymbol() 該函數進行顏色值更改
QwtColumnSymbol*CustomBarChartItem::specialSymbol(intsampleIndex,constQPointF&)const
{
//TODO:我們希望每個條形都有不同的顏色
CustomBarChartColumnSymbol*symbol=newCustomBarChartColumnSymbol(QwtColumnSymbol::Box);
symbol->setFrameStyle(QwtColumnSymbol::NoFrame);
symbol->SetColumnMoveLen(m_nMoveLen);
QColorcurrentColor(Qt::white);
QStringsHit="";
if((sampleIndex>=0)&&(sampleIndex<m_listColor.size()))
{
currentColor=m_listColor[sampleIndex];
sHit=m_listLabel.at(sampleIndex);
}
symbol->setPalette(currentColor);
returnsymbol;
}
實現改變顏色的核心代碼是:symbol->setPalette(currentColor);
6:X軸刻度值優化
CustomBarChartScaleDraw*pScaleDraw=newCustomBarChartScaleDraw(Qt::Orientation::Horizontal,listPressLabel); pScaleDraw->SetXBottomMoveLens(10); m_pChart->setAxisScaleDraw(QwtPlot::xBottom,pScaleDraw);
其中,setAxisScaleDraw的第一個參數是控制,是X軸?Y軸
當前CustomBarChartScaleDraw類是我對QwtScaleDraw的重寫
7:設置X軸文本偏移
第6步驟中,SetXBottomMoveLens()函數實現的功能就是對X軸文本進行偏移。
8:設置每個柱狀體的寬度
setLayoutPolicy(FixedSampleSize); setLayoutHint(nWidth);//設定了柱狀體的寬度
9:設置每個柱狀體的偏移量
寫到這里,大家會發現,運行之后,效果差強人意,如圖所示。
每個柱狀圖都在網格的垂直線上,而且第一位還顯示不全,看起來很是不舒服。下面需要設置對柱狀圖的偏移,這個功能可真是不好改,改了一天才弄好 -_-||
修改柱狀圖的偏移需要在QwtColumnSymbol類中進行修改,那么重寫該類,叫做CustomBarChartColumnSymbol這個名字,對draw函數進行重載
virtualvoiddraw(QPainter*painter,constQwtColumnRect&rect)const;
加入QWT源碼之后,可以查看到draw函數的實現,我們需要仿照源碼中進行實現,只是修改下顯示位置。因為在QwtColumnSymbol中,修改柱狀圖區域的類未對外開放,所以,只能依靠draw的QwtColumnRect 類進行修改。
當draw在調用drawBox函數時,需要將修改的QwtColumnRect的區域傳給父類,這樣就會修改顯示位置。
直接上代碼更直接一些
voidCustomBarChartColumnSymbol::draw(QPainter*painter,constQwtColumnRect&rect)const
{
QwtColumnRectrectNew=rect;
if(m_nMoveLens>0)
{
intnMin=rectNew.hInterval.minValue()+m_nMoveLens;
rectNew.hInterval.setMinValue(nMin);
intnMax=rectNew.hInterval.maxValue()+m_nMoveLens;
rectNew.hInterval.setMaxValue(nMax);
}
painter->save();
switch(this->style())
{
caseQwtColumnSymbol::Box:
{
drawBox(painter,rectNew);
}
break;
default:;
}
painter->restore();
}
修改的位置,其實是對QwtColumnRect的 QwtInterval hInterval; 進行修改。因為實現的是需要對X軸進行偏移,所以只對該參數進行修改,其余按照父類的draw進行實現。
CustomBarChartColumnSymbol的代碼實現
CustomBarChartColumnSymbol::CustomBarChartColumnSymbol(StylesStyle/*=NoStyle*/):QwtColumnSymbol(sStyle)
{
m_nMoveLens=0;
}
CustomBarChartColumnSymbol::~CustomBarChartColumnSymbol()
{
}
voidCustomBarChartColumnSymbol::SetColumnMoveLen(intnMoveLen)
{
m_nMoveLens=nMoveLen;
}
voidCustomBarChartColumnSymbol::draw(QPainter*painter,constQwtColumnRect&rect)const
{
QwtColumnRectrectNew=rect;
if(m_nMoveLens>0)
{
intnMin=rectNew.hInterval.minValue()+m_nMoveLens;
rectNew.hInterval.setMinValue(nMin);
intnMax=rectNew.hInterval.maxValue()+m_nMoveLens;
rectNew.hInterval.setMaxValue(nMax);
}
painter->save();
switch(this->style())
{
caseQwtColumnSymbol::Box:
{
drawBox(painter,rectNew);
}
break;
default:;
}
painter->restore();
}
其中,偏移位置的大小是由 SetColumnMoveLen進行設置的。
10:修改鼠標的顯示狀態
canvas->setCursor(Qt::ArrowCursor);//修改鼠標在畫布上的顯示方式,系統默認是十字架形狀
在實現過程中,大家會發現,實現的網格效果和我的有些不一致,網格線并沒有呈現閉合狀態,可以使用以下代碼實現
m_pChart->plotLayout()->setAlignCanvasToScales(true);
總結
以上是生活随笔為你收集整理的Qt如何使用QWT绘制柱状图的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 轻松使用make menuconfig达
- 下一篇: 3Dmax怎么制作创建非常精致的3D钻石