qt5 QCharts使用 绘制曲线步骤

step:

1. 创建一个Qt widgets application,并在*.pro中添加以下代码，run qmake

QT       += core gui sql  charts

2. 创建QChartView

只需在生成的mainwindow.cpp中添加以下四行代码，就完成了QChartView的创建。

#include "mainwindow.h"
#include "ui_mainwindow.h"

#include  // 手动添加代码行1
using namespace QtCharts;      // 手动添加代码行2
MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow)
{
    ui->setupUi(this);

    QChartView * _chart_view = new QChartView;// 手动添加代码行3

    this->setCentralWidget(_chart_view);// 手动添加代码行4
}

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

现在我们已经完成了,QChartView的创建，编译并运行，可以看到如下效果，白色部分就是我们创建的chartview,什么也没有是因为我们没有在上边添加series.

如果在*.ui中拖拽也可以完成QChartView创建工作，不过需要prompt.

我一般是在程序里直接代码创建widget(这样做的好处是便于版本管理，当然这只是个人习惯)。

3. 绘制曲线,添加数据

这里我们给chart添加一条曲线:

#include "mainwindow.h"
#include "ui_mainwindow.h"
#include 
#include 

using namespace QtCharts;
MainWindow::MainWindow(QWidget *parent) : QMainWindow(parent),ui(new Ui::MainWindow) {    
    ui->setupUi(this);    
    QChartView * _chart_view = new QChartView;    
    this->setCentralWidget(_chart_view);   
    /* 以下代码完成曲线添加 */    
    QLineSeries *seriesx = new QLineSeries();    
    for(int i=0;i<10;++i) {    
       seriesx->append(i,i*1.0);    
    }    
    _chart_view->chart()->addSeries(seriesx);
}

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

效果如下：

4. 其他属性

以上工作已经完成了一条曲线的绘制，但是太简略，我们可以添加坐标轴，添加标题，添加网格，设置图片theme等等，如下：

#include "mainwindow.h"
#include "ui_mainwindow.h"
 
#include 
#include 
#include 

using namespace QtCharts;
MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow) {
    ui->setupUi(this);

    QChartView * _chart_view = new QChartView;
    this->setCentralWidget(_chart_view);
    QLineSeries *seriesx = new QLineSeries();
    for(int i=0;i<10;++i {
       seriesx->append(i,i*1.0);
    }
    /* 其他属性的设置 */
    _chart_view->chart()->addSeries(seriesx);
 
    _chart_view->chart()->setTheme(QChart::ChartThemeBlueCerulean);
    seriesx->setName("test data");
    _chart_view->chart()->setTitle("chart for test");
    QValueAxis *axisx = new QValueAxis;
    axisx->setTitleText("sample time(s)");
    _chart_view->chart()->setAxisX(axisx, seriesx);
    QValueAxis *axisy = new QValueAxis;
    axisy->setTitleText("height(meter)");
    _chart_view->chart()->setAxisY(axisy,seriesx);
    _chart_view->chart()->legend()->setVisible(true);
    _chart_view->chart()->legend()->setAlignment(Qt::AlignBottom);
}

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

效果如下：