本章节是仿造echarts的热力图：地址
效果图
QCustomPlot中热力图叫QCPColorMap，所以应该称为颜色图更为合适一点，一般来说一副颜色图会由两个部分组成
- QCPColorMap 颜色图
-
QCPColorScale 色条，供颜色图取色用的
除了这两个，还有一个重要的家伙，那就是颜色渐变QCPColorGradient，它决定了颜色图的数据对应的是什么颜色，QCPColorGradient预定义了9种颜色渐变，如下图所示
预定义的颜色渐变
颜色图除了x、y两个位置，还有一个z位置，z位置对应着颜色渐变中的颜色取值位置
静态热力图
void MainWindow::setupHeatmapDemo(QCustomPlot *customPlot)
{
QVector hours = {"12a", "1a", "2a", "3a", "4a", "5a", "6a",
"7a", "8a", "9a","10a","11a",
"12p", "1p", "2p", "3p", "4p", "5p",
"6p", "7p", "8p", "9p", "10p", "11p"};
QVector days = {"Saturday", "Friday", "Thursday",
"Wednesday", "Tuesday", "Monday", "Sunday"};
QVector> data = {{0,0,5},{0,1,1},{0,2,0},{0,3,0},{0,4,0},{0,5,0},{0,6,0},{0,7,0},{0,8,0},{0,9,0},{0,10,0},{0,11,2},{0,12,4},{0,13,1},{0,14,1},{0,15,3},{0,16,4},{0,17,6},{0,18,4},
{0,19,4},{0,20,3},{0,21,3},{0,22,2},{0,23,5},{1,0,7},{1,1,0},{1,2,0},{1,3,0},{1,4,0},{1,5,0},{1,6,0},{1,7,0},{1,8,0},{1,9,0},{1,10,5},{1,11,2},{1,12,2},{1,13,6},{1,14,9},{1,15,11},
{1,16,6},{1,17,7},{1,18,8},{1,19,12},{1,20,5},{1,21,5},{1,22,7},{1,23,2},{2,0,1},{2,1,1},{2,2,0},{2,3,0},{2,4,0},{2,5,0},{2,6,0},{2,7,0},{2,8,0},{2,9,0},{2,10,3},{2,11,2},{2,12,1},
{2,13,9},{2,14,8},{2,15,10},{2,16,6},{2,17,5},{2,18,5},{2,19,5},{2,20,7},{2,21,4},{2,22,2},{2,23,4},{3,0,7},{3,1,3},{3,2,0},{3,3,0},{3,4,0},{3,5,0},{3,6,0},{3,7,0},{3,8,1},
{3,9,0},{3,10,5},{3,11,4},{3,12,7},{3,13,14},{3,14,13},{3,15,12},{3,16,9},{3,17,5},{3,18,5},{3,19,10},{3,20,6},{3,21,4},{3,22,4},{3,23,1},{4,0,1},{4,1,3},{4,2,0},{4,3,0},{4,4,0},
{4,5,1},{4,6,0},{4,7,0},{4,8,0},{4,9,2},{4,10,4},{4,11,4},{4,12,2},{4,13,4},{4,14,4},{4,15,14},{4,16,12},{4,17,1},{4,18,8},{4,19,5},{4,20,3},{4,21,7},{4,22,3},{4,23,0},{5,0,2},
{5,1,1},{5,2,0},{5,3,3},{5,4,0},{5,5,0},{5,6,0},{5,7,0},{5,8,2},{5,9,0},{5,10,4},{5,11,1},{5,12,5},{5,13,10},{5,14,5},{5,15,7},{5,16,11},{5,17,6},{5,18,0},{5,19,5},{5,20,3},{5,21,4},
{5,22,2},{5,23,0},{6,0,1},{6,1,0},{6,2,0},{6,3,0},{6,4,0},{6,5,0},{6,6,0},{6,7,0},{6,8,0},{6,9,0},{6,10,1},{6,11,0},{6,12,2},{6,13,1},{6,14,3},{6,15,4},{6,16,0},{6,17,0},{6,18,0},
{6,19,0},{6,20,1},{6,21,2},{6,22,2},{6,23,6}};
QCPColorMap *heatmap = new QCPColorMap(customPlot->xAxis, customPlot->yAxis); // 构造一个颜色图
heatmap->data()->setSize(hours.size(), days.size()); // 设置颜色图数据维度，其内部维护着一个一维数组（一般表现为二维数组），这里可以理解为有多少个小方块
heatmap->data()->setRange(QCPRange(0.5, hours.size() - 0.5), QCPRange(0.5, days.size() - 0.5)); // 颜色图在x、y轴上的范围
// 设置轴的显示，这里使用文字轴，如果这部分还不会的请看 QCustomPlot之个性化外观（二）这章节
QSharedPointer xTicker(new QCPAxisTickerText);
QSharedPointer yTicker(new QCPAxisTickerText);
xTicker->setTicks(labelPositions(hours, 0.5), hours);
yTicker->setTicks(labelPositions(days, 0.5), days);
xTicker->setSubTickCount(1);
yTicker->setSubTickCount(1);
customPlot->xAxis->setTicker(xTicker);
customPlot->yAxis->setTicker(yTicker);
customPlot->xAxis->grid()->setPen(Qt::NoPen);
customPlot->yAxis->grid()->setPen(Qt::NoPen);
customPlot->xAxis->grid()->setSubGridVisible(true);
customPlot->yAxis->grid()->setSubGridVisible(true);
customPlot->xAxis->setSubTicks(true);
customPlot->yAxis->setSubTicks(true);
customPlot->xAxis->setTickLength(0);
customPlot->yAxis->setTickLength(0);
customPlot->xAxis->setSubTickLength(6);
customPlot->yAxis->setSubTickLength(6);
customPlot->xAxis->setRange(0, hours.size());
customPlot->yAxis->setRange(0, days.size());
for (int x = 0; x < hours.size(); ++x) {
for (int y = 0; y < days.size(); ++y) {
int z = data.at(hours.size() * y + x).at(2);
if (z) heatmap->data()->setCell(x, y, z); // 如果z不为0，则设置颜色值的位置
else heatmap->data()->setAlpha(x, y, 0); // z为0，设置为透明
}
}
QCPColorScale *colorScale = new QCPColorScale(customPlot); // 构造一个色条
colorScale->setType(QCPAxis::atBottom); // 水平显示
customPlot->plotLayout()->addElement(1, 0, colorScale); // 在颜色图下面显示
heatmap->setColorScale(colorScale);
QCPColorGradient gradient; // 色条使用的颜色渐变
gradient.setColorStopAt(0.0, QColor("#f6efa6")); // 设置色条开始时的颜色
gradient.setColorStopAt(1.0, QColor("#bf444c")); // 设置色条结束时的颜色
heatmap->setGradient(gradient);
// colorMap->rescaleDataRange(); // 自动计算数据范围，数据范围决定了哪些数据值映射到QCPColorGradient的颜色渐变当中
heatmap->setDataRange(QCPRange(0, 10)); // 为了保持与echart的例子一致，我们这里手动设置数据范围
heatmap->setInterpolate(false); // 为了显示小方块，我们禁用插值
// 保持色条与轴矩形边距一致
QCPMarginGroup *marginGroup = new QCPMarginGroup(customPlot);
customPlot->axisRect()->setMarginGroup(QCP::msLeft | QCP::msRight, marginGroup);
colorScale->setMarginGroup(QCP::msLeft | QCP::msRight, marginGroup);
}
其中labelPositions是返回labels所对应的位置的
QVector labelPositions(const QVector &labels, double offset = 0)
{
QVector result(labels.size());
for (int i = 0; i < labels.size(); ++i)
result[i] = i + offset;
return result;
}
动态热力图
动态热力图其实就是重新设置z的值
void MainWindow::setupDynamicHeatmapDemo(QCustomPlot *customPlot)
{
setupHeatmapDemo(customPlot);
connect(&dataTimer, SIGNAL(timeout()), this, SLOT(dynamicHeatmapSlot()));
dataTimer.start(1000);
}
void MainWindow::dynamicHeatmapSlot()
{
auto *colorMap = static_cast(ui->customPlot->plottable(0));
int keySize = colorMap->data()->keySize();
int valueSize = colorMap->data()->valueSize();
for (int x = 0; x < keySize; ++x) {
for (int y = 0; y < valueSize; ++y) {
if (colorMap->data()->alpha(x, y)) // 当前不是透明的，就重新设置z的值
colorMap->data()->setCell(x, y, QRandomGenerator::global()->bounded(1, 15));
}
}
ui->customPlot->replot();
}
动态热力图