QChart之QSplineSeries绘制曲线图

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

使用准备：
  1:在pro中, 添加QT+= chartsQT += core gui charts
  2:然后在界面头文件中添加头文件并声明命名空间,添 加:QT_CHARTS_USE_NAMESPACE

画一张图最基本的一些知识点：

新建一个widgets0工程：
MainWidget.h

#ifndef MAINWIDGET_H
#define MAINWIDGET_H

#include <QWidget>
#include <QtCharts/QChartGlobal>
#include <QtCharts/QChart>
#include <QtCharts/QChartView>

#include <QtWidgets/QWidget>
#include <QtWidgets/QGraphicsWidget>
#include <QtWidgets/QGridLayout>
#include <QtWidgets/QGraphicsGridLayout>
#include <QtWidgets/QDoubleSpinBox>
#include <QtWidgets/QGroupBox>
#include <QtCharts/QLineSeries>

QT_CHARTS_USE_NAMESPACE

class MainWidget : public QWidget
{
    Q_OBJECT

public:
    MainWidget(QWidget *parent = 0);
    ~MainWidget();

public slots:
    void addSeries();
    void connectMarkers();
    void handleMarkerClicked();

private:


    QChart *m_chart;
    QList<QLineSeries *> m_series;

    QChartView *m_chartView;
    QGridLayout *m_mainLayout;
    QGridLayout *m_fontLayout;



};

#endif // MAINWIDGET_H

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

MainWidget.cpp:

#include "mainwidget.h"
#include <QtCharts/QChart>
#include <QtCharts/QChartView>
#include <QtWidgets/QPushButton>
#include <QtWidgets/QLabel>
#include <QtCore/QDebug>
#include <QtCharts/QLegend>
#include <QtWidgets/QFormLayout>
#include <QtCharts/QLegendMarker>
#include <QtCharts/QLineSeries>
#include <QtCharts/QXYLegendMarker>
#include <QtCore/QtMath>
#include <QtCharts/QValueAxis>


QT_CHARTS_USE_NAMESPACE

MainWidget::MainWidget(QWidget *parent)
    : QWidget(parent)
{
    m_chart = new QChart();

//    m_chart->setTheme(QChart::ChartThemeBlueIcy); //改变主题
//    m_chart->setDropShadowEnabled(true);//背景阴影
//    m_chart->setAutoFillBackground(true);  //设置背景自动填充

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

// 本身QChart是不可见的 需要用QChartView是渲染显示 没有这一行 就什么都看不到
    m_chartView = new QChartView(m_chart,this);

    m_mainLayout= new QGridLayout();  //格栅布局 必须要这一步，如果没有进行布局，那么整个chart只有一个单元那么大
    m_mainLayout->addWidget(m_chartView,0,1,3,1); //把显示的chart视图添加到布局中，这样就可以实现chart视图跟显示窗口一样大
    setLayout(m_mainLayout);  //最终设置格栅布局，不可缺

    /*添加系列到chart上*/
    addSeries();
    addSeries();
    addSeries();
    addSeries();

 connectMarkers();

 m_chart->setTitle("Legendmarker example (click on legend)");
 m_chart->legend()->setVisible(true);
 m_chart->legend()->setAlignment(Qt::AlignBottom);

 m_chartView->setRenderHint(QPainter::Antialiasing);
}

MainWidget::~MainWidget()
{

}

void MainWidget::addSeries()
{
    QLineSeries *series =new QLineSeries();  //line为系列，即线条对象
    m_series.append(series);  //把系列传入list表中
    series->setName(QString("line"+QString::number(m_series.count())));

    QList<QPointF> data;  //数据列表
    int offset = m_chart->series().count(); //计算偏移量 即1，2，3，4系列的顺序
    for(int i=0;i<360;i++)
    {
        qreal x = offset*20+i;    //qreal数据类型 即double float
        data.append(QPointF(i, qSin(2.0 * 3.141592 * x / 360.0)));
    }

    series->append(data);  //把数据传入系列上
    m_chart->addSeries(series);   /*添加系列到chart上*/

//    if (m_series.count() == 1)
//        m_chart->createDefaultAxes();  //画轴

    /*设置横纵坐标的刻度值*/
    QValueAxis  *axisx =  new  QValueAxis();
    QValueAxis  *axisy =  new  QValueAxis();

    axisx->setRange(0,50);   //设置x轴范围
    axisy->setRange(10,100); //设置y轴范围

    m_chart->setAxisX(axisx); //把刻度值传入进视图m_chart中显示
    m_chart->setAxisY(axisy);

//   //修改说明样式  设置线条对象的说明文字 格式大小颜色 对齐位置等 就是指标签
//    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));//设置标签颜色
}


void MainWidget::connectMarkers()
{
    const auto markers = m_chart->legend()->markers();
    for (QLegendMarker *marker : markers) {
        // Disconnect possible existing connection to avoid multiple connections
        QObject::disconnect(marker, &QLegendMarker::clicked,
                            this, &MainWidget::handleMarkerClicked);
        QObject::connect(marker, &QLegendMarker::clicked, this, &MainWidget::handleMarkerClicked);
    }
}


void MainWidget::handleMarkerClicked()
{
    QLegendMarker *marker = qobject_cast<QLegendMarker*>(sender());  //sender记录legend中谁发出了信号
    Q_ASSERT(marker);
    switch (marker->type())
    {
    case QLegendMarker::LegendMarkerTypeXY:  //线条、样条或散点系列的图例标记。
    {
        marker->series()->setVisible(!marker->series()->isVisible());
        marker->setVisible(true);
        qreal alpha = 1.0;
        if (!marker->series()->isVisible())
            alpha = 0.5;
        QColor color;
        QBrush brush = marker->labelBrush();
        color = brush.color();
        color.setAlphaF(alpha);
        brush.setColor(color);
        marker->setLabelBrush(brush);

        brush = marker->brush();
        color = brush.color();
        color.setAlphaF(alpha);
        brush.setColor(color);
        marker->setBrush(brush);

        QPen pen = marker->pen();
        color = pen.color();
        color.setAlphaF(alpha);
        pen.setColor(color);
        marker->setPen(pen);
        break;
      }
    default:
        {
        qDebug() << "Unknown marker type";
        break;
        }
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150

重要的地方：
1：// 本身QChart是不可见的 需要用QChartView是渲染显示

  m_chartView = new QChartView(m_chart,this);
1

2：一般情况下我们都是把某个窗口部件放进栅格布局的一个单元中，但窗口部件有时也可能会需要占用多个单元。这时就需要用到addWidget()方法的一个重载版本，这个单元将从row和column开始，扩展到rowSpan和columnSpan指定的倍数的行和列。如果rowSpan或columnSpan的值为-1，则窗口部件将扩展到布局的底部或者右边边缘处。

m_mainLayout->addWidget(m_chartView,0,1,3,1); 
1

3： QLegendMarker 是系列legend中用于记录marker是否被点击

QLegendMarker *marker = qobject_cast<QLegendMarker*>(sender()); 
1

//sender记录legend中谁发出了信号