QT 基于qcustomplot实现热力图（一）

QT 基于qcustomplot实现热力图（二）-优快云博客

QT 基于qcustomplot实现热力图（三）-优快云博客

背景

在某些项目中使用到热力图，之前想使用QT+echarts去实现，后续发现qcustomplot里面也有热力图部分，一次用它去实现，一下是过程的记录。

目的

想实现效果每一列的值相同或者随机，具体效果如下：

本次实现使用qcustomplot中的QCPColorScale和QCPColorMap，直接上代码：

实现

1.创建基础工程

使用Qtcreateor创建基础工程，步骤不在细说。

2.下载文件

再下载qcustomplot

https://download.youkuaiyun.com/download/ZYH10140/88998869?spm=1001.2101.3001.9500

3.代码如下

main.cpp

#include "mainwindow.h"

#include <QApplication>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    MainWindow w;
    w.show();
    return a.exec();
}

mainwindow.h

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>
#include <QTimer>
#include "qcustomplot.h"
#include <QtCharts>

QT_BEGIN_NAMESPACE
namespace Ui { class MainWindow; }
QT_END_NAMESPACE

class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    MainWindow(QWidget *parent = nullptr);
    ~MainWindow();
public slots:
    void timeoutPro();

private:
    Ui::MainWindow *ui;
    QTimer timer_;
    QVector<QVector<double>> data_;;
    QVector<double> xdata_;
    QVector<double> ydata_;
    QCPColorScale *m_colorScale_;
    QCPColorMap *m_colorMap_;

};
#endif // MAINWINDOW_H

 mainwindow.cpp

#include "mainwindow.h"
#include "ui_mainwindow.h"

int numRows = 10;
int numCols = 10;

#define static_Type 1 //静态热力图
#define dynamic_Type 0   //动态热力图
#define real_update_Type 0 //实时刷新热力图

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);

    //添加画布
    ui->widget->addGraph();
    m_colorMap_ = new QCPColorMap(ui->widget->xAxis, ui->widget->yAxis);

    //添加一个色阶
    m_colorScale_ = new QCPColorScale(ui->widget);
    ui->widget->plotLayout()->addElement(0, 1, m_colorScale_); // add it to the right of the main axis rect
    m_colorScale_->setType(QCPAxis::atRight); // scale shall be vertical bar with tick/axis labels right (actually atRight is already the default)
    m_colorMap_->setColorScale(m_colorScale_); // associate the color map with the color scale

    //设置渐变色风格
    m_colorMap_->setGradient(QCPColorGradient::gpJet);

    //设置颜色空间的大小m*n矩形 下面需要注意行和列对应的x和y
    m_colorMap_->data()->setSize(numCols, numRows);
    m_colorMap_->data()->setRange(QCPRange(0, numCols-1), QCPRange(0, numRows-1));

    // 设置颜色映射
    QCPColorGradient gradient;
    gradient.setColorInterpolation(QCPColorGradient::ciRGB);
    gradient.setColorStopAt(0, Qt::blue);
    gradient.setColorStopAt(0.5, Qt::green);
    gradient.setColorStopAt(1, Qt::red);
    m_colorMap_->setGradient(gradient);

    //x周可自由变换
    ui->widget->setInteractions(QCP::iRangeDrag | QCP::iRangeZoom | QCP::iSelectAxes |
                                         QCP::iSelectLegend | QCP::iSelectPlottables);
#if !real_update_Type
    //初始化数据
    for(int i = 0 ; i < numCols; i++)
    {
        QVector<double>tmp;
        for(int j = 0; j < numCols; j++)
        {
            tmp.append(qrand() % 100);//随机值
            tmp.append(i*10);//每列为定值
        }

        data_.append(tmp);
    }

    //初始化x
    for(int i = 0 ; i < numRows; i++)
    {
        ydata_.append(i);
    }
    //初始化y
    for(int i = 0 ; i < numCols; i++)
    {
        xdata_.append(i);
    }
#endif

    timer_.start(1*100);
    connect(&timer_, SIGNAL(timeout()),  this, SLOT(timeoutPro()));
}

MainWindow::~MainWindow()
{
    delete ui;
}


void MainWindow::timeoutPro()
{

#if static_Type
    for (int i = 0; i < data_.size(); ++i)
    {
        // 更新 ColorMap 数据
        for (int j = 0; j < data_.at(i).size(); ++j)
        {
            m_colorMap_->data()->setCell(i, j, data_[i][j]);
        }
    }

    timer_.stop();
#endif

    m_colorMap_->rescaleDataRange();
    m_colorMap_->rescaleAxes();
    ui->widget->replot();
}

注意：如果需要用鼠标控制缩放，则需要停止更新，本次是定时器只运行了一次；

总结

本次只实现静态的，但是无法满足项目应用，因此再次进行修改调整，改为到那个太刷新的，具体见: