QChart中柱形图的简单使用并实现【Qt】

2024-10-31 07:49:07

预备工作

如果qt没下载去下载一个，下载太慢了可以试试它[点击跳转] (https://blog.****.net/qq_19319481/article/details/131655379)。
如果已经下载了qt发现自己的组件中没有QCharts，可以去试试它点击跳转。

都搞定了以后在pro文件里面添加QT += charts,如果是qmake的话是前面这个步骤，如果是cmake，可以自行去查找，没有添加就会报错，不要忘记这块就好。

然后添加头文件：

一些教程上是#include <QtCharts>，当然也没有问题：

可以将QChart视为场景，不可见，使用来装载和管理柱形，折线等图表元素，但不可将其完全视为场景。
下面这是将QChart添加进QChartView

下面这是没有将QChart添加进QChartView：

可以对比看出来QChart是不可见的。
需要使用QChartView来将QChart显示出来，下面是初始过程：

#include "widget.h"
#include "ui_widget.h"

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);

    QChart *chart = new QChart();
    QChartView *chartView = new QChartView(this);
    chartView->setGeometry(x(),y(),width(),height());


    chartView->setChart(chart);
}

Widget::~Widget()
{
    delete ui;
}

一个二维图表的基础是轴，x,y轴，我们用QValueAxis类得到轴，并且可以对轴进行一些处理。

QValueAxis *xAxis = new QValueAxis();
    QValueAxis *yAxis = new QValueAxis();
    xAxis->setRange(0,100);
    yAxis->setRange(0,50);
    
    chart->addAxis(xAxis, Qt::AlignBottom);
    chart->addAxis(yAxis, Qt::AlignLeft);

运行后得到：

这是QValueAxis类的成员函数，上面我们为轴设置了范围，如果想设置轴的刻度线数量，可以：

xAxis->setTickCount(10);
yAxis->setTickCount(5);

目前看到我们的轴标签（轴下面的文字）是1位小数，我们可以通过setLabelFormat函数来修改格式:

xAxis->setLabelFormat("%d");
yAxis->setLabelFormat("%d");

参数跟C语言的printf里面的参数格式一样：%d,%f…

QValueAxis类的主要函数	解释
void setVisible()	设置坐标轴可见性
Qt::Orientation orientation()	返回坐标轴方向
void setMin()	设置坐标轴最小值
void setMax()	设置坐标轴最大值
void setRange()	设置坐标轴最小、最大值表示的范围
void setTitleVisible()	设置轴标题的可见性
void setTitleText()	设置轴标题的文字
void setTitleFont()	设置轴标题的字体
void setTitleBrush()	设置轴标题的画刷
void setLabelFormat()	设置标签格式，例如可以设置显示的小数点位数
void setLabelsAngle()	设置标签的角度，单位为度
void setLabelsBrush()	设置标签的画刷
void setLabelsColor()	设置标签文字颜色
void setLabelsFont()	设置标签文字字体
void setLabelsVisible()	设置轴标签文字是否可见
void setTickCount()	设置坐标轴主刻度个数
void setLineVisible()	设置轴线和刻度线的可见性
void setLinePen()	设置轴线和刻度线的画笔
void setLinePenColor()	设置轴线和刻度线的颜色
void setGridLineColor()	设置网格线的颜色
void setGridLinePen()	设置网格线的画笔
void setGridLineVisible()	设置网格线的可见性
void setMinorTickCount()	设置两个主刻度之间的次刻度的个数
void setMinorGridLineColor()	设置次网格线的颜色
void setMinorGridLinePen()	设置次网格线的画笔
void setMinorGridLineVisible()	设置次网格线的可见性

现在整个柱状图还差2维坐标系里面的柱形元素:

QBarSeries *barSeries = new QBarSeries;

    QBarSet *set0 = new QBarSet("第一季度");
    QBarSet *set1 = new QBarSet("第二季度");
    QBarSet *set2 = new QBarSet("第三季度");
    QBarSet *set3 = new QBarSet("第四季度");

    *set0 << 14;
    *set1 << 23;
    *set2 << 8;
    *set3 << 34;

    barSeries->append(set0);
    barSeries->append(set1);
    barSeries->append(set2);
    barSeries->append(set3);

    chart->addSeries(barSeries);

运行后：

发现柱形的位置不对，看了QBarAxis的成员函数，查了资料，一直都不能解决，直到…

也就是

只添加了一个BarSet，运行得到：

突然豁然开朗，BarSet不就是Bar的集合嘛，Bar不就是一个柱子嘛，所以应该这样：

#include "widget.h"
#include "ui_widget.h"

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);

    QChart *chart = new QChart();
    QChartView *chartView = new QChartView(this);
    chartView->setGeometry(x(),y(),width(),height());

    QBarCategoryAxis *xAxis = new QBarCategoryAxis();
    QValueAxis *yAxis = new QValueAxis();
    yAxis->setRange(0,100);
    yAxis->setTickCount(10);
    yAxis->setLabelFormat("%d");

    chart->addAxis(xAxis, Qt::AlignBottom);
    chart->addAxis(yAxis, Qt::AlignLeft);

    QBarSeries *barSeries = new QBarSeries;

    QStringList catergory;
    catergory << "第一季度" << "第二季度" << "第三季度" << "第四季度" ;
    xAxis->append(catergory);

    QBarSet *set0 = new QBarSet("aa");

    *set0 << 14 << 34 << 12 << 9;

    barSeries->append(set0);

    barSeries->attachAxis(xAxis);
    chart->addSeries(barSeries);

    chartView->setChart(chart);
}

Widget::~Widget()
{
    delete ui;
}

运行得到：

如果我们写两个BarSet的话：

#include "widget.h"
#include "ui_widget.h"

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);

    QChart *chart = new QChart();
    QChartView *chartView = new QChartView(this);
    chartView->setGeometry(x(),y(),width(),height());

    QBarCategoryAxis *xAxis = new QBarCategoryAxis();
    QValueAxis *yAxis = new QValueAxis();
    yAxis->setRange(0,100);
    yAxis->setTickCount(10);
    yAxis->setLabelFormat("%d");

    chart->addAxis(xAxis, Qt::AlignBottom);
    chart->addAxis(yAxis, Qt::AlignLeft);

    QBarSeries *barSeries = new QBarSeries;

    QStringList catergory;
    catergory << "第一季度" << "第二季度" << "第三季度" << "第四季度" ;
    xAxis->append(catergory);

    QBarSet *set0 = new QBarSet("aa");
    QBarSet *set1 = new QBarSet("bb");

    *set0 << 14 << 34 << 12 << 9;
    *set1 << 14 << 34 << 12 << 9;

    barSeries->append(set0);
    barSeries->append(set1);

    barSeries->attachAxis(xAxis);
    chart->addSeries(barSeries);

    chartView->setChart(chart);
}

Widget::~Widget()
{
    delete ui;
}

运行后：

这时才明白过来。

新人创作不易，你的点赞和关注都是对我莫大的鼓励，再次感谢您的观看。

码农公寓

预备工作

相关文章