Qt Chart 模块化封装曲线图

一 版本说明

二 完成示例

此文章包含：曲线轴设置，曲线切换，单条曲线显示，坐标轴。。。

三 曲线图UI创建

在UI界面拖放一个QWidget,然后在 Widget里面放一个 graphicsView 

四 代码介绍

1 头文件

#include <QString>
#include <QTimer>
#include <QMessageBox>
#include <QDateTime>
#include <QFile>
#include <QFileDialog>
#include <QDebug>
#include <QFileInfo>
#include <QSerialPortInfo>
#include <QtSerialPort/QSerialPort>
#include <QtCharts/QChartView>
#include <QtCharts/QLineSeries>
#include <QValueAxis>
#include <QPointF>
#include <QAxObject>
#include <QChartView>
#include <QtMath>
#include <QMimeData>//曲线函数声明  一定要包含
QT_CHARTS_USE_NAMESPACE#define MAX_X   (15)    //X轴长度
#define X_LEN   (15)    //X分辨率
#define Y_LEN   (10)    //Y分辨率#define TEC_MIN_Y   (-10)   //Y轴最小长度
#define TEC_MAX_Y   (85)   //Y轴最大长度QTimer *timer1;//用作曲线点定时添加QLabel *label_coordinate;//坐标显示QGraphicsLineItem *x_line, *y_line;//十字线double qcuisition_interval;//采样时间间隔 我这里采用分钟记数，所以一秒钟累加 1.0f / 60.0fdouble record_x_min, record_x_max;//X轴记录点//两条线段
QChart tec_1_2_temperature_chart;
QValueAxis tec_1_2_temperature_axisX, tec_1_2_temperature_axisY;//X轴和Y轴
QLineSeries line_tec_1_2_set_temperature[2], line_tec_1_2_current_temperature[2];//设置温度，实时温度
QString line_tec_1_2_set_temperature_name[2] = {"TEC1设置", "TEC2设置"};
QString line_tec_1_2_current_temperature_name[2] = {"TEC1实时", "TEC2实时"};
QPen line_tec_1_2_set_temperature_clocr[2] = {QColor(237, 28, 36), QColor(181, 206, 212)};
QPen line_tec_1_2_current_temperature_cloor[2] = {QColor(255, 127, 39), QColor(63, 72, 204)};
double tec_1_2_temperature_record_y_min = TEC_MIN_Y, tec_1_2_temperature_record_y_max = TEC_MAX_Y;//记录X,Y位置
double tec_1_2_temperature_count = 0;//记录当采集点

2 cpp文件

2.1 初始化函数

/**
* @brief 曲线图 初始化
* @param char图表类
* @param axisx:X轴
* @param x_name:x轴名字
* @param axisy:Y轴
* @param y_min:Y轴最小长度
* @param y_max:Y轴最大长度
* @param y_name:Y轴名字
* @retval None
*/
void interface_chart::Chart_Init(QChart &chart,QValueAxis &axisx, QString x_name,QValueAxis &axisy, int y_min, int y_max, QString y_name)
{int font_size = 11;QFont font("Microsoft YaHei", font_size);//微软雅黑chart.legend()->setFont(font);  // 设置字体及大小chart.setAnimationOptions(QChart::SeriesAnimations);//移动动画//设置坐标轴显示的范围axisx.setMin(0);axisx.setMax(MAX_X);axisy.setMin(y_min);axisy.setMax(y_max);//设置坐标轴上的格点axisx.setTickCount(X_LEN + 1);axisy.setTickCount(Y_LEN);//设置坐标轴字体大小axisx.setTitleFont(font);axisx.setLabelsFont(font);axisy.setTitleFont(font);axisy.setLabelsFont(font);//设置名字axisx.setTitleText(x_name);axisy.setTitleText(y_name);//设置网格显示axisy.setGridLineVisible(true);chart.addAxis(&axisx, Qt::AlignBottom);//这个就是控制坐标系显示参数的位置chart.addAxis(&axisy, Qt::AlignLeft);
}/**
* @brief 曲线图初始化
* @param char图表类
* @param axisx:X轴
* @param axisy:Y轴
* @param spinlineseries:线段
* @param spinlineseries_name:曲线名称
* @param spinlineseriespen:曲线颜色
* @retval None
*/
void interface_chart::QLineSeries_Init(QChart &chart,QValueAxis &axisx, QValueAxis &axisy,QLineSeries &spinlineseries, QString spinlineseries_name, QPen spinlineseries_pen)
{//初始化QLineSeries的实例spinlineseries.setUseOpenGL(true);//设置曲线的名称spinlineseries.setName(spinlineseries_name);//设置曲线线颜色spinlineseries.setPen(spinlineseries_pen);QPen pen = spinlineseries.pen();pen.setWidthF(1.7f);spinlineseries.setPen(pen);//把曲线添加到QChart的实例chart中chart.addSeries(&spinlineseries);//把曲线关联到坐标轴spinlineseries.attachAxis(&axisx);spinlineseries.attachAxis(&axisy);
}

2.2 初始化函数调用

  
/*======================曲线类======================*///TEC 1-2温度Chart_Init(tec_1_2_temperature_chart,tec_1_2_temperature_axisX, "时间/分",tec_1_2_temperature_axisY, TEC_MIN_Y, TEC_MAX_Y, "温度/°C");for(int i =0 ; i < 2; i++){QLineSeries_Init(tec_1_2_temperature_chart,tec_1_2_temperature_axisX, tec_1_2_temperature_axisY,line_tec_1_2_set_temperature[i], line_tec_1_2_set_temperature_name[i], line_tec_1_2_set_temperature_clocr[i]);QLineSeries_Init(tec_1_2_temperature_chart,tec_1_2_temperature_axisX, tec_1_2_temperature_axisY,line_tec_1_2_current_temperature[i], line_tec_1_2_current_temperature_name[i], line_tec_1_2_current_temperature_cloor[i]);}/*======================定时器设置======================*///采样间隔设置qcuisition_interval = 5 / 60.0f;timer1->setInterval(5000);/*=====================十字线======================*///显示十字线x_line = new QGraphicsLineItem();y_line = new QGraphicsLineItem();x_line->setVisible(true);y_line->setVisible(true);x_line->setZValue(2); // 设置Z值为2，确保在最顶层显示y_line->setZValue(2);/*======================graphicsView======================*/ui->graphicsView->setRenderHint(QPainter::Antialiasing);//抗锯齿ui->graphicsView->setRenderHint(QPainter::SmoothPixmapTransform);//曲线动画//用双缓冲技术可以减少闪烁和提高绘图性能ui->graphicsView->setViewportUpdateMode(QGraphicsView::FullViewportUpdate);ui->graphicsView->setChart(&tec_1_2_temperature_chart); //设置曲线图ui->graphicsView->scene()->addItem(x_line);ui->graphicsView->scene()->addItem(y_line);ui->graphicsView->installEventFilter(this); // 设置事件过滤器 后续坐标轴必须要用到的//强制生成鼠标事件ui->graphicsView->setAttribute(Qt::WA_Hover,true);/*=====================标显示======================*///坐标显示label_coordinate = new QLabel(ui->graphicsView);label_coordinate->move(0,0);label_coordinate->setStyleSheet("color: black;");label_coordinate->setFont(QFont("Microsoft YaHei", 10));label_coordinate->show(); // 显示出来// 设置label_coordinate的大小QFontMetrics fm(label_coordinate->font());int textWidth = fm.horizontalAdvance("x: 123.45\ny: 67.89"); // 根据显示的内容计算宽度int textHeight = fm.height() * 2; // 两行文本高度label_coordinate->setFixedSize(textWidth, textHeight);

2.3 事件函数

用于坐标轴生成

/**
* @brief 事件过滤
* @retval None
*/
bool interface_chart::eventFilter(QObject *obj, QEvent *event)
{if (obj == ui->graphicsView){if(event->type() == QEvent::HoverMove){QMouseEvent *mouseEvent = static_cast<QMouseEvent*>(event);QPointF mouse_scenePos = ui->graphicsView->mapToScene(mouseEvent->pos());QPointF scenePos =  ui->graphicsView->chart()->mapToValue(mouseEvent->pos());QString coordinate = QString("x: %1\ny: %2\n").arg(QString::number(scenePos.x(), 'f', 2), QString::number(scenePos.y(), 'f', 2));label_coordinate->setText(coordinate);label_coordinate->move(mouseEvent->x() + 7, mouseEvent->y() - 42);x_line->setLine(mouse_scenePos.x(), 0, mouse_scenePos.x(), ui->graphicsView->height());y_line->setLine(0, mouse_scenePos.y(), ui->graphicsView->width(), mouse_scenePos.y());}else if (event->type() == QEvent::Enter){
//            qDebug() << "鼠标进入了graphicsView";x_line->setVisible(true);y_line->setVisible(true);this->setCursor(Qt::BlankCursor); //隐藏鼠标label_coordinate->setVisible(true);//坐标系label}else if (event->type() == QEvent::Leave){
//            qDebug() << "鼠标离开了graphicsView";x_line->setVisible(false);y_line->setVisible(false);this->setCursor(Qt::ArrowCursor); //显示鼠标label_coordinate->setVisible(false);//坐标系label}}return false;
}

2.4 曲线放大缩小

从 二章节 中看到曲线上面有4个Spinbox，分别设置曲线的X,Y轴的最大最小值。此处就不教控件拖拽了。直接你们自行解决。

/**
* @brief x min 槽函数
* @retval None
*/
void interface_chart::on_spinBox_x_min_valueChanged(double arg1)
{if(arg1 > ui->spinBox_x_max->value() - 1)//限制输入{ui->spinBox_x_min->setValue(ui->spinBox_x_min->value() - 0.5);return;}// 获取所有轴的列表QList<QAbstractAxis *> axesList = ui->graphicsView->chart()->axes();// 遍历轴列表，查找X轴和Y轴for (QAbstractAxis *axis : axesList){if (axis->orientation() == Qt::Horizontal){// 这是X轴QValueAxis *xAxis = qobject_cast<QValueAxis *>(axis);if (xAxis){xAxis->setMin(arg1);}}}record_x_min = arg1;
}/**
* @brief x max 槽函数
* @retval None
*/
void interface_chart::on_spinBox_x_max_valueChanged(double arg1)
{if(arg1 < ui->spinBox_x_min->value() + 1){ui->spinBox_x_max->setValue(ui->spinBox_x_max->value() + 0.5);return;}// 获取所有轴的列表QList<QAbstractAxis *> axesList = ui->graphicsView->chart()->axes();// 遍历轴列表，查找X轴和Y轴for (QAbstractAxis *axis : axesList){if (axis->orientation() == Qt::Horizontal){// 这是X轴QValueAxis *xAxis = qobject_cast<QValueAxis *>(axis);if (xAxis){xAxis->setMax(arg1);}}}record_x_max = arg1;
}/**
* @brief y min 槽函数
* @retval None
*/
void interface_chart::on_spinBox_y_min_valueChanged(int arg1)
{if(arg1 > ui->spinBox_y_max->value() - 1){ui->spinBox_y_min->setValue(ui->spinBox_y_min->value() - 1);return;}// 获取所有轴的列表QList<QAbstractAxis *> axesList = ui->graphicsView->chart()->axes();// 遍历轴列表，查找X轴和Y轴for (QAbstractAxis *axis : axesList){if (axis->orientation() == Qt::Vertical){// 这是Y轴QValueAxis *yAxis = qobject_cast<QValueAxis *>(axis);if (yAxis){yAxis->setMin(arg1);}}}//此处是为了方便多个线段的时候，切换曲线还能维持在上次的Y轴。switch(ui->comboBox_chart->currentIndex()){case 0:tec_1_2_temperature_record_y_min = arg1;break;}
}/**
* @brief y max 槽函数
* @retval None
*/
void interface_chart::on_spinBox_y_max_valueChanged(int arg1)
{if(arg1 < ui->spinBox_y_min->value() + 1){ui->spinBox_y_max->setValue(ui->spinBox_y_max->value() + 1);return;}// 获取所有轴的列表QList<QAbstractAxis *> axesList = ui->graphicsView->chart()->axes();// 遍历轴列表，查找X轴和Y轴for (QAbstractAxis *axis : axesList){if (axis->orientation() == Qt::Vertical){// 这是Y轴QValueAxis *yAxis = qobject_cast<QValueAxis *>(axis);if (yAxis){yAxis->setMax(arg1);}}}switch(ui->comboBox_chart->currentIndex()){case 0:tec_1_2_temperature_record_y_max = arg1;break;}
}

2.5 曲线切换

前后两个for循环实属无奈，线段函数好想有bug,隐藏了，但是隐藏不掉。只能用这两个来操作

/**
* @brief chart切换 槽函数
* @retval None
*/
void interface_chart::on_comboBox_chart_activated(int index)
{//先隐藏当前曲线for(int i = 0; i < ui->graphicsView->chart()->series().size(); i++)ui->graphicsView->chart()->series().value(i)->setVisible(false);switch(index){case 0:ui->graphicsView->setChart(&tec_1_2_temperature_chart);break;}//X轴，防止一次调用多个曲线类执行on_spinBox_x_min_valueChanged(ui->spinBox_x_min->value());on_spinBox_x_max_valueChanged(ui->spinBox_x_max->value());//Y轴switch(index){case 0:ui->spinBox_y_min->setValue(tec_1_2_temperature_record_y_min);ui->spinBox_y_max->setValue(tec_1_2_temperature_record_y_max);break;}//设置完毕之后显示刚设置的曲线for(int i = 0; i < ui->graphicsView->chart()->series().size(); i++)ui->graphicsView->chart()->series().value(i)->setVisible(true);Checkbox_Chennel_Select();//后面会介绍
}

2.6 当前页曲线清除

多页你们自己想吧

        //遍历清除for(int i = 0; i < ui->graphicsView->chart()->series().count(); i++){QLineSeries *lineSeries = qobject_cast<QLineSeries*>(ui->graphicsView->chart()->series().value(i));lineSeries->clear();}switch(ui->comboBox_chart->currentIndex()){case 0:tec_1_2_temperature_count = 0;//计数值break;}

2.7 通道选择

/**
* @brief 通道选择
* @retval None
*/
void interface_chart::Checkbox_Chennel_Select(void)
{//上个项目方了6个，懒得删你们自己看着办int Checkbox_Chennel[6];Checkbox_Chennel[0] = ui->checkBox_channel_1->isChecked();Checkbox_Chennel[1] = ui->checkBox_channel_2->isChecked();Checkbox_Chennel[2] = ui->checkBox_channel_3->isChecked();Checkbox_Chennel[3] = ui->checkBox_channel_4->isChecked();Checkbox_Chennel[4] = ui->checkBox_channel_5->isChecked();Checkbox_Chennel[5] = ui->checkBox_channel_6->isChecked();//选择那一条chart显示switch(ui->comboBox_chart->currentIndex()){case 0:case 1:ui->checkBox_channel_1->setHidden(false);//开关隐藏设置ui->checkBox_channel_2->setHidden(false);ui->checkBox_channel_3->setHidden(true);ui->checkBox_channel_4->setHidden(true);ui->checkBox_channel_5->setHidden(true);ui->checkBox_channel_6->setHidden(true);//设置是否隐藏ui->graphicsView->chart()->series().value(0)->setVisible(Checkbox_Chennel[0]);ui->graphicsView->chart()->series().value(1)->setVisible(Checkbox_Chennel[0]);ui->graphicsView->chart()->series().value(2)->setVisible(Checkbox_Chennel[1]);ui->graphicsView->chart()->series().value(3)->setVisible(Checkbox_Chennel[1]);break;case 2:case 3:ui->checkBox_channel_1->setHidden(false);ui->checkBox_channel_2->setHidden(false);ui->checkBox_channel_3->setHidden(false);ui->checkBox_channel_4->setHidden(false);ui->checkBox_channel_5->setHidden(true);ui->checkBox_channel_6->setHidden(true);for(int i = 0; i < 4; i++)ui->graphicsView->chart()->series().value(i)->setVisible(Checkbox_Chennel[i]);break;}
}

2.8 曲线点添加

/**
* @brief 定时器 槽函数
* @retval None
*/
void interface_chart::Timer1_Slots(void)
{//TEC1_2设置温度for(int i = 0; i < 2; i++){line_tec_1_2_set_temperature[i].append(tec_1_2_temperature_count,    “添加的数字”);line_tec_1_2_current_temperature[i].append(tec_1_2_temperature_count, “添加的数字”);}tec_1_2_temperature_count+=qcuisition_interval;
}