专栏首页Linux驱动47.QT-QChart之曲线图,饼状图,条形图使用

47.QT-QChart之曲线图,饼状图,条形图使用

1.使用准备

在pro中, 添加QT+= charts

然后在界面头文件中添加头文件并声明命名空间,添加:

#include <QtCharts>
QT_CHARTS_USE_NAMESPACE

2.QChart之曲线图

绘制曲线图需要用到3个类

  • QSplineSeries: 用于创建有由一系列数据组成的曲线.类似的还有QPieSeries(饼图数据). QLineSeries(折线数据)
  • QChart: 图表界面,用来管理图表内容,颜色,大小等
  • QChartView: 负责显示QChart

效果如下:

代码如下所示:

    m_chart = new QChart();
    QSplineSeries *series1 = new QSplineSeries();//实例化一个QLineSeries对象
    series1->setColor(QColor(0,100,255));
    series1->append(QPointF(0,qrand()%200)) ;
    series1->append(QPointF(30,qrand()%200)) ;
    series1->append(QPointF(60,qrand()%200)) ;
    series1->append(QPointF(90,qrand()%200)) ;
    series1->append(QPointF(120,qrand()%200)) ;
    series1->setName("线条1");

    series1->setVisible(true);
    series1->setPointLabelsFormat("(@xPoint,@yPoint)");
    series1->setPointLabelsVisible(true);


    m_chart->setTheme(QChart::ChartThemeLight);//设置白色主题
    m_chart->setDropShadowEnabled(true);//背景阴影
    m_chart->addSeries(series1);//添加系列到QChart上

   
    m_chart->setTitleBrush(QBrush(QColor(0,0,255)));//设置标题Brush
    m_chart->setTitleFont(QFont("微软雅黑"));//设置标题字体
    m_chart->setTitle("曲线图");

 

    //创建X轴和Y轴
    QValueAxis *axisX = new QValueAxis;
    axisX->setRange(0,150);    //改为setRange(0,1);则表示坐标为动态计算大小的          
    axisX->setLabelFormat("%dS");
    QValueAxis *axisY = new QValueAxis;
    axisY->setRange(0,250);    //改为setRange(0,1);则表示坐标为动态计算大小的            
    axisY->setTitleText("value值");

    m_chart->setAxisX(axisX,series1);
    m_chart->setAxisY(axisY,series1);
    //m_chart->createDefaultAxes();             //或者创建默认轴

    //修改说明样式
    m_chart->legend()->setVisible(true);
    m_chart->legend()->setAlignment(Qt::AlignBottom);//底部对齐
    m_chart->legend()->setBackgroundVisible(true);//设置背景是否可视
    m_chart->legend()->setAutoFillBackground(true);//设置背景自动填充
    m_chart->legend()->setColor(QColor(222,233,251));//设置颜色
    m_chart->legend()->setLabelColor(QColor(0,100,255));//设置标签颜色
    m_chart->legend()->setMaximumHeight(50);
    QChartView *chartView = new QChartView(m_chart);
    chartView->setRenderHint(QPainter::Antialiasing);

    QVBoxLayout *pVLayout = new QVBoxLayout(this);
    pVLayout->addWidget(chartView);

    resize(960, 720);

3.QChart之饼图

绘制饼图需要用到3个类

  • QSplineSeries: 用于创建有由一系列数据组成的饼图数据
  • QChart: 图表界面,用来管理图表内容,颜色,大小等
  • QChartView:负责显示QChart

效果如下:

代码如下:

    m_chart = new QChart();

    QPieSeries *series = new QPieSeries();
    series->append("水果:30%",3);     //添加标签"水果:30%" 和 百分值30%
    series->append("零食:20%",2);
    series->append("主食:50%",5);

    series->setLabelsVisible(true);
    series->setUseOpenGL(true);
    series->slices().at(0)->setColor(QColor(13,128,217));   //设置颜色
    series->slices().at(0)->setLabelColor(QColor(13,128,217));

    series->slices().at(1)->setColor(QColor(69,13,217));
    series->slices().at(1)->setLabelColor(QColor(69,13,217));

    series->slices().at(2)->setColor(QColor(13,217,152));
    series->slices().at(2)->setLabelColor(QColor(13,217,152));

    m_chart->setTheme(QChart::ChartThemeLight);//设置白色主题
    m_chart->setDropShadowEnabled(true);//背景阴影
    m_chart->addSeries(series);//添加系列到QChart上

    m_chart->setTitleBrush(QBrush(QColor(0,0,255)));//设置标题Brush
    m_chart->setTitleFont(QFont("微软雅黑"));//设置标题字体
    m_chart->setTitle("饼状图");

    //修改说明样式
    m_chart->legend()->setVisible(true);
    m_chart->legend()->setAlignment(Qt::AlignBottom);//底部对齐
    m_chart->legend()->setBackgroundVisible(true);//设置背景是否可视
    m_chart->legend()->setAutoFillBackground(true);//设置背景自动填充
    m_chart->legend()->setColor(QColor(222,233,251));//设置颜色
    m_chart->legend()->setLabelColor(QColor(0,100,255));//设置标签颜色
    m_chart->legend()->setMaximumHeight(50);

    QChartView *chartView = new QChartView(m_chart);
    chartView->setRenderHint(QPainter::Antialiasing);

    QVBoxLayout *pVLayout = new QVBoxLayout(this);
    pVLayout->addWidget(chartView);

    resize(960, 720);

4. QChart之条形图

绘制条形图需要用到4个类

  • QBarSet: 一个条形集合
  • QBarSeries: 用来封装多个QBarSet的条形数据
  • QChart: 图表界面,用来管理图表内容,颜色,大小等
  • QChartView: 负责显示QChart

效果如下:

代码如下:

    m_chart = new QChart();

   

    //创建3个条线数据
    QBarSet *set0 = new QBarSet("零食");
    QBarSet *set1 = new QBarSet("水果");
    QBarSet *set2 = new QBarSet("主食");

    *set0 << 158 << 685 << 458 << 260 << 354;    //向零食数据添加这4个月的销售数据
    *set1 << 350 << 725 << 602 << 523 << 458;
    *set2 << 222 << 350 << 598 << 480 << 687;

    set0->setLabelColor(QColor(0,0,255));       //设置条形数据颜色
    set1->setLabelColor(QColor(0,0,255));
    set2->setLabelColor(QColor(0,0,255));

    QBarSeries *series = new QBarSeries();
    series->append(set0);
    series->append(set1);
    series->append(set2);
    series->setVisible(true);
    series->setLabelsVisible(true);

    m_chart->setTheme(QChart::ChartThemeLight);//设置白色主题
    m_chart->setDropShadowEnabled(true);//背景阴影
    m_chart->addSeries(series);//添加系列到QChart上

    m_chart->setTitleBrush(QBrush(QColor(0,0,255)));//设置标题Brush
    m_chart->setTitleFont(QFont("微软雅黑"));//设置标题字体
    m_chart->setTitle("超市销售条形图");

    //创建X轴和Y轴
    QBarCategoryAxis *axisX = new QBarCategoryAxis;
    axisX->append("一月");
    axisX->append("二月");
    axisX->append("三月");
    axisX->append("四月");
    axisX->append("五月");
    axisX->setLabelsColor(QColor(7,28,96));

    QValueAxis *axisY = new QValueAxis;
    axisY->setRange(0,1000);   //改为setRange(0,1);则表示坐标为动态计算大小的
    axisY->setTitleText("价格");
    axisY->setLabelFormat("%d$");

    m_chart->setAxisX(axisX,series);
    m_chart->setAxisY(axisY,series);
 
    //修改说明样式
    m_chart->legend()->setVisible(true);
    m_chart->legend()->setAlignment(Qt::AlignBottom);//底部对齐
    m_chart->legend()->setBackgroundVisible(true);//设置背景是否可视
    m_chart->legend()->setAutoFillBackground(true);//设置背景自动填充
    m_chart->legend()->setColor(QColor(222,233,251));//设置颜色
    m_chart->legend()->setLabelColor(QColor(0,100,255));//设置标签颜色
    m_chart->legend()->setMaximumHeight(50);

    QChartView *chartView = new QChartView(m_chart);
    chartView->setRenderHint(QPainter::Antialiasing);

    QVBoxLayout *pVLayout = new QVBoxLayout(this);
    pVLayout->addWidget(chartView);

    resize(960, 720);

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 52.Qt-Charts动态显示多条折线电压值(实现示波器效果)

    Qt 5.7过后Qt添加了官方的Chart库,之前就用的比较习惯,这次把源码发出来,给入门的同学们参考参考.

    张诺谦
  • 24.QTableView函数使用,右击菜单实现

    对于QStandardItem的setData()成员 函数的第二个参数role 是模型数据角色 

    张诺谦
  • JAVA-内部类实例

    张诺谦
  • 手绘效果为图表添色,cutecharts带你画Q版可视图|可视化系列04

    Matplotlib默认主题下绘制的可视化图形如一位高贵冷艳、不沾烟火的冰山女神,而cutecharts的图就像不拘常规、潇洒无羁的活力少年。

    蛰虫始航
  • dojo chart生成函数

    lzugis
  • 你将你的Helm chart放在哪里?

    无论你喜欢与否,你都不得不承认Helm是管理Kubernetes应用程序独一无二的工具,你甚至可以通过不同的方式使用它。

    不会飞的小鸟
  • 如何选出适合自己的管理Helm Chart的最佳方式?

    无论你喜欢与否,你都不得不承认Helm是管理Kubernetes应用程序独一无二的工具,你甚至可以通过不同的方式使用它。

    CNCF
  • Machine Learning Toolbox

    尝试自己造一个轮子,封装出一个常用的机器学习相关工具的库 目前在写可视化,会用到 bokeh 和 polty

    Fred Liang
  • react-native 使用 F2实现折线图

    最近工作入坑了react-native,有实现折线图的需求,使用了阿里的antv/f2可视化库。

    w候人兮猗
  • ali F2(移动端数据展示) 入门

    可接受一个函数作为第二参数, 函数接收的参数为第一参数的配置, 函数返回值将作为配置值

    copy_left

扫码关注云+社区

领取腾讯云代金券