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 = new QwtPlotCanvas(); 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軸的基本設置，如果想要設置字體呢？如下：
QFont fontX;
fontX.setFamily(QStringLiteral("微軟雅黑"));
fontX.setPointSize(12);
m_pChart->setAxisFont(QwtPlot::xBottom, fontX);
在此處，我隻是顯示瞭X軸的字體設置，Y軸同理，就不顯示瞭。
4：設置網格線
QwtPlotGrid *grid = new QwtPlotGrid; grid->setMajorPen(QColor(193, 193, 193), 1, Qt::SolidLine); grid->attach(m_pChart);
如果按照當前代碼設置網格時，大傢會發現，中間刻度沒有網格線顯示，效果如下圖所示：
如果有需要類似功能的，僅用上面代碼就可以實現。但是，有人卻說，想要中間刻度也有網格線顯示，那麼，使用以下代碼實現
QwtPlotGrid *grid = new QwtPlotGrid; 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 = new CustomBarChartItem();
QStringList listPData;
QVector<double> vetSample;
for (int i = 0; i < vetColorData.size(); i++)
{
ColorData stInfo = vetColorData[i];
vetSample.append(stInfo.nNum);
QString sText = QString::number(i+1, 10);
listPData.append(sText);
QColor color = 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(int sampleIndex, const QPointF&) const
{
//TODO: 我們希望每個條形都有不同的顏色
CustomBarChartColumnSymbol *symbol = new CustomBarChartColumnSymbol(QwtColumnSymbol::Box);
symbol->setFrameStyle(QwtColumnSymbol::NoFrame);
symbol->SetColumnMoveLen(m_nMoveLen);
QColor currentColor(Qt::white);
QString sHit = "";
if ((sampleIndex >= 0) && (sampleIndex < m_listColor.size()))
{
currentColor = m_listColor[sampleIndex];
sHit = m_listLabel.at(sampleIndex);
}
symbol->setPalette(currentColor);
return symbol;
}
實現改變顏色的核心代碼是：symbol->setPalette(currentColor);
6：X軸刻度值優化
CustomBarChartScaleDraw *pScaleDraw = new CustomBarChartScaleDraw(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函數進行重載
virtual void draw(QPainter *painter, const QwtColumnRect &rect) const;
加入QWT源碼之後，可以查看到draw函數的實現，我們需要仿照源碼中進行實現，隻是修改下顯示位置。因為在QwtColumnSymbol中，修改柱狀圖區域的類未對外開放，所以，隻能依靠draw的QwtColumnRect 類進行修改。
當draw在調用drawBox函數時，需要將修改的QwtColumnRect的區域傳給父類，這樣就會修改顯示位置。
直接上代碼更直接一些
void CustomBarChartColumnSymbol::draw(QPainter *painter, const QwtColumnRect &rect) const
{
QwtColumnRect rectNew = rect;
if (m_nMoveLens > 0)
{
int nMin = rectNew.hInterval.minValue() + m_nMoveLens;
rectNew.hInterval.setMinValue(nMin);
int nMax = rectNew.hInterval.maxValue() + m_nMoveLens;
rectNew.hInterval.setMaxValue(nMax);
}
painter->save();
switch (this->style())
{
case QwtColumnSymbol::Box:
{
drawBox(painter, rectNew);
}
break;
default:;
}
painter->restore();
}
修改的位置，其實是對QwtColumnRect的 QwtInterval hInterval; 進行修改。因為實現的是需要對X軸進行偏移，所以隻對該參數進行修改，其餘按照父類的draw進行實現。
CustomBarChartColumnSymbol的代碼實現
CustomBarChartColumnSymbol::CustomBarChartColumnSymbol(Style sStyle/* = NoStyle*/) :QwtColumnSymbol(sStyle)
{
m_nMoveLens = 0;
}
CustomBarChartColumnSymbol::~CustomBarChartColumnSymbol()
{
}
void CustomBarChartColumnSymbol::SetColumnMoveLen(int nMoveLen)
{
m_nMoveLens = nMoveLen;
}
void CustomBarChartColumnSymbol::draw(QPainter *painter, const QwtColumnRect &rect) const
{
QwtColumnRect rectNew = rect;
if (m_nMoveLens > 0)
{
int nMin = rectNew.hInterval.minValue() + m_nMoveLens;
rectNew.hInterval.setMinValue(nMin);
int nMax = rectNew.hInterval.maxValue() + m_nMoveLens;
rectNew.hInterval.setMaxValue(nMax);
}
painter->save();
switch (this->style())
{
case QwtColumnSymbol::Box:
{
drawBox(painter, rectNew);
}
break;
default:;
}
painter->restore();
}
其中，偏移位置的大小是由 SetColumnMoveLen進行設置的。
10：修改鼠標的顯示狀態
canvas->setCursor(Qt::ArrowCursor); //修改鼠標在畫佈上的顯示方式，系統默認是十字架形狀
在實現過程中，大傢會發現，實現的網格效果和我的有些不一致，網格線並沒有呈現閉合狀態，可以使用以下代碼實現
m_pChart->plotLayout()->setAlignCanvasToScales(true);
到此這篇關於Qt使用QWT繪制柱狀圖詳解的文章就介紹到這瞭,更多相關Qt QWT柱狀圖內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！
推薦閱讀：
- QT利用QPainter繪制三維餅狀圖
- Python編程使用PyQt5庫實現動態水波進度條示例
- Qt編寫自定義控件實現抽獎轉盤
- Qt實現字符串生成二維碼功能
- Python中利用pyqt5制作指針鐘表顯示實時時間(指針時鐘)