QT5.14.2 官方例子 - Qt Charts 1: Chart Themes Example(图表主题)

这个示例展示了图表在不同内置主题的外观。

此示例显示了一些受支持的图表类型的不同内置主题的外观。

 

具体讲解在：

http://doc.qt.io/qt-5/qtcharts-chartthemes-example.html

 

主要类：

QPair：

QPair 

类模板： 
template struct pair 
参数：class T1是第一个值的数据类型，class T2是第二个值的数据类型。 
功能：pair将一对值（可以是不同的数据类型）组合成一个值，两个值可以分别用pair的两个公有函数first和second访问。

https://blog.csdn.net/Superman___007/article/details/89335836

QChartView: QChartView是一个可以显示图表的独立小部件。图表需要显示在该部件上。

QChart：QChart类管理图表系列、图例和轴的图形表示。各种类型图需要显示在图表上。

QLineSeries:  QLineSeries类用折线图表示数据。

QStackedBarSeries: QStackedBarSeries类将一系列数据显示为垂直堆叠的条形图，每个类别有一个条形图。

QPieSlice: QPieSeries类以饼状图的形式表示数据。

QSplineSeries: QSplineSeries类将数据表示为样条图。

QScatterSeries：QScatterSeries类用散点图表示数据。

 

主要过程：

1.如何根据主题，动画，图例文字的靠近的位置来更新所有的图表；

void ThemeWidget::updateUI()
{
    //![6] 获取当前选中的主题
    QChart::ChartTheme theme = static_cast(
                m_ui->themeComboBox->itemData(m_ui->themeComboBox->currentIndex()).toInt());
    //![6]
    const auto charts = m_charts;
    // 如果存入的chartview为空，并且第零个和当前选中的主题不一致，则更新view的主题
    if (!m_charts.isEmpty() && m_charts.at(0)->chart()->theme() != theme)
    {
        for (QChartView *chartView : charts)
        {
            //![7] 更新当前视图对应的图表的主题
            chartView->chart()->setTheme(theme);
            //![7]
        }

        // Set palette colors based on selected theme
        //![8]
        QPalette pal = window()->palette();
        if (theme == QChart::ChartThemeLight)
        {
            pal.setColor(QPalette::Window, QRgb(0xf0f0f0));
            pal.setColor(QPalette::WindowText, QRgb(0x404044));
        //![8]
        }
        else if (theme == QChart::ChartThemeDark)
        {
            pal.setColor(QPalette::Window, QRgb(0x121218));
            pal.setColor(QPalette::WindowText, QRgb(0xd6d6d6));
        }
        else if (theme == QChart::ChartThemeBlueCerulean)
        {
            pal.setColor(QPalette::Window, QRgb(0x40434a));
            pal.setColor(QPalette::WindowText, QRgb(0xd6d6d6));
        }
        else if (theme == QChart::ChartThemeBrownSand)
        {
            pal.setColor(QPalette::Window, QRgb(0x9e8965));
            pal.setColor(QPalette::WindowText, QRgb(0x404044));
        }
        else if (theme == QChart::ChartThemeBlueNcs)
        {
            pal.setColor(QPalette::Window, QRgb(0x018bba));
            pal.setColor(QPalette::WindowText, QRgb(0x404044));
        }
        else if (theme == QChart::ChartThemeHighContrast)
        {
            pal.setColor(QPalette::Window, QRgb(0xffab03));
            pal.setColor(QPalette::WindowText, QRgb(0x181818));
        }
        else if (theme == QChart::ChartThemeBlueIcy)
        {
            pal.setColor(QPalette::Window, QRgb(0xcee7f0));
            pal.setColor(QPalette::WindowText, QRgb(0x404044));
        }
        else
        {
            pal.setColor(QPalette::Window, QRgb(0xf0f0f0));
            pal.setColor(QPalette::WindowText, QRgb(0x404044));
        }
        
        // 根据选中的主题，并设置对应的窗口颜色和窗口文本的颜色，来设置当前窗口的颜色
        window()->setPalette(pal);
    }

    // Update antialiasing
    //![11]
    bool checked = m_ui->antialiasCheckBox->isChecked();
    
    // 根据反锯齿设置来匹配所有图表的反锯齿
    for (QChartView *chart : charts)
        chart->setRenderHint(QPainter::Antialiasing, checked);
    //![11]

    // Update animation options
    //![9]
    QChart::AnimationOptions options(
                m_ui->animatedComboBox->itemData(m_ui->animatedComboBox->currentIndex()).toInt());

    // 按照当前animation的项，来更新图标的视图
    if (!m_charts.isEmpty() && m_charts.at(0)->chart()->animationOptions() != options)
    {
        for (QChartView *chartView : charts)
            chartView->chart()->setAnimationOptions(options);
    }
    //![9]

    // Update legend alignment
    //![10]
    Qt::Alignment alignment(
                m_ui->legendComboBox->itemData(m_ui->legendComboBox->currentIndex()).toInt());

    // 根据选中图例文字的靠向，来设置实际图例文字的靠向
    if (!alignment) {
        for (QChartView *chartView : charts)
            chartView->chart()->legend()->hide();
    }
    else
    {
        for (QChartView *chartView : charts)
        {
            chartView->chart()->legend()->setAlignment(alignment);
            chartView->chart()->legend()->show();
        }
    }
    //![10]
}

 

2.图表中三条线的所有点数据信息：

DataTable ThemeWidget::generateRandomData(int listCount, int valueMax, int valueCount) const
{
    DataTable dataTable;

    // generate random data

    // m_dataList: 中三个成员，即三条线的数据
    for (int i(0); i < listCount; i++)
    {
        DataList dataList;
        qreal yValue(0);

        // valueMax:   10
        // valueCount: 7
        for (int j(0); j < valueCount; j++)
        {
            // [static] QRandomGenerator *QRandomGenerator::global():
            //    返回一个指向使用securelyseed()进行种子化的共享QRandomGenerator的指针。
            //    这个函数应该用于创建随机数据，而不需要为特定用途创建安全的QRandomGenerator，
            //    也不需要存储相当大的QRandomGenerator对象。

            // double QRandomGenerator::bounded(double highest):
            //    生成一个在0(包含)和最高(排除)之间的随机双精度值。该函数等价于并实现为:
            //    return generateDouble() * highest;
            //    最大参数为负，结果也为负;如果它是无穷大或NaN，结果将是无穷大或NaN也是(即，不是随机的)。
            yValue = yValue + QRandomGenerator::global()->bounded(valueMax / (qreal) valueCount);
            QPointF value((j + QRandomGenerator::global()->generateDouble()) * ((qreal) m_valueMax / (qreal) valueCount),
                          yValue);
            QString label = "Slice " + QString::number(i) + ":" + QString::number(j);

            // QRandomGenerator类允许从高质量的随机数生成器中获取随机值。
            qDebug() << "random value: " << QRandomGenerator::global()->generateDouble();
            qDebug() << "xValue: " << (j + QRandomGenerator::global()->generateDouble()) * ((qreal) m_valueMax / (qreal) valueCount);
            qDebug() << "yValue: " << yValue;
            qDebug() << "label: " << label;

            // 将（点位置，标签名）添加到数据列表dataList中
            dataList << Data(value, label);
        }
        
        // 将三条线的数据逐条添加进数据表中
        dataTable << dataList;
    }

    return dataTable;
}

 

2.区域图绘画：

QChart *ThemeWidget::createAreaChart() const
{
    // 创建表格
    QChart *chart = new QChart();
    // 设置标题
    chart->setTitle("Area chart");

    // The lower series initialized to zero values
    // QLineSeries: 折线图是用直线连接的一系列数据点来显示信息的。
    QLineSeries *lowerSeries = 0;
    QString name("Series ");
    int nameIndex = 0;
    for (int i(0); i < m_dataTable.count(); i++)
    {
        // 为该表格创建上行线型图
        QLineSeries *upperSeries = new QLineSeries(chart);
        for (int j(0); j < m_dataTable[i].count(); j++)
        {
            Data data = m_dataTable[i].at(j);
            // 如果底行超过了x轴，即lowerSeries>0, 则需要加上底轴的y坐标；
            if (lowerSeries)
            {
                const QVector& points = lowerSeries->pointsVector();
                upperSeries->append(QPointF(j, points[i].y() + data.first.y()));
            }
            else
            {
                // 将某一条折线图的上行的点，一一填入upperSeries
                upperSeries->append(QPointF(j, data.first.y()));

                qDebug() << "x: " << j;
                qDebug() << "y: " << data.first.y();
            }
        }

        // 一条上行折线 + 一条下行折线 =》 一个区域图
        QAreaSeries *area = new QAreaSeries(upperSeries, lowerSeries);
        area->setName(name + QString::number(nameIndex));
        nameIndex++;

        // 为表格添加该区域图
        chart->addSeries(area);

        // 把上次的上行赋值给下一次的底行，这样就开始迭代往上
        lowerSeries = upperSeries;
    }

    // 根据已经添加到图表中的系列为图表创建轴。之前添加到图表中的任何轴都将被删除。
    chart->createDefaultAxes();

    // x,y: 添加x，y轴的坐标值
    chart->axes(Qt::Horizontal).first()->setRange(0, m_valueCount - 1);
    chart->axes(Qt::Vertical).first()->setRange(0, m_valueMax);
    // Add space to label to add space between labels and axis
    QValueAxis *axisY = qobject_cast(chart->axes(Qt::Vertical).first());
    Q_ASSERT(axisY);

    // 设置Y轴坐标的精确度
    axisY->setLabelFormat("%.2f  ");

    return chart;
}

 

3.饼状图绘画：

QChart *ThemeWidget::createPieChart() const
{
    QChart *chart = new QChart();
    chart->setTitle("Pie chart");

    QPieSeries *series = new QPieSeries(chart);
    for (const Data &data : m_dataTable[0])
    {
        QPieSlice *slice = series->append(data.second, data.first.y());
        if (data == m_dataTable[0].first())
        {
            // Show the first slice exploded with label
            slice->setLabelVisible();

            // 设置这片是否和饼状图分开
            slice->setExploded();

            // 设置分开的距离为0.5
            slice->setExplodeDistanceFactor(0.5);
        }
    }

    // 设置饼状图的半径为0.4，范围在：(0,1)
    series->setPieSize(0.4);
    // 表格添加该饼状图
    chart->addSeries(series);

    return chart;
}

 

4.折线图绘画：

QChart *ThemeWidget::createLineChart() const
{
    //![1]
    QChart *chart = new QChart();
    chart->setTitle("Line chart");
    //![1]

    //![2]
    QString name("Series ");
    int nameIndex = 0;

    // m_dataTable: QList

 

5.条形图：

QChart *ThemeWidget::createBarChart(int valueCount) const
{
    Q_UNUSED(valueCount);
    QChart *chart = new QChart();
    chart->setTitle("Bar chart");

    // StackedBar：堆叠条形图
    QStackedBarSeries *series = new QStackedBarSeries(chart);
    for (int i(0); i < m_dataTable.count(); i++)
    {
        // 添加一种条形图barset
        QBarSet *set = new QBarSet("Bar set " + QString::number(i));
        for (const Data &data : m_dataTable[i])
            // 添加当前的点的y坐标，到该条形图中
            *set << data.first.y();
        
        // 添加该条形图到堆叠条形图中
        series->append(set);
    }
    
    // 添加堆叠条形图到图表内
    chart->addSeries(series);

    chart->createDefaultAxes();
    chart->axes(Qt::Vertical).first()->setRange(0, m_valueMax * 2);
    // Add space to label to add space between labels and axis
    QValueAxis *axisY = qobject_cast(chart->axes(Qt::Vertical).first());
    Q_ASSERT(axisY);
    axisY->setLabelFormat("%.1f  ");

    return chart;
}

 

6.曲线图：

QChart *ThemeWidget::createSplineChart() const
{
    QChart *chart = new QChart();
    chart->setTitle("Spline chart");
    QString name("Series ");
    int nameIndex = 0;
    for (const DataList &list : m_dataTable)
    {
        // 创建一条曲线图
        QSplineSeries *series = new QSplineSeries(chart);
        for (const Data &data : list)
            // 添加一个数据的所有的点位置数据到曲线图中
            series->append(data.first);
        series->setName(name + QString::number(nameIndex));
        nameIndex++;
        chart->addSeries(series);
    }

    chart->createDefaultAxes();
    chart->axes(Qt::Horizontal).first()->setRange(0, m_valueMax);
    chart->axes(Qt::Vertical).first()->setRange(0, m_valueCount);

    // Add space to label to add space between labels and axis
    QValueAxis *axisY = qobject_cast(chart->axes(Qt::Vertical).first());
    Q_ASSERT(axisY);
    axisY->setLabelFormat("%.1f  ");
    return chart;
}

 

7.散步图：

QChart *ThemeWidget::createScatterChart() const
{
    // scatter chart
    QChart *chart = new QChart();
    chart->setTitle("Scatter chart");
    QString name("Series ");
    int nameIndex = 0;
    for (const DataList &list : m_dataTable) 
    {
        // 创建一条散布图
        QScatterSeries *series = new QScatterSeries(chart);
        for (const Data &data : list)
            series->append(data.first);
        series->setName(name + QString::number(nameIndex));
        nameIndex++;
        chart->addSeries(series);
    }

    chart->createDefaultAxes();
    chart->axes(Qt::Horizontal).first()->setRange(0, m_valueMax);
    chart->axes(Qt::Vertical).first()->setRange(0, m_valueCount);
    // Add space to label to add space between labels and axis
    QValueAxis *axisY = qobject_cast(chart->axes(Qt::Vertical).first());
    Q_ASSERT(axisY);
    axisY->setLabelFormat("%.1f  ");
    return chart;
}