广告

扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 后端开发 > 其他教程 >Qt使用QWT绘制柱状图详解
  • 448

0
分享到

Qt使用QWT绘制柱状图详解

2024-04-02 19:04:59 448人浏览 独家记忆
摘要

目录1：设置QChart的整体背景色2：设置有效区域的背景色3：设置X、Y坐标轴数据4：设置网格线5：插入实际数据6：X轴刻度值优化7：设置X轴文本偏移8：设置每个柱状体的宽度9：设

有的时候我们会遇到这样一种功能，需要在柱状图中显示不同颜色的柱状体，每个主状态代表的状态不同，那么如果只是用简单的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) :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柱状图内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: Qt使用QWT绘制柱状图详解

本文链接: https://www.lsjlt.com/news/163629.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档
去做题
猜你喜欢
  • Qt使用QWT绘制柱状图详解
    目录1：设置QChart的整体背景色2：设置有效区域的背景色3：设置X、Y坐标轴数据4：设置网格线5：插入实际数据6：X轴刻度值优化7：设置X轴文本偏移8：设置每个柱状体的宽度9：设...
    99+
    2022-11-13
  • Qt如何使用QWT绘制柱状图
    本文将为大家详细介绍“Qt如何使用QWT绘制柱状图”，内容步骤清晰详细，细节处理妥当，而小编每天都会更新不同的知识点，希望这篇“Qt如何使用QWT绘制柱状图”能够给你意想不到的收获，请大家跟着小编的思路慢慢深入，具体内容如下，一起去收获新知...
    99+
    2023-06-28
  • Python用 matplotlib 绘制柱状图
    目录1. 柱状图概述1.1什么是柱状图1.2柱状图使用场景1.3柱状图绘制步骤1.3案例展示 2. 柱状图属性2.1柱状体颜色填充2.2状描边设置2.3状体边框宽度2.4刻度标签3....
    99+
    2022-11-12
  • 详解如何利用JavaScript绘制堆叠柱状图
    效果图 this.state.workChartList的数据结构 const workChartList = [ { name: "居民热线", chartData: [5, ...
    99+
    2022-11-13
  • D3.js实现绘制柱状图的教程详解
    目录获取处理数据设置图表大小位置信息绘制画布创建比例尺绘制数据绘制坐标轴优化tickSize 和 nice 属性在了解了svg和d3的基础知识以及画图最重要的比例尺，接下来就可以开始...
    99+
    2022-11-13
    D3.js绘制柱状图 D3.js 柱状图
  • python使用matplotlib绘制柱状图教程
    Matplotlib的概念这里就不多介绍了，关于绘图库Matplotlib的安装方法：点击这里 小编之前也和大家分享过python使用matplotlib实现的折线图和制饼图效果，感兴趣的朋友们也可以点击查...
    99+
    2022-06-04
    教程 柱状图 python
  • WPF实现绘制统计图(柱状图)的方法详解
    目录前言实现代码效果预览前言 有小伙伴提出需要实现统计图。  由于在WPF中没有现成的统计图控件，所以我们自己实现一个。 PS：有更好的方式欢迎推荐。 实现代码 一、创建...
    99+
    2022-11-13
  • 使用Python怎么绘制柱状图和条形图
    今天就跟大家聊聊有关使用Python怎么绘制柱状图和条形图，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。一、实验目的：掌握Python中柱状图、条形图绘图函数的使用利用上述绘图函数实...
    99+
    2023-06-15
  • 使用Echart实现绘制立体的柱状图
    效果图： 实现代码： var xData3 = ["6", "7", "8", "9","10","11"]; var data3 = [1209, 1715, 2408,...
    99+
    2022-11-13
  • 怎么利用JavaScript绘制堆叠柱状图
    这篇文章主要讲解了“怎么利用JavaScript绘制堆叠柱状图”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“怎么利用JavaScript绘制堆叠柱状图”吧！效果图this.state.wor...
    99+
    2023-06-29
  • Vue使用Echarts画柱状图详解
    目录前言柱状图实现步骤柱状图常见效果标记显示前言 本篇来学习下柱状图的实现 柱状图实现步骤 ECharts 最基本的代码结构准备x轴的数据准备 y 轴的数据准备 option , 将...
    99+
    2022-12-16
    Vue Echarts画柱状图 Vue画柱状图
  • 详解vue使用Echarts画柱状图
    目录1 引入Echarts1.1 安装1.2 引入2 基本柱状图3 多列柱状图4 柱状图样式设置4.1 柱条样式4.2 柱条间距5 动态排序柱状图6 总结1 引入Echarts 1....
    99+
    2022-11-12
  • QT利用QPainter绘制三维饼状图
    目录一、项目介绍二、项目基本配置三、UI界面设置四、主程序实现4.1 widget.h头文件4.2 widget.cpp源文件五、效果演示一、项目介绍 本文介绍利用QPainter实...
    99+
    2022-11-13
  • 使用matplotlib绘制并排柱状图的实战案例
    目录一、概念说明二、数据展示三、图像绘制总结一、概念说明 柱状图(bar chart)，从相同的横坐标出发，以不同的数值大小来设定柱子的高度，进而表示无序或有序的定性数据间某个定量指...
    99+
    2022-11-11
  • 如何在Python中使用ECharts绘制堆叠柱状图
    在数据可视化领域，堆叠柱状图是一种常见的可视化方式。它将多个数据系列绘制成一个条形，每个条形由多个子项组成，每个子项对应一个数据系列，在同一坐标系下进行展示。这种图表可以用于比较不同类别或数据系列的总大小、每个类别或数据系列的组成比例等。在...
    99+
    2023-12-17
    Python echarts 堆叠柱状图
  • Python数据分析之使用matplotlib绘制折线图、柱状图和柱线混合图
    目录matplotlib介绍matplotlib绘制折线图matplotlib绘制柱状图matplotlib绘制柱线混合图总结 matplotlib介绍 Matplotli...
    99+
    2022-11-13
  • 利用Matlab实现阴影柱状图的绘制
    目录示例图使用教程1.基本使用2.添加图例3.阴影格式4.特殊结构5.额外修饰工具函数完整代码封面图绘制代码阴影柱状图绘制的代码MATHWORKS上也有，不过是生成图片后，识别图像上...
    99+
    2022-11-13
  • Python使用Matplotlib库绘制双y轴图形（柱状图+折线图）
    今天是第一次写踩坑日记系列，这个系列用来记录在Python和R学习过程中遇到的问题和结果。今天介绍的是使用Python的matplotlib库绘制两个y轴图的一些基本用法与踩坑行为。希望可以...
    99+
    2023-08-31
    python
  • 怎么使用vue+echarts绘制折线图、柱状图和扇形图
    这篇“怎么使用vue+echarts绘制折线图、柱状图和扇形图”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“怎么使用vue+...
    99+
    2023-07-05
  • QT如何利用QPainter绘制三维饼状图
    这篇“QT如何利用QPainter绘制三维饼状图”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“QT如何利用QPainter绘...
    99+
    2023-07-02
软考高级职称资格查询
软考职称历年真题下载
软考职称资料下载
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作