如何用 QtCharts 绘制非连续的时间序列轴？

Posted 2023-02-14

【中文标题】如何用 QtCharts 绘制非连续的时间序列轴？

【英文标题】：How to plot non-consecutive time-series axis with QtCharts?

【发布时间】：2020-01-12 17:13:35

【问题描述】：

我需要绘制一个图表，其轴 X 的数据类型为 date-time。

我正在尝试使用QtCharts这样做，但是我发现QtCharts::QDateTimeAxis只能处理连续的数据（X轴是比例和连续的）。

例如，给定一个 LineSeries：

    "20:15:00", 123.0 ,
    "20:15:01", 124.0 ,
    "21:00:00", 125.0 ,
    "21:00:01", 126.0 ,

如果我使用 QDateTimeAxis 作为 X 轴，我会在 X 轴上获得更多的空白范围，而不仅仅是 4 个点。

即使“20:15:02”到“20:59::59”之间没有数据，QChart仍然给出了X轴上很多没有意义的槽空间。

我们可以用Qt 绘制一个 X 轴不连续的图表吗？

如果Qt 做不到，有没有开源 C++ 库可以做同样的事情？

【问题讨论】：

您可以展示您获得的图像和您想要获得的图像。

我没有观察到您指出的问题，例如，您可以使用 QScatterSeries 绘制数据：i.imgur.com/Ea1wIW9.png 或使用 QLineSeries：i.imgur.com/yas3f8c.png

你可以回答我的要求。您是否希望数据之间的空间不与时差成正比？

谢谢，是的，我希望它“跳过”没有数据的空白。抱歉，我正在制作演示图片...

【参考方案1】：

您不必使用 QDateTimeAxis，因为该轴的设计使得点的间距与时间差成比例。所以一种可能的解决方案是使用 QCategoryAxis：

#include <QtWidgets>
#include <QtCharts>

QT_CHARTS_USE_NAMESPACE

int main(int argc, char *argv[])

    QApplication a(argc, argv);

    std::vector<std::pair<QString, float>> data = 
         "20:15:00", 123.0 ,
         "20:15:01", 124.0 ,
         "21:00:00", 125.0 ,
         "21:00:01", 126.0 ,
    ;

    QScatterSeries *series = new QScatterSeries(); // or QLineSeries *series = new QLineSeries;
    QCategoryAxis *axisX = new QCategoryAxis;
    axisX->setMin(.5);
    axisX->setMax(data.size() + .5);
    axisX->setTitleText("Time");
    QValueAxis *axisY = new QValueAxis;
    axisY->setLabelFormat("%.2f");
    axisY->setTitleText("Example");
    axisY->setMin(122);
    axisY->setMax(127);

    for(std::size_t i=0; i < data.size(); i++)
        series->append(i + 1, data.at(i).second);
        axisX->append(data.at(i).first, i + 1.5);
    

    QChart *chart = new QChart();
    chart->addSeries(series);

    chart->legend()->hide();
    chart->addAxis(axisX, Qt::AlignBottom);

    series->attachAxis(axisX);
    chart->addAxis(axisY, Qt::AlignLeft);
    series->attachAxis(axisY);

    QChartView *chartView = new QChartView(chart);
    chartView->setRenderHint(QPainter::Antialiasing);
    QMainWindow window;
    window.setCentralWidget(chartView);
    window.resize(820, 600);
    window.show();
    return a.exec();

【讨论】：

干得好！非常感谢！