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

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：// 本身QChart是不可见的 需要用QChartView是渲染显示

  m_chartView = new QChartView(m_chart,this);

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

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

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

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

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