qtCharts----柱状图、折线图、饼图、曲线图

最新推荐文章于 2024-06-03 15:03:23 发布

草莓瑶瑶奶昔

最新推荐文章于 2024-06-03 15:03:23 发布

阅读量4.7k

点赞数 6

分类专栏： QtCreate_C++学习类文章标签： vue.js html5 python

本文链接：https://blog.csdn.net/weixin_61196167/article/details/120652482

版权

QtCreate_C++学习类专栏收录该内容

11 篇文章 2 订阅

订阅专栏

参考链接:

QT -- QChart画柱状图 - 手磨咖啡 - 博客园

QChart的简单使用_折现图-CSDN博客_qchart

QtCharts_饼图QPieSeries_有志者事竟成-CSDN博客

Qchart的两种显示方法

这是一个刚毕业的职场小白，边学边记录的一些小知识。

如有问题请多指教，如有侵权纯属意外，望告知删除。

一、前期准备

1.1 命名空间

在使用QCharts的各个控件之前，必须先声明一个命名空间：

在程序的开头加上一句 using namespace Qtcharts

或者一个宏 QT_CHARTS_USE_NAMESPACE

然而我加载命名空间时报错：error: 'QT_CHARTS_USE_NAMESPACE' does not name a type; did you mean 'QT_USE_NAMESPACE'?

这是因为没有添加头文件：

#include <QtCharts>

1.2 pro文件

pro文件中添加QT += charts

1.3 一点逻辑

(图片来源于网络)

1、series

该类将一系列数据，按类别分组。

举个栗子：折线图中将QBarSet中的竖条，按类别分组。

这个类会将每个人的一条数据添加到series中，形成一组数据。

2、Qchart

管理图标、图例和坐标轴的图形表示

3、QchartView容器

series包含在chart中，chart包含在chartView中显示。

QChart本身是用来存放需要展示的控件的类，

QChartView则是用于人眼识别观察的入口。

对于界面所有的更改都是在QChart上发生的，不过界面显示通过QChartView渲染

纯属个人理解，如有错误望指出

二、柱状图

2.1 理论逻辑

1、QBarSet

所有向下的箭头都属于一组QBarSet

即QBarSet类表示条形图中的一组条形

图标也是通过QBarSet设置

2、QBarSeries

将每一条QBarSet(假设一个QBarSet是一个人)

即，将每个QBarSet按类分组，将上面QBarSet中的n个人放置到series中

3、QBarCategoryAxis

可以设置坐标轴标识名称。

4、代码示例

柱状图：

    /*
     * QBarSet表示条形图中的一组条形
     * 一个Bar集包含每个类别的一个数据值
    */
    //26-30行 定义了表下方的标签
    QBarSet *set0 = new QBarSet("Jane");
    QBarSet *set1 = new QBarSet("John");
    QBarSet *set2 = new QBarSet("Axel");
    QBarSet *set3 = new QBarSet("Mary");
    QBarSet *set4 = new QBarSet("Samantha");

    //33-37行 给柱状赋值
    *set0 << 1 << 1 << 3 << 4 << 5 << 6;
    *set1 << 1 << 1 << 3 << 4 << 5 << 6;
    *set2 << 1 << 1 << 3 << 4 << 5 << 6;
    *set3 << 1 << 1 << 3 << 4 << 5 << 6;
    *set4 << 1 << 1 << 3 << 4 << 5 << 6;

    /*
     * QBarSeries
     * 这个类以垂直条的形式呈现一系列数据，按类别分组
     * 将数据绘制为一系列按类别分组的竖线，每个类别中有一条竖线添加到这个系列中
     */
    QBarSeries *series = new QBarSeries();
    series->append(set0);
    series->append(set1);
    series->append(set2);
    series->append(set3);
    series->append(set4);

    //将series添加到chart中
    QChart *chart = new QChart();
    chart->addSeries(series);
    chart->setTitle("plane pillarMap");
    chart->setAnimationOptions(QChart::SeriesAnimations);

    /*
     * QBarCategoryAxis
     * 将类别添加到图表的轴中
     * 可以使用该类设置带有标记、网格线和阴影的轴线
     * 它还可以和线系列一起使用,如Line和BarChart。
     *
     * QBarCategoryAxis:柱状图坐标文字描述
     * QValueAxis:设置坐标轴范围
    */
    QStringList categories;
    categories << "Jan" << "Feb" << "Mar" << "Apr" << "May" << "Jun";
    //实例化坐标轴文字标识轴
    QBarCategoryAxis *axis = new QBarCategoryAxis();
    //将文字放入标识轴中
    axis->append(categories);
    //创建默认的坐标轴
    chart->createDefaultAxes();
    //设置坐标轴
    chart->setAxisX(axis, series);

    //设置图例为显示状态
    chart->legend()->setVisible(true);
    //设置图例位置为底部
    chart->legend()->setAlignment(Qt::AlignBottom);

    //将chart添加到chartView显示容器中
    QChartView *chartview = new QChartView(chart);
    chartview->setRenderHint(QPainter::Antialiasing);

    //显示到界面上
    this->setCentralWidget(chartview);

6、柱状补充

其中赋值中给每个人(QBarSet)的六个值赋值。

然后依次显示到坐标轴上，其中按照下图红框的形式，呈现一组一组显示。

其中还包括百分比堆叠柱状图：

将数据序列QBarSeries换成QPercentBarSeries即可。

横向百分比堆叠柱状图：

QHorizontalPercentBarSeries

堆叠柱状图：

QStackedBarSeries

三、折线图

可结合上述学习参考链接学习下列代码(建议直接观看原文更清晰)

    //蓝色折线
    QLineSeries *pLineSeriesBule = new QLineSeries();
    pLineSeriesBule->setPen(QPen(Qt::blue, 1, Qt::SolidLine));
    pLineSeriesBule->append(1, 5);
    pLineSeriesBule->append(3,4);
    QList<QPointF> list;
    list << QPointF(4, 8) << QPointF(6,10) << QPointF(7,3) <<QPointF(10, 6);
    pLineSeriesBule->append(list);
    pLineSeriesBule->setName("A");

    //红色折线
    QLineSeries *pLineSeriesRed = new QLineSeries();
    //颜色，线条数量，线型
    pLineSeriesRed->setPen(QPen(Qt::red, 1, Qt::SolidLine));
    //赋值方式1
    pLineSeriesRed->append(1, 1);
    //赋值方式2
    QList<QPointF> list1;
    list1 << QPointF(2, 3) << QPointF(4, 2) << QPointF(5, 0) << QPointF(10, 6);
    pLineSeriesRed->append(list1);

    //设置图标名称
    pLineSeriesRed->setName("B");

    //将series添加到chart
    QChart *chart = new QChart();
    chart->addSeries(pLineSeriesBule);
    chart->addSeries(pLineSeriesRed);
    //图表标题
    chart->setTitle("title brokenMap plane");
    //创建坐标轴
    chart->createDefaultAxes();

    //将chart放入chartview容器中
    QChartView *chartview = new QChartView(chart);
    //设置chartview渲染属性为抗混叠
    chartview->setRenderHint(QPainter::Antialiasing);
    this->setCentralWidget(chartview);

四、饼图

可直接观看文章开头参考链接。

    QPieSeries *series = new QPieSeries();
    //图标名称,占比
    series->append("10%", 1);
    series->append("20%", 2);
    series->append("70%", 7);
    series->setLabelsVisible();

    //设置颜色
    QPieSlice *slice_red = series->slices().at(0);
    QPieSlice *slice_green = series->slices().at(1);
    QPieSlice *slice_blue = series->slices().at(2);

    slice_red->setColor(QColor(255,0,0,255));
    slice_green->setColor(QColor(0,255,0,255));
    slice_blue->setColor(QColor(0,0,255,255));

    //将series添加到chart中
    //设置图例和标题
    QChart *chart = new QChart();
    chart->addSeries(series);
    chart->setTitle("PirMap");
    chart->legend()->hide();//隐藏图例

    //将chart添加到chartView中
    QChartView *chartview = new QChartView(chart);
    chartview->setRenderHint(QPainter::Antialiasing);

    //显示到界面上
    this->setCentralWidget(chartview);

五、曲线图

代码是大概代码，以下代码做不出如上效果。

//series
//创建曲线条
QSplineSeries *seriesA = new QSplineSeries;
//定义图例名
seriesA->setName(QStringLiteral("全部故障"));
//显示坐标点
seriesA->setPointsVisible(true);
//给曲线赋值
seriesA->append(x--int, y--int);

//QChart
QChart *chart = new QChart();
//绑定series
chart->addSeries(seriesA);
//默认坐标轴
chart->createDefaultAxes();
//修改X轴
QValueAxis *axisX = new QValueAxis;
//设置内容范围
axisX->setRange(min--int, max--int);
axisX->setLabelFormat("%d");//整型增加
axisX->setTitleText(QStringLiteral("年份"));//X轴名称
//绑定曲线到坐标轴
chart->setAxisX(axisX, seriesA);

//绑定chart到chartview
QChartView *chartview = new QChartView(chart);
chartview->setRenderHint(QPainter::Antialiasing);
this->setCentralWidget(chartview);