Qt图形图像开发之Qt曲线图美化QChart QScatterSeries 空心点阵图，鼠标移动到上面显示数值，鼠标移开数值消失...

最近接到一个Qt QChart曲线图美化的需求,画一个折线图，关键点使用空心的圆点标识出来，鼠标移动到关键点上，显示出当前数值；鼠标移走数值消失。 效果图如下： 我们遇到这个需求的时候，第一时间就会想到使用 QLineSeries 画折线图。 首先初始化 QChart *chart = new QChart(); chart->legend()->setVisible(false); ui->chartView->setChart(chart); ui->chartView->setRenderHint(QPainter::Antialiasing); chart->s 在Qt图形图像开发中，创建美观的曲线图是常见的任务，尤其在数据分析和可视化领域。本实例主要关注如何使用Qt的QChart库来绘制带有QScatterSeries的空心点阵图，并实现鼠标悬停时显示数值、移开时数值消失的效果。下面将详细介绍这个过程。 初始化QChart对象，这将作为图表的基础。通过调用`QChart::legend()->setVisible(false)`隐藏图例，`ui->chartView->setRenderHint(QPainter::Antialiasing)`设置抗锯齿，`chart->setBackgroundBrush(QBrush(QColor(248, 251, 255)))`设置背景色，使得图表更加清晰美观。 接着，使用QLineSeries来绘制折线图。通过创建QLineSeries对象并设置线条样式、宽度和颜色，然后在循环中添加数据点，即可形成折线。例如： ```cpp QLineSeries *series0 = new QLineSeries(); QPen pen; pen.setStyle(Qt::SolidLine); pen.setWidth(4); pen.setColor(QColor(21, 100, 255)); series0->setPen(pen); // 添加数据点... ``` 为了达到关键点为空心圆点的效果，我们可以利用QScatterSeries。QScatterSeries允许创建离散的数据点，可以自定义形状、大小和颜色。设置为圆形并调整边框和填充颜色，可以模拟空心点的效果： ```cpp QScatterSeries *series1 = new QScatterSeries(); series1->setMarkerShape(QScatterSeries::MarkerShapeCircle); series1->setBorderColor(QColor(21, 100, 255)); series1->setBrush(Qt::NoBrush); // 设置背景色为透明，实现空心效果 series1->setMarkerSize(12); // 添加数据点... ``` 在上述代码中，`setBrush(Qt::NoBrush)`是关键，它让点的内部变为透明，从而实现空心效果。 为了在鼠标悬停时显示数值，我们需要监听鼠标移动事件并更新图表的工具提示。Qt的QGraphicsSceneHoverEvent可以提供这种功能。你需要重写`mouseMoveEvent`方法，获取鼠标位置对应的数据点，并设置QChartView的工具提示： ```cpp void ChartWidget::mouseMoveEvent(QGraphicsSceneHoverEvent *event) { if (event->isAccepted()) { QPointF scenePos = event->scenePos(); QChart::SeriesList seriesList = chartView->chart()->series(); for (auto series : seriesList) { if (series->contains(scenePos.x(), scenePos.y())) { // 获取当前点的坐标 QPointF point = series->mapToPosition(series->indexOf(scenePos.x(), scenePos.y())); // 设置工具提示，如：'Value: x = 10, y = 20' chartView->setToolTip(QString("Value: x = %1, y = %2").arg(point.x()).arg(point.y())); break; } } } } ``` 为了在鼠标移开时清除工具提示，你可以重写`leaveEvent`方法，清空工具提示： ```cpp void ChartWidget::leaveEvent(QEvent *event) { chartView->setToolTip(""); } ``` 通过以上步骤，你就能创建一个具有空心点阵图、鼠标悬停显示数值、移开后数值消失的Qt曲线图。这种定制化的图表不仅提升了用户体验，也使数据展示更加直观易读。在实际应用中，可以根据需求调整颜色、大小、形状等属性，以满足各种视觉需求。