基于QT的简单大数据可视化模板

Posted 人生的意义在于虚度

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了基于QT的简单大数据可视化模板相关的知识,希望对你有一定的参考价值。

一边做一边学一边摸索,终于基于QT的数据大屏展板有了雏形,如下图,欢迎大家关注我,之后会持续更新。下面有全部代码,可以粘贴到自己的项目文档里慢慢研究。

目前为止本项目的难点在于可停靠窗口QDockWidget的设计,自定义窗口标题栏。

这个展板的小窗口应用QDockWidget,可以点击拖动出小窗口,并再嵌入主窗口中,也可以拖动DockWidget,使他们互相交换位置。

DockWidget的自带标题栏不好看,所以我将原来的标题栏删除后,自定义了一个标题栏,并进行配色,字体设计,之后也可以在现在代码的基础上进行再创造。

主窗口还可以继续添加可停靠窗口,几个小的可停靠窗口里面还可以继续布局新的控件。

不足:目前该项目在运行之后,几个窗口的大小分配不太合适。

本项目文件结构:

Project
	工程文件
		xxx.pro
	头文件
		title_bar.h
		widget.h
	源文件
		main.cpp
		title_bar.cpp
		widget.cpp

下面贴上代码:

xxx.pro

//在pro文件中只要在默认的情况下添加一行代码即可
QT       +=			charts

title_bar.h

//这个文件和title_bar.cpp文件还可以进一步优化,欢迎大家在评论区讨论
#ifndef TITLE_BAR
#define TITLE_BAR

#include <QWidget>

class QLabel;
class QPushButton;

class TitleBar : public QWidget

    Q_OBJECT

public:
    explicit TitleBar(QWidget *parent = 0);
    ~TitleBar();

protected:

    // 双击标题栏进行界面的最大化/还原
    virtual void mouseDoubleClickEvent(QMouseEvent *event);

    // 进行鼠界面的拖动
//    virtual void mousePressEvent(QMouseEvent *event);

    // 设置界面标题与图标
    virtual bool eventFilter(QObject *obj, QEvent *event);

private slots:

    // 进行最小化、最大化/还原、关闭操作
//    void onClicked();

private:

    // 最大化/还原
//    void updateMaximize();

private:
    QLabel *m_pIconLabel;
    QLabel *m_pTitleLabel;

;

#endif // TITLE_BAR

widget.h

#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>
#include <QtCharts/QChartGlobal>
#include <QtWidgets/QWidget>
#include <QtWidgets/QDockWidget>
#include <QLineSeries>
#include <QVBoxLayout>
QT_BEGIN_NAMESPACE
namespace Ui  class Widget; 
QT_END_NAMESPACE

QT_CHARTS_BEGIN_NAMESPACE
class QChartView;
class QChart;
QT_CHARTS_END_NAMESPACE

QT_CHARTS_USE_NAMESPACE//此句必备


class Widget : public QWidget

    Q_OBJECT

public:
    Widget(QWidget *parent = nullptr);
    ~Widget();

private:
    Ui::Widget *ui;
private:
    QChart *creatDonutChart() const;
    QChart *creatBarChart() const;
    QChart *creatLineChart() const;
    QChart *creatAreaChart() const;
    QDockWidget *pd1,*pd2,*pd3,*pd4;
    QMainWindow *pw;
    QWidget *pw1,*pw2;
    QDockWidget *m_titlebar(QDockWidget *pd,QWidget *m_chart,QString m_str) ;

private:
//    void mousePressEvent(QMouseEvent *e);
//    void mouseMoveEvent(QMouseEvent *e);
//    QPoint lastPos;



;
#endif // WIDGET_H

title_bar.cpp

#include <QLabel>
#include <QPushButton>
#include <QHBoxLayout>
#include <QEvent>
#include <QMouseEvent>
#include <QApplication>
#include "title_bar.h"
#include <qt_windows.h>


TitleBar::TitleBar(QWidget *parent)
    : QWidget(parent)

    setFixedHeight(30);


    m_pTitleLabel = new QLabel(this);

    m_pTitleLabel->setFixedHeight(30);
    m_pTitleLabel->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Fixed);


    m_pTitleLabel->setObjectName("whiteLabel");


    m_pTitleLabel->setContentsMargins(0,0,0,0);
    m_pTitleLabel->setAlignment(Qt::AlignCenter);

    //设置字颜色
    QPalette pa;
    pa.setColor(QPalette::WindowText,Qt::white);
    m_pTitleLabel->setPalette(pa);
    //设置字号
    QFont ft("微软雅黑");
    ft.setPointSize(10);
    m_pTitleLabel->setFont(ft);


    QHBoxLayout *mainWidgetLayout = new QHBoxLayout(this);
    QWidget *mainWidget = new QWidget;
    QHBoxLayout *pLayout = new QHBoxLayout;

    mainWidgetLayout->addWidget(mainWidget);
    mainWidget->setLayout(pLayout);
    mainWidgetLayout->setMargin(0);
    pLayout->setContentsMargins(0,0,0,0);
    pLayout->setSpacing(0);
    mainWidget->setStyleSheet("QWidgetbackground-color:rgb(48, 48, 85);");
    pLayout->addWidget(m_pTitleLabel);





TitleBar::~TitleBar()




void TitleBar::mouseDoubleClickEvent(QMouseEvent *event)

    Q_UNUSED(event);

    event->ignore();




bool TitleBar::eventFilter(QObject *obj, QEvent *event)

    switch (event->type())
    
    case QEvent::WindowTitleChange:
    
        QWidget *pWidget = qobject_cast<QWidget *>(obj);
        if (pWidget)
        
            m_pTitleLabel->setText(pWidget->windowTitle());
            return true;
        
    

     default:
         return QWidget::eventFilter(obj, event);

     
     return QWidget::eventFilter(obj, event);


//void TitleBar::onClicked()
//
//    QPushButton *pButton = qobject_cast<QPushButton *>(sender());
//    QWidget *pWindow = this->window();
//    if (pWindow->isTopLevel())
//    

//    
//

widget.cpp

#include "widget.h"
#include <QtCharts/QChartView>
#include <QtCharts/QPieSeries>
#include <QtCharts/QPieSlice>
#include <QtWidgets/QGridLayout>
#include <QBarSet>
#include <QBarSeries>
#include <QBarCategoryAxis>
#include <QMainWindow>
#include <QLineSeries>
#include <QVBoxLayout>
#include <QPixmap>
#include <QIcon>
#include <QTableWidget>
#include <QPushButton>
#include <QLabel>
#include<QDockWidget>
#include "title_bar.h"
#include <QtCharts/QAreaSeries>
#include <QMouseEvent>

Widget::Widget(QWidget *parent)
    : QWidget(parent)



/********************配色*****************/
    QMainWindow *pw = new QMainWindow;
//    QPalette palette = this->palette();
//    palette.setColor(QPalette::Window, QColor(4, 7, 38));  //改变控件背景色
//    this->setPalette(palette);




/*********************************布局*********************************/
//    QGridLayout *baseLayout = new QGridLayout();//布局管理器
/**********************设置可停靠窗口******************/
    QDockWidget *pd1 = new QDockWidget;
    QDockWidget *pd2 = new QDockWidget;
    QDockWidget *pd3 = new QDockWidget;

    pw->addDockWidget(Qt::RightDockWidgetArea,pd1);
    pw->addDockWidget(Qt::BottomDockWidgetArea,pd2);
    pw->addDockWidget(Qt::LeftDockWidgetArea,pd3);

    pd1->setAllowedAreas(Qt::RightDockWidgetArea|Qt::BottomDockWidgetArea|Qt::LeftDockWidgetArea );//设置顶部不可停靠
    pd2->setAllowedAreas( Qt::BottomDockWidgetArea|Qt::RightDockWidgetArea|Qt::LeftDockWidgetArea );
    pd3->setAllowedAreas( Qt::BottomDockWidgetArea|Qt::RightDockWidgetArea|Qt::LeftDockWidgetArea );

    pw->setDockOptions(QMainWindow::AnimatedDocks);//设置停靠参数,不允许重叠,只允许拖动

/********************Creating Donutchart*****************/
//可停靠窗口1
    QChartView *chartView;
    chartView=new QChartView(creatDonutChart());
    chartView->setRenderHint(QPainter::Antialiasing);//渲染抗锯齿
    //以下代码可以实现在一个DockWidget中显示多个chart,直接在nn后面addwidget即可
    QWidget *mm = new QWidget();
    QGridLayout *nn = new QGridLayout();
    nn->addWidget(chartView);
    mm->setLayout(nn);
    pd1->setWidget(mm);
    pd1=m_titlebar(pd1,chartView,"Donutchart Chart");


//*******************Creating Bar Chart*********************//
//可停靠窗口2
    chartView=new QChartView(creatBarChart());
    chartView->setRenderHint(QPainter::Antialiasing);//渲染抗锯齿
    //以下代码可以实现在一个DockWidget中显示多个chart,直接在nn后面addwidget即可
    mm = new QWidget();
    nn = new QGridLayout();
    nn->addWidget(chartView);
    mm->setLayout(nn);
    pd2->setWidget(mm);
    pd2=m_titlebar(pd2,chartView,"Bar Chart");

/********************Creating Line Chart************************/


/*************************AreaChart Example*************************/
//可停靠窗口3
    chartView = new QChartView(creatAreaChart());
    chartView->setRenderHint(QPainter::Antialiasing);
    //以下代码可以实现在一个DockWidget中显示多个chart,直接在nn后面addwidget即可
    mm = new QWidget();
    nn = new QGridLayout();
    nn->addWidget(chartView);
    mm->setLayout(nn);
    pd3->setWidget(mm);
    pd3=m_titlebar(pd3,chartView,"AreaChart");


/**************************主窗口****************************/
    chartView=new QChartView(creatLineChart());
    chartView->setRenderHint(QPainter::Antialiasing);
    pw->setCentralWidget(chartView);


/*************************大屏显示**************************/
    pw->setWindowFlags (Qt::FramelessWindowHint);//去掉标题栏,但不能鼠标缩放窗口
    pw->showFullScreen();



Widget::~Widget()




QChart *Widget::creatDonutChart() const

    QPieSeries *series=new QPieSeries();
    series->setHoleSize(0.35);//圆孔大小
    series->append("Protein 4.2%",4.2);


    QPieSlice *slice=series->append("Fat 15.6%",15.6);//单个切片
    slice->setExploded();//使该切片突出
    slice->setLabelVisible();//显示切片的标签
    series->append("Other 23.8%", 23.8);
    series->append("Carbs 56.4%", 56.4);//若以圆心为原点,作xoy坐标系,则以y轴为起始轴,圆环的每一小部分按照编程顺序顺时针排列。
    QChart *chart = new QChart;
    chart->setTitle("Donut with a lemon glaze (100g)");
    chart->addSeries(series);
    chart->legend()->setAlignment(Qt::AlignBottom);//图例放在底部
    chart->setTheme(QChart::ChartThemeBlueCerulean);//主题颜色设置为天然色
    chart->legend()->setFont(QFont("Arial",7));//图例字体宋体7号字

    //标题栏

    return chart;

QChart *Widget::creatBarChart() const

    //本示例要展示五个人在每个月的某项数据,比如每个月掉多少头发
    //创建要展示的对象,本示例中是姓名,并设置不同对象在每个月的数据
    QBarSet *set0 = new QBarSet("Jane");
    QBarSet *set1 = new QBarSet("John");
    QBarSet *set2 = new QBarSet("Axel");
    QBarSet *set3 = new QBarSet("Mary");
    QBarSet *set4 = new QBarSet("Sama");
    *set0<<1<<2<<3<<4<<5<<6;
    *set1<<3<<7<<6<<5<<5<<2;
    *set2<<2<<8<<1<<3<<6<<5;
    *set3<<1<<3<<5<<7<<1<<6;
    *set4<<4<<3<<3<<6<<7<<2;
    //创建一个序列对象,并将上面的数据添加到序列中
    QBarSeries *bseries = new QBarSeries();
    bseries->append(set0);
    bseries->append(set1);
    bseries->append(set2);
    bseries->append(set3);
    bseries->append(set4);
    //创建一个QChart类的对象chart,并将series对象加入到chart中
    QChart *chart = new QChart();
    chart->addSeries(bseries);
    //设置标题和动画
    chart->setTitle("simple chart example");
    chart->setAnimationOptions(QChart::SeriesAnimations);//设置动画

    //创建坐标
    //首先创建一个字符串列表,作为横坐标
    QStringList *categories = new QStringList();
    *categories<<"Jane"<<"Feb"<<"Mar"<<"Apr"<<"May"<<"Jun";
    //创建一个类别轴对象
    QBarCategoryAxis *axis = new QBarCategoryAxis();
    axis->append(*categories);//添加横坐标,月份
    chart->createDefaultAxes();//设置默认坐标轴,虽然后面的设置会覆盖默认坐标轴,但是也要在后面设置之前进行初始设置
    chart->setAxisX(axis,bseries);//将类别轴对象(横坐标月)和序列对象(每个月的数据)作为参数,设置X轴。

    //设置图例
    chart->legend()->setVisible(true);//图例可见
    chart->legend()->setAlignment(Qt::AlignBottom);//将图例放在表底
    chart->setTheme(QChart::ChartThemeBlueCerulean);//主题颜色设置为天然色
    return chart;


QChart *Widget::creatLineChart() const

    QLineSeries *series=new QLineSeries();
    series->append(0,0);
    series->append(1,1);
    series->append(2,4);
    series->append(3,9);
    series->append(4,7);
    *series<<QPointF(11,1)<<QPointF(13,3)<<QPointF(17,6)<<QPointF(18, 3) << QPointF(以上是关于基于QT的简单大数据可视化模板的主要内容,如果未能解决你的问题,请参考以下文章

基于 HTML+ECharts 实现的大数据可视化平台模板(含源码)

QT中如何实现界面之间传递数据??

Qt基于Echart的数据可视化2--Echart大小跟随Qt窗口

基于Echarts+HTML5可视化数据大屏展示—运营大数据平台

基于Echarts+HTML5可视化数据大屏展示—大数据智慧数据平台

基于Echarts+HTML5可视化数据大屏展示—大数据智慧数据平台