一、QWT弊端

QWT只有四个坐标轴，QwtPlot::xBottom、QwtPlot::xTop、QwtPlot::yLeft、QwtPlot::yRight，如果我想在画布上添加多条曲线（大于4条），并能看到每条曲线的读数，显然四个坐标系是远远不够用的（一个坐标系无法同时显示两条曲线的读数）。

在一个坐标系上，无法同时很好的查阅曲线，因为有的曲线波动区间大，有的曲线波动区间小，例如：曲线1在0-100，曲线2在0-1，如果两条曲线在同一个坐标系中，注定无法同时看全两条曲线（屏幕就那么大），要看曲线1，曲线2就会很窄（看不清）；要看曲线2，曲线1就会很宽（看不全）。

二、效果展示

三、思路分析

3.1、数据映射

为了解决这个问题，我们可以将y轴范围固定死为0-10，然后将曲线数据集映射到0-10上，例如：曲线范围为10-80，

例如：将[40,80]映射到[3,5]
f(40) = (5-3)(40-40)/(80-40) + 3 = 3
f(80) = (5-3)(80-40)/(80-40) + 3 = 5

通过上面的方式进行映射，不管曲线的波动范围有多大，不管有多少条曲线，它都可以完美的显示在画布上了。

3.2、刻度值

为了能显示每条曲线的坐标值，可以自定义一个坐标轴，选中一条曲线，马上获取该条曲线的最大、最小值，然后计算出显示的刻度值，并更新到坐标轴上即可，这样就实现了，选哪条曲线，就显示哪条曲线的刻度值。

自定义坐标轴

#pragma once
#include <QWidget>
#include <QPaintEvent>
#include <QPainter>
#include <QFontMetrics>class Axis : public QWidget
{public:Axis(QWidget* parent = 0);~Axis(void);enum Axis_State{Label_Left = 1,Label_Right};public:QColor get_axis_color();void set_axis_color(QColor color_axis);               //设置坐标轴颜色void set_axis_label(QStringList axis_label);          //设置坐标轴刻度值void set_axis_label_color(QColor color_axis_label);   //设置坐标轴刻度值颜色void set_axis_state(Axis_State axis_state);           //设置坐标轴形式，刻度值在左、刻度值在右void set_axis_label_size(int label_size);             //设置坐标轴刻度值字体大小protected:void paintEvent(QPaintEvent *);private:Axis_State axis_state;QColor color_axis;QColor color_label;QStringList axis_label;int label_size;
};

#include "Axis.h"Axis::Axis(QWidget* parent) : QWidget(parent)
{color_axis = QColor(220,220,220);color_label = QColor(0,0,0);axis_state = Label_Left;axis_label<<"0"<<"1"<<"2"<<"3"<<"4"<<"5"<<"6"<<"7"<<"8"<<"9"<<"10";label_size = 10;
}Axis::~Axis(void)
{}void Axis::paintEvent(QPaintEvent *)
{QPainter painter(this);painter.setRenderHint(QPainter::Antialiasing);//设置抗锯齿if(axis_label.length()<10)return;painter.setPen(color_label);painter.setFont(QFont("Times", label_size, QFont::Bold));QFontMetrics fm = painter.fontMetrics();if(axis_state == Label_Left){painter.setBrush(color_axis);QRect rect(QRect(3*this->width()/4,0,this->width()/4,this->height()));painter.drawRect(rect);for(int i=0; i<=10; i++){int label_width = fm.width(axis_label[i]);painter.drawText(3*this->width()/4-label_width*1.2,this->height()-i*(this->height()/10.4),axis_label[i]);}}else{painter.setBrush(color_axis);QRect rect(QRect(0,0,this->width()/4,this->height()));painter.drawRect(rect);for(int i=0; i<=10; i++){int label_width = fm.width(axis_label[i]);painter.drawText(this->width()/4+label_width*0.2,this->height()-i*(this->height()/10.4),axis_label[i]);}}
}QColor Axis::get_axis_color()
{return color_axis;
}
void Axis::set_axis_color(QColor color_axis)
{this->color_axis = color_axis;update();
}
void Axis::set_axis_label(QStringList axis_label)
{this->axis_label = axis_label;update();
}
void Axis::set_axis_label_color(QColor color_axis_label)
{this->color_label = color_axis_label;update();
}
void Axis::set_axis_state(Axis_State axis_state)
{this->axis_state = axis_state;update();
}void Axis::set_axis_label_size(int label_size)
{this->label_size = label_size;update();
}

注意：为了使刻度值和画布对齐，可以获取画布的尺寸，并定死坐标轴的高度与画布高度相等

QSize size = m_Plot_View->canvas()->size();m_axis_Left->setMinimumHeight(size.height());
m_axis_Left->setMaximumHeight(size.height());m_axis_Right->setMinimumHeight(size.height());
m_axis_Right->setMaximumHeight(size.height());

思想记录--QWT多曲线预览相关推荐

帆软问题记录：数据可预览，但是数据集正在加载
一.问题描述数据集数据预览没问题,但是数据集字段无法显示,一直都是正在加载- 二.解决办法把关联方式改成left join,inner join的方式可解决问题
H5拍照、预览、压缩、上传采坑记录
H5拍照.预览.压缩.上传采坑记录公司项目前段时间需要实现手机拍照上传的功能,本来以为用createObjectURL和canvas可以很轻松的实现,结果发现问题多多,特此记录下来. DEMO预览( ...
cocos creator周边工具开发【spine预览】小记
cocos creator周边工具开发[spine预览]小记前言在工作加班之余用ccc开发了一个丑陋的spine动效预览工具,目前只支持window上运行: 在n个版本的更新和需求下暂时算开发完成 ...
vue框架实现pdf在线预览
记录下实现pdf预览展示的坑,刚开始使用vue-pdf在本地运行是可以展示的,但是发布测试环境展示不出来报以下错误: 网上找的的是: 网上搜到的解决方法但是我看半天不知道怎么解决,然后换pdfjs ...
上传身份证照片js_html+css+js 实现拍照预览上传图片功能
前言:我们在做网页时经常会需要有上传图片的需求,可能是选择图片或者拍照上传,如果简单的使用这种方式虽然也能实现功能,但用户体验上可能会差了一些,所以本文记录了使用css+js实现图片选中后的预览及压缩 ...
vue项目实现前端预览word和pdf格式文件
最近做vue项目遇到一个需求,就是前端实现上传word或pdf文件后,后端返回文件对应的文件流,前端需要在页面上展示出来.word预览简单一些,pdf预览我试过pdfjs,vue-pdf总是报各种奇奇 ...
Camera2 打开相机预览界面
camera2 是21之后的api用于代替Camera,提供更加牛X的对相机hardware操作的api 参考资料:http://www.jcodecraeer.com/a/anzhuokaifa/a ...
PDF文件在线预览之pdf.js
概述 pdf.js在是一个很成熟的技术了,网上也有很多相关的资料.但是都相对比较零散,所以当时我在做的时候还是花了较多的一个时间.本文在这里主要是对自己当时在处理时候碰到的一些相关问题做一个整理记录. ...
前端实现docx、pdf格式文件在线预览
介绍在业务中,如果遇到文档管理类的功能,会出现需要在线预览的业务需求,本文主要是通过第三方库来实现文档预览功能,并将其封装成preview组件 docx docx的实现需要使用docx-previe ...

思想记录--QWT多曲线预览