利用QCustomePlot绘制热力图，瀑布图，频谱色图等

有一个问题l困扰了我很多天，就是如何在QT中实现跟MATALB中imagesc函数一样能够根据二维数组存储的数据的大小自动绘制不同颜色的图形，就如下图所示的瀑布图。

由于自己是边学边做，没有经过系统学习，很多不知道，一开始想自己手工撸代码实现，写了大半天累的要死，后来突然搜索到两篇关于瀑布图的文章，最后学习了解了相关知识最后终于实现了自己想要的功能。（所参考文章在最后）

先放部分代码以及实现的功能，此部分代码只是一个初步使用demo，功能后期完善再写一个完善的

void MainWindow:: SetLofar_char()//显示Lofar瀑布图
{
    fp3 = ui->widget_lofar; //创建一个画图指针

    fp3->setInteractions(QCP::iRangeDrag|QCP::iRangeZoom);//可拖拽+可滚轮缩放
   // fp3->axisRect()->insetLayout() ->setInsetAlignment(0,Qt::AlignRight|Qt::AlignTop); //图例置于右上
    /*
    Qt::AlignLeft|Qt::AlignTop); //图例置于左上
    Qt::AlignCenter|Qt::AlignTop);//图例置于中上
    Qt::AlignRight|Qt::AlignTop);//图例置于右上
    Qt::AlignLeft|Qt::AlignCenter);//图例置于左中
    Qt::AlignCenter);             //图例置于正中
    Qt::AlignRight|Qt::AlignCenter);//图例置于右中
    Qt::AlignLeft|Qt::AlignBottom);//图例置于左下
    Qt::AlignCenter|Qt::AlignBottom);//图例置于中下*/


   // fp3->legend->setVisible(true);//显示图例
    fp3->xAxis->setLabel("频率/Hz(单位:*10^4)");//x轴显示文字
    fp3->yAxis->setLabel("幅度/dB");//y轴显示文字
    fp3->xAxis->setRange(0,2.5);//当前X轴显示范围
    fp3->yAxis->setRange(-5,5);//当前y轴显示范围

 /*   //每条曲线都会独占一个graph()
    fp3->addGraph();
    fp3->graph(0)->setPen(QPen(Qt::blue));//曲线颜色

    fp3->graph(0)->setBrush(QBrush(QColor(0,255,255,20)));//曲线与X轴包围区的颜色
    //自动调整XY轴的范围，以便显示出graph(0)中所有的点
    //给第一个graph设置rescaleAxes()，后续所有graph都设置rescaleAxes(true)即可实现显示所有曲线
    fp3->graph(0)->rescaleAxes();*/

    //通过传递的轴的QCustomPlot进行注册,简洁理解QCPColorMap的数据为（x轴，y轴;颜色，值value）
    m_pColorMap = new QCPColorMap(fp3->xAxis,fp3->yAxis);
    m_pColorMap->data()->setSize(1024,50);//设置整个图（x,y）点数
    m_pColorMap->data()->setRange(QCPRange(0,2.5),QCPRange(-5,5));//setRange是设置X轴以及Y轴的范围

    //颜色范围 == 色条
   /* m_pColorScale = new QCPColorScale(fp3);
    fp3->plotLayout()->addElement(0,1,m_pColorScale);//默认右侧添加色彩图
    m_pColorScale->setType(QCPAxis::atRight);
    m_pColorScale->setDataRange(QCPRange(0, 100));//颜色范围对应的取值范围data_maxColorBar这里为测量得到的最大值来代表颜色的最大值
    m_pColorScale->axis()->ticker()->setTickCount(6);
    m_pColorScale->axis()->setLabel("色彩");//色条的名

   // m_pColorMap->setColorScale(m_pColorScale); //热图连接色条

    m_pColorMap->setGradient(QCPColorGradient::gpCold);//设置默认渐进色变化（可在QCPColorGradient中查看）
 // QSharedPointer<QCPColorGradient> colorLayout(new QCPColorGradient);//生成颜色渐进变化对象
    QMap<double, QColor> color_layout;
    m_pColorGradient = new QCPColorGradient();//自定义的渐进色变化对象
    //m_pColorGradient->setColorStops(colorLayout);//QMap<double, QColor> color_layout为;颜*色*布局范围(double取值为0，1)
    m_pColorMap->setGradient(*m_pColorGradient);//设置渐进色变化
    m_pColorMap->rescaleDataRange();

    QCPMarginGroup *marginGroup = new QCPMarginGroup(fp3);
    fp3->axisRect()->setMarginGroup(QCP::msBottom | QCP::msTop, marginGroup);
    m_pColorScale->setMarginGroup(QCP::msBottom | QCP::msTop, marginGroup);*/

  for(int x=0;x<=1024;x++)
  {
    for(int y=0;y<50;y++)
    {
        m_pColorMap->data()->setCell(x,y,qCos(x/10.0)+qSin(y/10.0));
    }
  }
    m_pColorMap->setGradient(QCPColorGradient::gpCold);//设置默认渐进色变化（可在QCPColorGradient中查看）
    m_pColorMap->rescaleDataRange(true);

// 立即刷新图像
    fp3->rescaleAxes();//自适应大小
    ui->widget_lofar->replot();

}

最后实现的效果图：

关于渐变色的不同样子可以自己选择设置

 m_pColorMap->setGradient(QCPColorGradient::gpCold);//设置默认渐进色变化（可在QCPColorGradient中查看）

m_pColorMap = new QCPColorMap(fp3->xAxis,fp3->yAxis);

这句代码之后会在坐标轴上面出现这一坨黑乎乎的东西

//颜色范围 == 色条

m_pColorScale = new QCPColorScale(fp3);

fp3->plotLayout()->addElement(0,1,m_pColorScale);//右侧添加

这两句是添加色条

按理说最后应该能实现根据点击色条的颜色不同主窗口颜色变化，但是我没有测试实现，具体可以看参考文章1的代码，如果有实现了可以交流下，我由于项目不需要就先跳过这部分。

这里主要应用的是QCustomPlot中的QCPColor相关的部分函数等，可以点进去查看

点进去可以在下面看到详细的用法，下一篇文章我会再写写对于qcpcolormap里面手册部分的翻译

参考文章：

1：Qt——绘制瀑布图/热度图

2：利用Hellocharts绘制频谱瀑布图（雨图）

尘埃飞舞

发布了27 篇原创文章 · 获赞 6 · 访问量 5064

私信关注

利用QCustomePlot绘制热力图，瀑布图，频谱色图等

猜你喜欢