QT QChart QPieSeries 空心饼状图 中心添加文字

最近在使用QT 画一个空心的饼状图，需求是空心饼状图，中心显示百分比。如下

这里我们需要使用QT QChart 来画图，QChart是QT在5.7.0以后新增加的模块，属于比较新的功能。对于饼状图，我们使用QPieSeries来画饼状图。

对于原始的饼状图我们画出来是下面这样的：

这里有3个问题：

1. 第一个就是不是空心的。经过阅读文档发现，想要饼状图变成空心，其实官方是留有接口的我们可以调用QPieSeries中的setHoleSize来设置空心的大小

series->setHoleSize(0.25);//饼图中间空心的大小

这里设置孔大小范围是0-1。0是孔最小，也就是没有孔。1就是孔最大。这里我们有必要了解一下QPieSeries的另一个方法，就是设置饼图的大小函数

series->setPieSize(0.5);//饼图的大小

这个设置饼图大小的范围也是0-1.1表示充满整个chartView。而本例中设置0.5的意思也就是饼图占据整个显示页面的一半。

这样后，我们就可以得到空心的饼图了：

2. 第二个问题：使用饼状图总是0度开始。官方对其描述为，开始的角度是0，结束的角度是360。 0度与360度重合，也就是在12点钟方向。

       那需求是空白的地方应该均匀的分配到12点钟的两侧。那么我们需要解决对于饼状图开始的角度与结束的角度进行限制约束。

这里我们假设饼状图的有颜色部分占比是 int percent;//0-100

然后我们需要计算出来空白的部分一共占了多少度

int remainAngle = (1.0 - percent / 100.0) * 360;

那么开始的角度应该是剩余角度的一半。

int halfRemainAngle = remainAngle / 2;//剩余角度的一半

那么我们就可以得出开始与结束的角度了

    int startAngle = halfRemainAngle;
    int endAngle = 360 - halfRemainAngle;

需要对QPieSeries加上角度限制就行了

    series->setPieStartAngle(startAngle);
    series->setPieEndAngle(endAngle);

3. 但是对于第三个问题也就是最棘手的了：在空心中显示百分比文字。经过查阅API，我们并没有发现官方有关设置。那么这个问题我们就需要自己来解决了。

我的解决思路是这样的：在chartView中手动创建一个label.用来显示放在圆孔的中央。在创建图形与窗体发生改变的时候同时将label显示出来并移动到圆孔中心。

在构造函数创建label，并设置样式表，最终隐藏。

    m_centerLabel = new QLabel("80%", ui->chartViewPie);
    m_centerLabel->setStyleSheet(QString("background:transparent;font-family:\"Mircsoft Yahei\";"
                                         "font-size:20px; color:#1564FF; font-weight:bold;"));
    m_centerLabel->hide();

这里我们需要重新控件的resize函数

void MainWindow::resizeEvent(QResizeEvent *event)
{
    m_centerLabel->move((ui->chartViewPie->width()-m_centerLabel->width())/2,
                        (ui->chartViewPie->height()-m_centerLabel->height())/2-5);
}

在构建图形的时候，进行显示label并执行resize函数

    m_centerLabel->show();
    resizeEvent(NULL);

大功告成。 源码大家可以下载，在QT 5.7及其以上可以直接运行。https://download.csdn.net/download/xiezhongyuan07/10663890