Qt | QPieSeries(饼图)+QSplineSeries(曲线图)+QAreaSeries(面积图)实战

2024-08-05 20:10:53 浏览数 (2)

点击上方"蓝字"关注我们

01、QPieSeries

QPieSeries是一个用于创建和展示饼图的类。它提供了基本的饼图绘制功能,包括设置饼图的标签、数据和样式。用户可以通过实例化QPieSeries类并调用其方法来生成饼图。此外,QPieSeries还支持一些交互功能,如设置饼图的颜色、边框宽度等。

02、QPieSlice

QPieSlice是QPieSeries类中的一个重要组成部分,它代表饼图中的一个扇形区域。每个QPieSlice都有一个标签(label)、值(value)以及可选的颜色(color)。QPieSeries通过将数据分成多个QPieSlice来构建饼图,每个QPieSlice的角度与其值成正比。用户可以通过修改QPieSlice的属性来定制饼图中各个扇形的外观。

03、示例 饼图制作 main.cpp

代码语言:javascript复制
#include <QtWidgets/QApplication>
#include <QtWidgets/QMainWindow>
#include <QtCharts/QChartView>
#include <QtCharts/QPieSeries>
#include <QtCharts/QPieSlice>
#include <QDebug>
​
//QT_CHARTS_USE_NAMESPACE
​
int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
​
//![1] 创建饼图
    QPieSeries *series = new QPieSeries();
    series->append("Jane", 5);
    series->append("Joe", 2);
    series->append("Andy", 7);
    series->append("Barbara", 12);
    series->append("Axel", 22);
//![1]
​
//![2] 表示饼系列中的单个切片
    qDebug() << series->slices().size(); // 5 切片
    qreal total = 0;
    for (int i = 0; i < series->slices().size(); i  ) {
        total  = series->slices().at(i)->value();
    }
    foreach (QPieSlice *slice, series->slices()) {
        qreal percentage = (slice->value() / total) * 100;
        slice->setLabel(QString("%1 (%2%)").arg(slice->label()).arg(percentage, 0, 'f', 1));
        // 此属性保留切片标签的可见性
        slice->setLabelVisible(true);
    }
​
    QPieSlice *slice = series->slices().at(1);
    // 此属性用于保存切片是否与饼图分离
    slice->setExploded(true);
    slice->setPen(QPen(Qt::darkGreen, 2));
    slice->setBrush(Qt::green);
//![2]
​
//![3] 创建图表
    QChart *chart = new QChart();
    chart->addSeries(series);
    chart->setTitle("简单的饼图示例");
    chart->legend()->hide();
//![3]
​
//![4] 图表视图
    QChartView *chartView = new QChartView(chart);
    chartView->setRenderHint(QPainter::Antialiasing);
//![4]
​
//![5]
    QMainWindow window;
    window.setCentralWidget(chartView);
    window.resize(400, 300);
    window.show();
//![5]
​
    return a.exec();
}

04、演示

必不可少,.pro添加

代码语言:javascript复制
QT  = charts

05、QSplineSeries

QSplineSeries是一个用于创建和展示样条曲线的类。它允许用户定义一系列的点,并通过这些点生成平滑的曲线。QSplineSeries通常用于绘制函数图像、数据拟合曲线或任意路径的图形表示。

06、示例 曲线图 main.cpp

代码语言:javascript复制
#include <QtWidgets/QApplication>
#include <QtWidgets/QMainWindow>
#include <QtCharts/QChartView>
#include <QtCharts/QSplineSeries>
​
//QT_CHARTS_USE_NAMESPACE
​
int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
​
    //![1] 样条图的形式表示数据
    QSplineSeries *series = new QSplineSeries();
    series->setName("spline");
    //![1]
​
    //![2]
    series->append(0, 6);
    series->append(2, 4);
    series->append(3, 8);
    series->append(7, 4);
    series->append(10, 5);
    *series << QPointF(11, 1) << QPointF(13, 3) << QPointF(17, 6) << QPointF(18, 3) << QPointF(20, 2);
    //![2]
    series->setPointsVisible(true);
    series->setPointLabelsVisible(true);
    series->setPointLabelsColor(Qt::blue);
    //![3]
    QChart *chart = new QChart();
    chart->legend()->hide();
    chart->addSeries(series);
    chart->setTitle("Simple spline chart example");
    chart->createDefaultAxes();
    chart->axes(Qt::Vertical).first()->setRange(0, 10);
    //![3]
​
    //![4]
    QChartView *chartView = new QChartView(chart);
    chartView->setRenderHint(QPainter::Antialiasing);
    //![4]
​
    //![5]
    QMainWindow window;
    window.setCentralWidget(chartView);
    window.resize(400, 300);
    window.show();
    //![5]
​
    return a.exec();
}

07、演示

08、QAreaSeries

QAreaSeries是一个用于创建和展示面积图的类。它允许用户通过一组数据点来绘制填充的区域,这些区域的高度表示数据的值。面积图常用于展示数据随时间或其他连续变量的累积变化。

09、示例面积图 main.cpp

代码语言:javascript复制
#include <QtWidgets/QApplication>
#include <QtWidgets/QMainWindow>
#include <QtCharts/QChartView>
#include <QtCharts/QLineSeries>
#include <QtCharts/QAreaSeries>
​
// 这句必不可少 否则头文件引入失败
//QT_CHARTS_USE_NAMESPACE
​
int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
​
//![1] 折线图用于显示由直线连接的一系列数据点
    QLineSeries *series0 = new QLineSeries();
    QLineSeries *series1 = new QLineSeries();
//![1]
​
//![2] 两条折线图
    *series0 << QPointF(1, 5) << QPointF(3, 7) << QPointF(7, 6) << QPointF(9, 7) << QPointF(12, 6)
             << QPointF(16, 7) << QPointF(18, 5);
    *series1 << QPointF(1, 3) << QPointF(3, 4) << QPointF(7, 3) << QPointF(8, 2) << QPointF(12, 3)
             << QPointF(16, 4) << QPointF(18, 3);
//![2]
​
//![3] 面积图   两条折线图连接而成
    QAreaSeries *series = new QAreaSeries(series0, series1);
    series->setName("Batman");
    QPen pen(0x059605);
    pen.setWidth(3);
    series->setPen(pen);
​
    // 显示点和坐标
    series->setPointsVisible(true);
    series->setPointLabelsVisible(true);
    series->setPointLabelsFormat("(@xPoint,@yPoint)");
​
    // 设置渐变色
    QLinearGradient gradient(QPointF(0, 0), QPointF(0, 1));
    gradient.setColorAt(0.0, 0x3cc63c);
    gradient.setColorAt(1.0, 0x26f626);
    gradient.setCoordinateMode(QGradient::ObjectBoundingMode);
    series->setBrush(gradient);
//![3]
​
//![4]
    QChart *chart = new QChart();
    chart->addSeries(series);
    chart->setTitle("简单面积图示例");
    // 开启默认坐标
    chart->createDefaultAxes();
    // 通过图表直接设置坐标轴范围
    chart->axes(Qt::Horizontal).first()->setRange(0, 20);
    chart->axes(Qt::Vertical).first()->setRange(0, 10);
//![4]
​
//![5]
    QChartView *chartView = new QChartView(chart);
    chartView->setRenderHint(QPainter::Antialiasing); // 抗锯齿
//![5]
​
//![6]
    QMainWindow window;
    window.setCentralWidget(chartView); // 图表视图显示在这里
    window.resize(400, 300);
    window.show();
//![6]
​
    return a.exec();
}

10、示例

总结

Qt | QChart QChartView QLineSeries(折线图) QBarSeries(柱状图)实战

Qt | QChart和QChartView配合实现面积图、条形图、折线图、饼图、曲线图、散点图,支持显示坐标值和坐标点。

基于Qt之QChart 图表(优美的曲线图案例)

基于Qt QChart和QChartView实现正弦、余弦、正切图表

QChart是Qt框架中的一个类,用于在Qt Quick应用程序中显示图表。它提供了一个抽象层,允许开发者使用各种图表类型(如柱状图、折线图、饼图等)而不必关心底层渲染细节。QChart类提供了丰富的API,用于定制图表的样式、数据绑定、交互行为等。

QChart的主要特点包括:

1. 多种图表类型:QChart支持多种图表类型,如柱状图、折线图、饼图、散点图等,以满足不同的数据展示需求。

2. 数据绑定:QChart可以与数据模型(如QVector、QMap等)绑定,实现数据的自动更新和刷新。

3. 自定义图表元素:用户可以通过添加自定义的图表元素(如轴、图例、数据点标记等)来丰富图表的视觉效果。

4. 交互性:QChart支持鼠标事件和触摸事件,允许用户与图表进行交互,如缩放、平移等。

5. 性能优化:QChart针对性能进行了优化,确保在大规模数据集上的流畅绘制。

0 人点赞