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;
}
效果如下: