项目中需要实现数据统计,ui图如下:
接下来展示实现过程:
1.在.pro文件中添加charts模块
2.新建Qt设计界面类,选择一个容器(这里选择QWidget),有两种方法设置QChartView:一种是我另一篇QChart绘制动态曲线图文章中的方式,将QWidget提升为QChartView;一种是ui文件中添加QWidget后,用代码新建QChartView。
3.在.h文件中添加相关库(一定记得加CHARTS命名空间!)
#ifndef CELL_STATUS_H
#define CELL_STATUS_H
#include <QWidget>
#include <QtCharts/QChart>
#include <QtCharts/QChartView>
#include <QtCharts/QPieSeries>
#include <QtCharts/QPieSlice>
QT_CHARTS_USE_NAMESPACE
namespace Ui {
class cell_status;
}
class cell_status : public QWidget
{
Q_OBJECT
public:
explicit cell_status(QWidget *parent = nullptr);
~cell_status();
void initChart();
private slots:
void onPieSeriesClicked(QPieSlice* slice);
private:
Ui::cell_status *ui;
//饼状图
QPieSeries *pie_series;
QPieSeries *pie_seriesTotal;
QChart* chart;
};
#endif // CELL_STATUS_H
4.cpp文件实现代码
#include "cell_status.h"
#include "ui_cell_status.h"
#include <QVBoxLayout>
cell_status::cell_status(QWidget *parent) :
QWidget(parent),
ui(new Ui::cell_status)
{
ui->setupUi(this);
this->initChart();
}
cell_status::~cell_status()
{
delete ui;
}
void cell_status::initChart()
{
pie_series = new QPieSeries(this);
pie_series->setHoleSize(0.5); // 设置空心大小
pie_seriesTotal = new QPieSeries(this);
pie_seriesTotal->setPieSize(0.3); // 设置饼状图大小
connect(pie_series,&QPieSeries::clicked,this,&cell_status::onPieSeriesClicked);
connect(pie_seriesTotal,&QPieSeries::clicked,this,&cell_status::onPieSeriesClicked);
// 定义各扇形切片的颜色
static const QStringList list_pie_color = {
"#65cd52","#da88b7","#734684","#6eb799","#30457c","#f0c75b","#6351a5","#79b0f9"
};
static const QStringList list_pie_colorTotal = {
"#bf362d","#65cd52"
};
QFont font;
font.setFamily("黑体");
font.setPointSize(10);
// 设置数据
QList<qreal> list_data = {30, 10, 10, 10, 10, 10,10,10};
QStringList labelList = {"良品","发亮","针孔","浮点","错梭","缺口","脏污","断纱"};
QStringList labelTotal = {"废品","良品"};
QList<qreal> list_dataTotal = {2,8};
//扇形
for (int i = 0; i < list_pie_color.size(); i++) {
QPieSlice* pie_slice = new QPieSlice(this);
pie_slice->setLabelVisible(true); // 是否显示Label
pie_slice->setLabelPosition(QPieSlice::LabelInsideHorizontal); // Label显示位置 -> 切片内水平显示
pie_slice->setLabelFont(font); // 设置切片字体
pie_slice->setValue(list_data[i]); // 设置切片值
pie_slice->setLabel(labelList[i]); // 设置Label内容
pie_slice->setColor(list_pie_color[i]); // 切片Color
pie_slice->setLabelColor(Qt::black); // LabelColor
pie_slice->setBorderColor(list_pie_color[i]); // BorderColor
pie_series->append(pie_slice); // 将切片添加到饼状图中
}
for (int i = 0; i < list_pie_colorTotal.size(); i++) {
QPieSlice* pie_slice = new QPieSlice(this);
pie_slice->setLabelVisible(true);
pie_slice->setLabelPosition(QPieSlice::LabelInsideHorizontal);
pie_slice->setLabelFont(font);
pie_slice->setValue(list_dataTotal[i]);
pie_slice->setLabel(labelTotal[i]);
pie_slice->setColor(list_pie_colorTotal[i]);
pie_slice->setLabelColor(Qt::black);
pie_slice->setBorderColor(list_pie_colorTotal[i]);
pie_seriesTotal->append(pie_slice);
}
// 图表视图
chart = new QChart();
chart->setTheme(QChart::ChartThemeLight); // 图表主题
chart->addSeries(pie_series);
chart->addSeries(pie_seriesTotal);
chart->setAnimationOptions(QChart::AllAnimations); // 添加动画
// 图例
chart->legend()->setAlignment(Qt::AlignLeft); // 位置
chart->legend()->setBackgroundVisible(false);
chart->legend()->setFont(font);
// 加入绘画视图
QChartView* chartView = new QChartView(this);
chartView->setRenderHint(QPainter::Antialiasing); // 抗锯齿渲染
chartView->setChart(chart);
// 加入布局
QVBoxLayout* layout = new QVBoxLayout;
layout->setContentsMargins(100,0,0,0);
layout->addWidget(chartView);
ui->viewWidget->setLayout(layout);
}
void cell_status::onPieSeriesClicked(QPieSlice *slice)
{
slice->setExploded(!slice->isExploded());
}
至此,我们的饼状图就实现完成,效果展示: