QT|QT-数据可视化大屏1 C++|qt|c++|数据可视化|qchart

QT-数据可视化大屏

前言
一、布局
二、添加图表
总结

前言现在，到处都在使用数据可视化大屏，在大屏上以极其炫彩和视觉冲击强烈的图表来显示数据，可以说是看着科技感十足。
前天，我去菜市场发现菜市场前面也上了一个大屏，看着确实不错，不过数据真实不真实就是两回事。
人们总是追求外表，最求美丽，漂亮，靓丽。所以，网络中的美可以说九成是金玉其外，败絮其中。
数据可视化的本身目的是借助于图形化手段，清晰有效地传达与沟通信息。但现在好多追求好看的图表，总体的美观，对数据的真实性等忽视不见。
引入正题，怎么去做一个好看的数据可视化大屏（抱歉，我也世俗了），请往下看
首先是布局及背景，一个好的布局可以显示更多的图表，并且让人看着协调舒适，一个好看的背景是数据可视化的视觉效果更上一层。
其次是图表和颜色，选择不同的，能够更清晰表达数据内容的图表是非常重要的，无论字体的颜色还是图表的显示要与背景搭配，颜色不突兀，会让视觉不易疲劳，更加耐看。
最后是对数据的接收，分类和处理，数据是图表的灵魂，没有数据，图表是毫无意义，这个要根据自己的项目需求来梳理数据。
一、布局一个好的布局可以显示更多的图表，并且让人看着协调舒适，一个好看的背景是数据可视化的视觉效果更上一层。
这里我介绍一个最常用的布局，主要有标题和主题内容组成。
1.首先创建一个QT项目。

文章图片

2.打开设计，进行布局设计

文章图片

3.删去菜单栏，状态栏，centralwidget设置布局方式为Grid Layout，Grid Layout非常灵活。

文章图片

4.添加标签（用于标题），添加widget控件（用于显示主体内容），比例是1：8

文章图片

文章图片

5. 对内容部分进行布局，一般都是N女环一王的方式。

文章图片

6.背景添加
添加一个QT资源文件用于添加图片。

文章图片

文章图片

添加centralwidget的样式表如下，将背景添加到界面上

文章图片

最终效果如下：

二、添加图表我以前的文章有写到QT图表的使用。
详细可以看看我以前写的文章。
QT图表chart-饼状图https://blog.csdn.net/qq_39641107/article/details/121360634
QT-使用ECharts显示地图，还有更多惊艳的图表等待你的使用https://blog.csdn.net/qq_39641107/article/details/121382488
使用标签可以实现很好的字体显示，使用frame控件可以增加横线或竖线。
然后使用chart添加图表。

//创建饼状图 void MainWindow::createpieSewies() { //饼状图 QPieSeries * my_pieSeries = new QPieSeries(); //中间圆与大圆的比例 my_pieSeries->setHoleSize(0.35); //扇形及数据 QPieSlice *pieSlice_running = new QPieSlice(); pieSlice_running->setValue(20); //扇形占整个圆的百分比 pieSlice_running->setLabel("教育"); pieSlice_running->setLabelVisible(); pieSlice_running->setColor(QColor("#4cb9cf")); pieSlice_running->setLabelColor(QColor("#4cb9cf")); pieSlice_running->setBorderColor(QColor("#4cb9cf")); pieSlice_running->setBorderColor(QColor()); my_pieSeries->append(pieSlice_running); QPieSlice *pieSlice_noconnect = new QPieSlice(); pieSlice_noconnect->setValue(70); pieSlice_noconnect->setLabel("贷款"); pieSlice_noconnect->setColor(QColor("#53b666")); pieSlice_noconnect->setLabelColor(QColor("#53b666")); pieSlice_noconnect->setBorderColor(QColor("#53b666")); pieSlice_noconnect->setLabelVisible(); //设置标签可见,缺省不可见 my_pieSeries->append(pieSlice_noconnect); QPieSlice *pieSlice_idle = new QPieSlice(); pieSlice_idle->setValue(10); pieSlice_idle->setLabel("生活"); pieSlice_idle->setLabelVisible(); pieSlice_idle->setColor(QColor("#2f89cf")); pieSlice_idle->setLabelColor(QColor("#2f89cf")); pieSlice_idle->setBorderColor(QColor("#2f89cf")); my_pieSeries->append(pieSlice_idle); // 图表视图 QChart *chart = new QChart(); chart->setTitle("猫猫1全年开支"); chart->addSeries(my_pieSeries); chart->setBackgroundBrush(QColor(0, 0, 0, 0)); chart->legend()->setAlignment(Qt::AlignBottom); chart->legend()->setBackgroundVisible(false); chart->legend()->setFont(QFont("黑体", 8)) ; // 图例字体 chart->setTitleBrush(QColor("#808396")); chart->legend()->setLabelColor(QColor("#808396")); QChartView *chartView = new QChartView(); chartView = new QChartView(ui->widget); chartView->setRenderHint(QPainter::Antialiasing); chartView->setSizePolicy(QSizePolicy::Preferred, QSizePolicy::Preferred); chartView->setStyleSheet("background-color:rgba(0,0,0,0); "); chartView->setChart(chart); ui->gridLayout_4->addWidget(chartView); }

【QT|QT-数据可视化大屏1】效果如下：