腳本之家服務器常用軟件

快捷導航

Qt使用QWT繪制柱狀圖詳解

更新時間：2022年01月24日 17:06:56 作者：中國好公民st

QT中提供了一個叫做QWT的庫。QWT，全稱是Qt?Widgets?for?Technical?Applications，是一個基于LGPL版權協議的開源項目，可生成各種統(tǒng)計圖。本文將通過它繪制柱狀圖，需要的可以參考一下

1：設置QChart的整體背景色
2：設置有效區(qū)域的背景色
3：設置X、Y坐標軸數據
4：設置網格線
5：插入實際數據
6：X軸刻度值優(yōu)化
7：設置X軸文本偏移
8：設置每個柱狀體的寬度
9：設置每個柱狀體的偏移量
10：修改鼠標的顯示狀態(tài)

有的時候我們會遇到這樣一種功能，需要在柱狀圖中顯示不同顏色的柱狀體，每個主狀態(tài)代表的狀態(tài)不同，那么如果只是用簡單的QChart是難以實現的。

QT中提供了一個叫做QWT的庫。QWT，全稱是Qt Widgets for Technical Applications，是一個基于LGPL版權協議的開源項目，可生成各種統(tǒng)計圖。它為具有技術專業(yè)背景的程序提供GUI組件和一組實用類，其目標是以基于2D方式的窗體部件來顯示數據，數據源以數值，數組或一組浮點數等方式提供，輸出方式可以是Curves（曲線），Slider（滾動條），Dials（圓盤），Compasses（儀表盤）等等。該工具庫基于Qt開發(fā)，所以也繼承了Qt的跨平臺特性。

下面介紹的實現效果如下所示：

主要難實現功能：

1：柱狀圖實現了一類下有多種顏色顯示，

2：文本、每個柱狀體可以進行偏移

3：修改柱狀體的寬度

4：修改有效圖表的鼠標顯示狀態(tài)

QWT中給的example例子也可以實現一種類型對應多種顏色的柱狀圖，但是，無法實現文字以及柱狀圖的偏移。

很明顯，當前效果圖的文本以及柱狀圖顯示在了網格中間。如果有博友想實現和我一樣的效果，那就請繼續(xù)往下看。

該效果我是在example的例子基礎上進行改進的，其中基本框架不變，在我看來，沒有實現不了的功能，只有你對這個庫的熟悉程度，該功能代碼簡單，但是還是耗費了我三天的時間。

下面我進行功能講解

1：設置QChart的整體背景色

m_pChart->setAutoFillBackground(true);
m_pChart->setFrameStyle(QFrame::NoFrame);
m_pChart->setLineWidth(0);
m_pChart->setPalette(QColor(255, 255, 255));

2：設置有效區(qū)域的背景色

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);

如果按照當前代碼設置網格時，大家會發(fā)現，中間刻度沒有網格線顯示，效果如下圖所示：

如果有需要類似功能的，僅用上面代碼就可以實現。但是，有人卻說，想要中間刻度也有網格線顯示，那么，使用以下代碼實現

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軸刻度值優(yōu)化

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：設置每個柱狀體的偏移量

寫到這里，大家會發(fā)現，運行之后，效果差強人意，如圖所示。

每個柱狀圖都在網格的垂直線上，而且第一位還顯示不全，看起來很是不舒服。下面需要設置對柱狀圖的偏移，這個功能可真是不好改，改了一天才弄好 -_-||

修改柱狀圖的偏移需要在QwtColumnSymbol類中進行修改，那么重寫該類，叫做CustomBarChartColumnSymbol這個名字，對draw函數進行重載

virtual void draw(QPainter *painter, const QwtColumnRect &rect) const;

加入QWT源碼之后，可以查看到draw函數的實現，我們需要仿照源碼中進行實現，只是修改下顯示位置。因為在QwtColumnSymbol中，修改柱狀圖區(qū)域的類未對外開放，所以，只能依靠draw的QwtColumnRect 類進行修改。

當draw在調用drawBox函數時，需要將修改的QwtColumnRect的區(qū)域傳給父類，這樣就會修改顯示位置。

直接上代碼更直接一些

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：修改鼠標的顯示狀態(tài)

canvas->setCursor(Qt::ArrowCursor); //修改鼠標在畫布上的顯示方式，系統(tǒng)默認是十字架形狀

在實現過程中，大家會發(fā)現，實現的網格效果和我的有些不一致，網格線并沒有呈現閉合狀態(tài)，可以使用以下代碼實現

m_pChart->plotLayout()->setAlignCanvasToScales(true);

到此這篇關于Qt使用QWT繪制柱狀圖詳解的文章就介紹到這了,更多相關Qt QWT柱狀圖內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

軟件下載

源碼下載

軟件編程

網絡編程

在線工具

數據庫

CMS

常用工具

Qt使用QWT繪制柱狀圖詳解

目錄

1：設置QChart的整體背景色

2：設置有效區(qū)域的背景色

3：設置X、Y坐標軸數據

4：設置網格線

5：插入實際數據

6：X軸刻度值優(yōu)化

7：設置X軸文本偏移

8：設置每個柱狀體的寬度

9：設置每個柱狀體的偏移量

10：修改鼠標的顯示狀態(tài)

相關文章

最新評論

大家感興趣的內容

最近更新的內容

常用在線小工具

Qt使用QWT繪制柱狀圖詳解

目錄

1：設置QChart的整體背景色

2：設置有效區(qū)域的背景色

3：設置X、Y坐標軸數據

4：設置網格線

5：插入實際數據

6：X軸刻度值優(yōu)化

7：設置X軸文本偏移

8：設置每個柱狀體的寬度

9：設置每個柱狀體的偏移量

10：修改鼠標的顯示狀態(tài)

相關文章

最新評論

大家感興趣的內容

最近更新的內容

常用在線小工具

3：設置X、Y坐標軸數據