Qt 系列（八）——统计图

前言

本来不打算搞这篇，因为觉得客户端嘛，主要都是写业务功能操作，搞什么花里胡哨的东西，后来业务还真是要用到了，就简单聊下这玩意儿吧。

Qt中的统计图

接触过ECharts的应该就不需要了解太多了，常规用到的统计图一般为折线图、柱状图、饼图、散点图，当然ECharts中会有更花里胡哨的，什么地图啊，三维立体图啊等等。

一个统计图拆解成几部分基本上就是：标题、网格、坐标系、坐标系说明、图形（这个图形比较笼统），当然还有诸如图例啊、标注文本之类的。

qt中需要用到QChartView作为容器，然后QChart来绘制图形，具体是哪种都是通过QxxxSeries来实现，下来我们来看下qt中绘制这种统计图的实现方式。

首先还是需要在工程属性加上charts，配置方式同数据库，都是添加个插件库，这里就不多说了。

基础的用法就是放一个窗口，然后声明个QChartView放到这个窗口中，具体是哪种类型的统计图就看业务了。

#include "TestCharts.h"
#include <QGridLayout>
#include <QLineSeries>
#include <QStackedBarSeries>
#include <QBarSet>
#include <QBarCategoryAxis>
#include <QValueAxis>
#include <QPieSeries>

void TestCharts::bindData()
{
    QGridLayout* baseLayout = new QGridLayout();
    QChartView* view;

    view = new QChartView(createLineChart());

    baseLayout->addWidget(view);
    ui->groupBox->setLayout(baseLayout);
}

折线图

折线图一般用于看趋势走向，像大盘啊心电图啊收入支出之类的。

QLineSeries为折线图的实现类，添加二维点数据，每声明一次放入就是一条折线。

如果先自定义坐标系值下面会做一个，这里因为是先录入的数据，就可以直接调用QChart的方法生成默认坐标系，默认是按照数据中最大x,y来定义。

QChart* TestCharts::createLineChart()
{
    QChart* chart = new QChart();
    chart->setTitle("Line chart");

    for (int i = 0; i < 10; i++) {
        QLineSeries* series = new QLineSeries(chart);
        for (int j = 0; j < 20; j++) {
            if (j % 2 == 0)
            {
                series->append(j + i, j * 0.2);
            }
            else
            {
                series->append(j + i, j * 0.5);
            }
        }
        series->setName(QString("d%1").arg(i));
        chart->addSeries(series);
    }

    chart->createDefaultAxes();
    return chart;
}

龙飞凤舞

柱状图

柱状图一般像文章的阅读量啊评论数啊，需要看每个单独的统计时用到的比较多。

QStackedBarSeries为柱状图的实现类，QBarSet是每条柱，这个只需要y轴数据。

QChart* TestCharts::createBarChart()
{
    QChart* chart = new QChart();
    chart->setTitle("Bar chart");

    QStackedBarSeries* series = new QStackedBarSeries(chart);
    //for (int i = 0; i < 2; i++) { // 这个控制一块摞几个
        QBarSet* set = new QBarSet(QString("data"));
        for (int j = 1; j <= 3; j++)
        {
            set->append(j * 5);
        }
        series->append(set);
    //}
    chart->addSeries(series);

    QBarCategoryAxis* axisX = new QBarCategoryAxis();
    for (int i = 0; i < 3; i++)
    {
        axisX->append(QString("data_%1").arg(i));
    }
    QValueAxis* axisY = new QValueAxis();
    axisY->setRange(0, 20);
    axisY->setTitleText(QString::fromLocal8Bit("test"));
    axisY->setLabelFormat(QString("%.2f%"));
    axisY->setLabelsColor(QColor(255, 0, 0));
    axisY->setTitleBrush(QBrush(QColor(255, 0, 0)));

    chart->setAxisX(axisX, series);
    chart->setAxisY(axisY, series);
    return chart;
}

柱状图

扇形图

这个就是看一个占用比例关系，像迟到/旷工/打卡人数这种。

QPieSeries为扇形图实现类，QPieSlice是每个扇形的实现类，这个也是只需要一个数。

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

    int total = 3;
    qreal pieSize = 1.0 / (qreal)total;
    QPieSeries* series = new QPieSeries(chart);
    for (int i = 0; i < total; i++) {
        QPieSlice* slice = series->append(QString("d%1").arg(i), 3 + i);
        if (i == 0) {
            slice->setLabelVisible();
            slice->setExploded();
        }
        //qreal hPos = (pieSize / 2) + (i / (qreal)total);
        //series->setPieSize(pieSize);
        //series->setHorizontalPosition(hPos);
        //series->setVerticalPosition(0.5);
    }
    chart->addSeries(series);
    return chart;
}