Qt如何使用QWT繪制柱狀圖

本文將為大家詳細(xì)介紹“Qt如何使用QWT繪制柱狀圖”，內(nèi)容步驟清晰詳細(xì)，細(xì)節(jié)處理妥當(dāng)，而小編每天都會(huì)更新不同的知識(shí)點(diǎn)，希望這篇“Qt如何使用QWT繪制柱狀圖”能夠給你意想不到的收獲，請(qǐng)大家跟著小編的思路慢慢深入，具體內(nèi)容如下，一起去收獲新知識(shí)吧。

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

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

下面介紹的實(shí)現(xiàn)效果如下所示：

主要難實(shí)現(xiàn)功能：

1：柱狀圖實(shí)現(xiàn)了一類下有多種顏色顯示，

2：文本、每個(gè)柱狀體可以進(jìn)行偏移

3：修改柱狀體的寬度

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

QWT中給的example例子也可以實(shí)現(xiàn)一種類型對(duì)應(yīng)多種顏色的柱狀圖，但是，無(wú)法實(shí)現(xiàn)文字以及柱狀圖的偏移。

很明顯，當(dāng)前效果圖的文本以及柱狀圖顯示在了網(wǎng)格中間。如果有博友想實(shí)現(xiàn)和我一樣的效果，那就請(qǐng)繼續(xù)往下看。

該效果我是在example的例子基礎(chǔ)上進(jìn)行改進(jìn)的，其中基本框架不變，在我看來(lái)，沒(méi)有實(shí)現(xiàn)不了的功能，只有你對(duì)這個(gè)庫(kù)的熟悉程度，該功能代碼簡(jiǎn)單，但是還是耗費(fèi)了我三天的時(shí)間。

下面我進(jìn)行功能講解

1：設(shè)置QChart的整體背景色

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

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

QwtPlotCanvas *canvas = new QwtPlotCanvas();
canvas->setFrameStyle(QFrame::NoFrame);
m_pChart->setCanvas(canvas);

3：設(shè)置X、Y坐標(biāo)軸數(shù)據(jù)

當(dāng)前X軸顯示的是0-30條數(shù)據(jù)，Y軸是0-8條數(shù)據(jù)

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

這是設(shè)置X、Y軸的基本設(shè)置，如果想要設(shè)置字體呢？如下：

QFont fontX;
fontX.setFamily(QStringLiteral("微軟雅黑"));
fontX.setPointSize(12);
m_pChart->setAxisFont(QwtPlot::xBottom, fontX);

在此處，我只是顯示了X軸的字體設(shè)置，Y軸同理，就不顯示了。

4：設(shè)置網(wǎng)格線

QwtPlotGrid *grid = new QwtPlotGrid;
grid->setMajorPen(QColor(193, 193, 193), 1, Qt::SolidLine);
grid->attach(m_pChart);

如果按照當(dāng)前代碼設(shè)置網(wǎng)格時(shí)，大家會(huì)發(fā)現(xiàn)，中間刻度沒(méi)有網(wǎng)格線顯示，效果如下圖所示：

如果有需要類似功能的，僅用上面代碼就可以實(shí)現(xiàn)。但是，有人卻說(shuō)，想要中間刻度也有網(wǎng)格線顯示，那么，使用以下代碼實(shí)現(xiàn)

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

強(qiáng)制顯示網(wǎng)格線的中間刻度網(wǎng)格線。經(jīng)過(guò)設(shè)置之后，就和1-1圖一致，根據(jù)大家需求自行設(shè)置。

5：插入實(shí)際數(shù)據(jù)

當(dāng)前操作是在柱狀圖中插入數(shù)據(jù)，可以對(duì)每一條柱狀體進(jìn)行顏色設(shè)置，實(shí)現(xiàn)代碼：

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);
}
//數(shù)據(jù)插入之后，進(jìn)行綁定
m_pChartItemPress->setSamples(vetSample);
m_pChartItemPress->attach(m_pChartPress);

CustomBarChartItem該類是我對(duì)QwtPlotBarChart類的重寫(xiě)。

其中，InsertBarData()該函數(shù)設(shè)置了每個(gè)柱狀體對(duì)應(yīng)的不同顏色值。

插入數(shù)據(jù)之后，進(jìn)行數(shù)據(jù)綁定。

InsertBarData()中調(diào)用QwtPlotBarChart::itemChanged()，讓類中自動(dòng)調(diào)用specialSymbol() 該函數(shù)進(jìn)行顏色值更改

QwtColumnSymbol * CustomBarChartItem::specialSymbol(int sampleIndex, const QPointF&) const
{
	//TODO: 我們希望每個(gè)條形都有不同的顏色
	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;
}

實(shí)現(xiàn)改變顏色的核心代碼是：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的第一個(gè)參數(shù)是控制，是X軸？Y軸

當(dāng)前CustomBarChartScaleDraw類是我對(duì)QwtScaleDraw的重寫(xiě)

7：設(shè)置X軸文本偏移

第6步驟中，SetXBottomMoveLens()函數(shù)實(shí)現(xiàn)的功能就是對(duì)X軸文本進(jìn)行偏移。

8：設(shè)置每個(gè)柱狀體的寬度

setLayoutPolicy(FixedSampleSize);
setLayoutHint(nWidth); //設(shè)定了柱狀體的寬度

9：設(shè)置每個(gè)柱狀體的偏移量

寫(xiě)到這里，大家會(huì)發(fā)現(xiàn)，運(yùn)行之后，效果差強(qiáng)人意，如圖所示。

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

修改柱狀圖的偏移需要在QwtColumnSymbol類中進(jìn)行修改，那么重寫(xiě)該類，叫做CustomBarChartColumnSymbol這個(gè)名字，對(duì)draw函數(shù)進(jìn)行重載

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

加入QWT源碼之后，可以查看到draw函數(shù)的實(shí)現(xiàn)，我們需要仿照源碼中進(jìn)行實(shí)現(xiàn)，只是修改下顯示位置。因?yàn)樵赒wtColumnSymbol中，修改柱狀圖區(qū)域的類未對(duì)外開(kāi)放，所以，只能依靠draw的QwtColumnRect 類進(jìn)行修改。

當(dāng)draw在調(diào)用drawBox函數(shù)時(shí)，需要將修改的QwtColumnRect的區(qū)域傳給父類，這樣就會(huì)修改顯示位置。

直接上代碼更直接一些

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

修改的位置，其實(shí)是對(duì)QwtColumnRect的 QwtInterval hInterval; 進(jìn)行修改。因?yàn)閷?shí)現(xiàn)的是需要對(duì)X軸進(jìn)行偏移，所以只對(duì)該參數(shù)進(jìn)行修改，其余按照父類的draw進(jìn)行實(shí)現(xiàn)。

CustomBarChartColumnSymbol的代碼實(shí)現(xiàn)

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進(jìn)行設(shè)置的。

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

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

在實(shí)現(xiàn)過(guò)程中，大家會(huì)發(fā)現(xiàn)，實(shí)現(xiàn)的網(wǎng)格效果和我的有些不一致，網(wǎng)格線并沒(méi)有呈現(xiàn)閉合狀態(tài)，可以使用以下代碼實(shí)現(xiàn)

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

感謝您能讀到這里，小編希望您對(duì)“Qt如何使用QWT繪制柱狀圖”這一關(guān)鍵問(wèn)題有了從實(shí)踐層面最深刻的體會(huì)，具體使用情況還需要大家自己動(dòng)手實(shí)踐使用過(guò)才能領(lǐng)會(huì)，如果想閱讀更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道！