Qt-绘制图表
1 简介
使用Qt的charts模块来绘制图表,案例来自Qt自带的demo。
charts模块简介:Qt Chars模块提供了一系列容易使用的图表组件。需要使用charts组件时,需要导入Qt Charts模块,通过如下方式:QT += charts
在安装Qt Creator的时候,需要勾选上这个模块,不然是不能使用的。
2 Qt Charts总览
Qt Chars支持绘制:坐标图、柱状图、折线图、饼图、曲线图、散点图等。
3 测试及说明
首先创建一个工程,继承至MainWindow组件。
(1)绘制折线图
折线图通过线段展示一系列相关联的点。
使用的类:QLineSeries
测试代码:
1 MainWindow::MainWindow(QWidget *parent) : 2 QMainWindow(parent), 3 ui(new Ui::MainWindow) 4 { 5 ui->setupUi(this); 6 7 /* 8 * LineChart Example 9 */ 10 //添加一个QLineSeries实例 11 QLineSeries *lineseries = new QLineSeries(); 12 //添加数据(点),有两种方式 13 lineseries->append(0, 6); //参数分别为横纵坐标 14 lineseries->append(2, 4); 15 lineseries->append(3, 8); 16 lineseries->append(7, 4); 17 *lineseries << QPointF(11, 1) << QPointF(13, 3) << QPointF(17, 6) << QPointF(18, 3) << QPointF(20, 2); 18 //添加一个QChart实例,为了展示数据 19 QChart *chart = new QChart(); 20 chart->legend()->hide(); //隐藏图例 21 chart->addSeries(lineseries); 22 chart->createDefaultAxes(); 23 chart->setTitle("Simple line chart example"); 24 //添加一个QChartView图例 25 QChartView *chartView = new QChartView(chart); 26 chartView->setRenderHint(QPainter::Antialiasing); //呈现方式 27 //显示 28 this->setCentralWidget(chartView); 29 this->setCentralWidget(chartView); 30 this->resize(400, 300); 31 this->show(); 32 }
运行测试:
(2)绘制曲线图
使用的类:QSplineSeries
测试代码:
1 QSplineSeries *series = new QSplineSeries(); 2 series->setName("spline"); 3 series->append(0, 6); 4 series->append(2, 4); 5 series->append(3, 8); 6 series->append(7, 4); 7 series->append(10, 5); 8 9 QChart *chart = new QChart(); 10 chart->legend()->hide(); 11 chart->addSeries(series); 12 chart->setTitle("Simple spline chart example"); 13 chart->createDefaultAxes(); 14 chart->axisY()->setRange(0, 10); 15 16 QChartView *chartView = new QChartView(chart); 17 chartView->setRenderHint(QPainter::Antialiasing); 18 19 this->setCentralWidget(chartView); 20 this->setCentralWidget(chartView); 21 this->resize(400, 300); 22 this->show();
运行测试:
(3)绘制面积图
使用的类:QAreaSeries
测试代码:
1 QLineSeries *series0 = new QLineSeries(); 2 QLineSeries *series1 = new QLineSeries(); 3 *series0 << QPointF(1, 5) << QPointF(3, 7) << QPointF(7, 6) << QPointF(9, 7) << QPointF(12, 6) 4 << QPointF(16, 7) << QPointF(18, 5); 5 *series1 << QPointF(1, 3) << QPointF(3, 4) << QPointF(7, 3) << QPointF(8, 2) << QPointF(12, 3) 6 << QPointF(16, 4) << QPointF(18, 3); 7 8 QAreaSeries *series = new QAreaSeries(series0, series1); 9 series->setName("Batman"); 10 QPen pen(0x059605); 11 pen.setWidth(3); 12 series->setPen(pen); 13 14 QChart *chart = new QChart(); 15 chart->addSeries(series); 16 chart->setTitle("Simple areachart example"); 17 chart->createDefaultAxes(); 18 chart->axisX()->setRange(0, 20); 19 chart->axisY()->setRange(0, 10); 20 21 QChartView *chartView = new QChartView(chart); 22 chartView->setRenderHint(QPainter::Antialiasing); 23 24 this->setCentralWidget(chartView); 25 this->setCentralWidget(chartView); 26 this->resize(400, 300); 27 this->show();
运行测试:
(4)绘制散点图
使用的类: QScatterSeries
测试代码:
1 QScatterSeries *series0 = new QScatterSeries(); 2 series0->setName("scatter1"); 3 series0->setMarkerShape(QScatterSeries::MarkerShapeCircle); 4 series0->setMarkerSize(5.0); 5 6 QScatterSeries *series1 = new QScatterSeries(); 7 series1->setName("scatter2"); 8 series1->setMarkerShape(QScatterSeries::MarkerShapeRectangle); 9 series1->setMarkerSize(10.0); 10 11 QScatterSeries *series2 = new QScatterSeries(); 12 series2->setName("scatter3"); 13 series2->setMarkerShape(QScatterSeries::MarkerShapeRectangle); 14 series2->setMarkerSize(15.0); 15 16 series0->append(0, 6); 17 series0->append(2, 4); 18 series0->append(3, 8); 19 series0->append(7, 4); 20 series0->append(10, 5); 21 *series1 << QPointF(1, 1) << QPointF(3, 3) << QPointF(7, 6) << QPointF(8, 3) << QPointF(10, 2); 22 *series2 << QPointF(1, 5) << QPointF(4, 6) << QPointF(6, 3) << QPointF(9, 5); 23 24 QChart *chart = new QChart(); 25 chart->addSeries(series0); 26 chart->addSeries(series1); 27 chart->addSeries(series2); 28 chart->setTitle("Simple scatterchart example"); 29 chart->createDefaultAxes(); 30 chart->setDropShadowEnabled(false); 31 32 QChartView *chartView = new QChartView(chart); 33 chartView->setRenderHint(QPainter::Antialiasing); 34 35 this->setCentralWidget(chartView); 36 this->resize(400, 300); 37 this->show();
运行测试:
(5)绘制柱状图
使用的类:QBarSeries
测试代码:
1 QBarSet *set0 = new QBarSet("Jane"); 2 QBarSet *set1 = new QBarSet("John"); 3 QBarSet *set2 = new QBarSet("Axel"); 4 QBarSet *set3 = new QBarSet("Mary"); 5 QBarSet *set4 = new QBarSet("Samantha"); 6 7 *set0 << 1 << 2 << 3 << 4 << 5 << 6; 8 *set1 << 5 << 0 << 0 << 4 << 0 << 7; 9 *set2 << 3 << 5 << 8 << 13 << 8 << 5; 10 *set3 << 5 << 6 << 7 << 3 << 4 << 5; 11 *set4 << 9 << 7 << 5 << 3 << 1 << 2; 12 13 QBarSeries *series = new QBarSeries(); 14 series->append(set0); 15 series->append(set1); 16 series->append(set2); 17 series->append(set3); 18 series->append(set4); 19 20 QChart *chart = new QChart(); 21 chart->addSeries(series); 22 chart->setTitle("Simple barchart example"); 23 chart->setAnimationOptions(QChart::SeriesAnimations); 24 25 QStringList categories; 26 categories << "Jan" << "Feb" << "Mar" << "Apr" << "May" << "Jun"; 27 QBarCategoryAxis *axis = new QBarCategoryAxis(); 28 axis->append(categories); 29 chart->createDefaultAxes(); 30 chart->setAxisX(axis, series); 31 32 chart->legend()->setVisible(true); 33 chart->legend()->setAlignment(Qt::AlignBottom); 34 35 QChartView *chartView = new QChartView(chart); 36 chartView->setRenderHint(QPainter::Antialiasing); 37 38 this->setCentralWidget(chartView); 39 this->resize(400, 300); 40 this->show();
运行测试:
(6)绘制饼图
使用的类:QPieSeries
测试代码:
1 QPieSeries *series = new QPieSeries(); 2 series->append("Jane", 1); 3 series->append("Joe", 2); 4 series->append("Andy", 3); 5 series->append("Barbara", 4); 6 series->append("Axel", 5); 7 8 QPieSlice *slice = series->slices().at(1); 9 slice->setExploded(); 10 slice->setLabelVisible(); 11 slice->setPen(QPen(Qt::darkGreen, 2)); 12 slice->setBrush(Qt::green); 13 14 QChart *chart = new QChart(); 15 chart->addSeries(series); 16 chart->setTitle("Simple piechart example"); 17 chart->legend()->hide(); 18 19 QChartView *chartView = new QChartView(chart); 20 chartView->setRenderHint(QPainter::Antialiasing); 21 22 this->setCentralWidget(chartView); 23 this->resize(400, 300); 24 this->show();
运行测试:
完整的测试代码:
1 #include "mainwindow.h" 2 #include "ui_mainwindow.h" 3 #include <QtCharts> 4 #include <QPainter> 5 #include <QPainterPath> 6 #include <QtMath> 7 #include <QImage> 8 9 MainWindow::MainWindow(QWidget *parent) : 10 QMainWindow(parent), 11 ui(new Ui::MainWindow) 12 { 13 ui->setupUi(this); 14 15 #if 0 16 /* 17 * LineChart Example 18 */ 19 //添加一个QLineSeries实例 20 QLineSeries *lineseries = new QLineSeries(); 21 //添加数据(点),有两种方式 22 lineseries->append(0, 6); //参数分别为横纵坐标 23 lineseries->append(2, 4); 24 lineseries->append(3, 8); 25 lineseries->append(7, 4); 26 *lineseries << QPointF(11, 1) << QPointF(13, 3) << QPointF(17, 6) << QPointF(18, 3) << QPointF(20, 2); 27 //添加一个QChart实例,为了展示数据 28 QChart *chart = new QChart(); 29 chart->legend()->hide(); //隐藏图例 30 chart->addSeries(lineseries); 31 chart->createDefaultAxes(); 32 chart->setTitle("Simple line chart example"); 33 //添加一个QChartView图例 34 QChartView *chartView = new QChartView(chart); 35 chartView->setRenderHint(QPainter::Antialiasing); //呈现方式 36 //显示 37 this->setCentralWidget(chartView); 38 this->setCentralWidget(chartView); 39 this->resize(400, 300); 40 this->show(); 41 #endif 42 43 #if 0 44 /* 45 * SplineChart Example 46 */ 47 QSplineSeries *series = new QSplineSeries(); 48 series->setName("spline"); 49 series->append(0, 6); 50 series->append(2, 4); 51 series->append(3, 8); 52 series->append(7, 4); 53 series->append(10, 5); 54 55 QChart *chart = new QChart(); 56 chart->legend()->hide(); 57 chart->addSeries(series); 58 chart->setTitle("Simple spline chart example"); 59 chart->createDefaultAxes(); 60 chart->axisY()->setRange(0, 10); 61 62 QChartView *chartView = new QChartView(chart); 63 chartView->setRenderHint(QPainter::Antialiasing); 64 65 this->setCentralWidget(chartView); 66 this->setCentralWidget(chartView); 67 this->resize(400, 300); 68 this->show(); 69 #endif 70 71 #if 0 72 /* 73 * AreaChart Example 74 */ 75 QLineSeries *series0 = new QLineSeries(); 76 QLineSeries *series1 = new QLineSeries(); 77 *series0 << QPointF(1, 5) << QPointF(3, 7) << QPointF(7, 6) << QPointF(9, 7) << QPointF(12, 6) 78 << QPointF(16, 7) << QPointF(18, 5); 79 *series1 << QPointF(1, 3) << QPointF(3, 4) << QPointF(7, 3) << QPointF(8, 2) << QPointF(12, 3) 80 << QPointF(16, 4) << QPointF(18, 3); 81 82 QAreaSeries *series = new QAreaSeries(series0, series1); 83 series->setName("Batman"); 84 QPen pen(0x059605); 85 pen.setWidth(3); 86 series->setPen(pen); 87 88 QChart *chart = new QChart(); 89 chart->addSeries(series); 90 chart->setTitle("Simple areachart example"); 91 chart->createDefaultAxes(); 92 chart->axisX()->setRange(0, 20); 93 chart->axisY()->setRange(0, 10); 94 95 QChartView *chartView = new QChartView(chart); 96 chartView->setRenderHint(QPainter::Antialiasing); 97 98 this->setCentralWidget(chartView); 99 this->setCentralWidget(chartView); 100 this->resize(400, 300); 101 this->show(); 102 #endif 103 104 #if 0 105 /* 106 * QScatterChart Example 107 */ 108 QScatterSeries *series0 = new QScatterSeries(); 109 series0->setName("scatter1"); 110 series0->setMarkerShape(QScatterSeries::MarkerShapeCircle); 111 series0->setMarkerSize(5.0); 112 113 QScatterSeries *series1 = new QScatterSeries(); 114 series1->setName("scatter2"); 115 series1->setMarkerShape(QScatterSeries::MarkerShapeRectangle); 116 series1->setMarkerSize(10.0); 117 118 QScatterSeries *series2 = new QScatterSeries(); 119 series2->setName("scatter3"); 120 series2->setMarkerShape(QScatterSeries::MarkerShapeRectangle); 121 series2->setMarkerSize(15.0); 122 123 series0->append(0, 6); 124 series0->append(2, 4); 125 series0->append(3, 8); 126 series0->append(7, 4); 127 series0->append(10, 5); 128 *series1 << QPointF(1, 1) << QPointF(3, 3) << QPointF(7, 6) << QPointF(8, 3) << QPointF(10, 2); 129 *series2 << QPointF(1, 5) << QPointF(4, 6) << QPointF(6, 3) << QPointF(9, 5); 130 131 QChart *chart = new QChart(); 132 chart->addSeries(series0); 133 chart->addSeries(series1); 134 chart->addSeries(series2); 135 chart->setTitle("Simple scatterchart example"); 136 chart->createDefaultAxes(); 137 chart->setDropShadowEnabled(false); 138 139 QChartView *chartView = new QChartView(chart); 140 chartView->setRenderHint(QPainter::Antialiasing); 141 142 this->setCentralWidget(chartView); 143 this->resize(400, 300); 144 this->show(); 145 #endif 146 147 #if 0 148 /* 149 * BarChart Example 150 */ 151 QBarSet *set0 = new QBarSet("Jane"); 152 QBarSet *set1 = new QBarSet("John"); 153 QBarSet *set2 = new QBarSet("Axel"); 154 QBarSet *set3 = new QBarSet("Mary"); 155 QBarSet *set4 = new QBarSet("Samantha"); 156 157 *set0 << 1 << 2 << 3 << 4 << 5 << 6; 158 *set1 << 5 << 0 << 0 << 4 << 0 << 7; 159 *set2 << 3 << 5 << 8 << 13 << 8 << 5; 160 *set3 << 5 << 6 << 7 << 3 << 4 << 5; 161 *set4 << 9 << 7 << 5 << 3 << 1 << 2; 162 163 QBarSeries *series = new QBarSeries(); 164 series->append(set0); 165 series->append(set1); 166 series->append(set2); 167 series->append(set3); 168 series->append(set4); 169 170 QChart *chart = new QChart(); 171 chart->addSeries(series); 172 chart->setTitle("Simple barchart example"); 173 chart->setAnimationOptions(QChart::SeriesAnimations); 174 175 QStringList categories; 176 categories << "Jan" << "Feb" << "Mar" << "Apr" << "May" << "Jun"; 177 QBarCategoryAxis *axis = new QBarCategoryAxis(); 178 axis->append(categories); 179 chart->createDefaultAxes(); 180 chart->setAxisX(axis, series); 181 182 chart->legend()->setVisible(true); 183 chart->legend()->setAlignment(Qt::AlignBottom); 184 185 QChartView *chartView = new QChartView(chart); 186 chartView->setRenderHint(QPainter::Antialiasing); 187 188 this->setCentralWidget(chartView); 189 this->resize(400, 300); 190 this->show(); 191 #endif 192 193 #if 0 194 /* 195 * Piechart Example 196 */ 197 QPieSeries *series = new QPieSeries(); 198 series->append("Jane", 1); 199 series->append("Joe", 2); 200 series->append("Andy", 3); 201 series->append("Barbara", 4); 202 series->append("Axel", 5); 203 204 QPieSlice *slice = series->slices().at(1); 205 slice->setExploded(); 206 slice->setLabelVisible(); 207 slice->setPen(QPen(Qt::darkGreen, 2)); 208 slice->setBrush(Qt::green); 209 210 QChart *chart = new QChart(); 211 chart->addSeries(series); 212 chart->setTitle("Simple piechart example"); 213 chart->legend()->hide(); 214 215 QChartView *chartView = new QChartView(chart); 216 chartView->setRenderHint(QPainter::Antialiasing); 217 218 this->setCentralWidget(chartView); 219 this->resize(400, 300); 220 this->show(); 221 #endif 222 } 223 224 MainWindow::~MainWindow() 225 { 226 delete ui; 227 }
还有一些图形及主题等设置,后续待补充。
4 其它
(1)如何在QWidget中绘制QCharts
上面的代码中都是在QMainWindow中绘制的QCharts,但如果我们要在QWidget中绘制QCharts,那么如何实现呢?
方式一:
可选择的解决方法:在ui中拖一个水平布局,把chartView放到水平布局。
测试代码:
1 Widget::Widget(QWidget *parent) : 2 QWidget(parent), 3 ui(new Ui::Widget) 4 { 5 ui->setupUi(this); 6 7 /* 8 * BarChart Example 9 */ 10 QBarSet *set0 = new QBarSet("Jane"); 11 QBarSet *set1 = new QBarSet("John"); 12 QBarSet *set2 = new QBarSet("Axel"); 13 QBarSet *set3 = new QBarSet("Mary"); 14 QBarSet *set4 = new QBarSet("Samantha"); 15 16 *set0 << 1 << 2 << 3 << 4 << 5 << 6; 17 *set1 << 5 << 0 << 0 << 4 << 0 << 7; 18 *set2 << 3 << 5 << 8 << 13 << 8 << 5; 19 *set3 << 5 << 6 << 7 << 3 << 4 << 5; 20 *set4 << 9 << 7 << 5 << 3 << 1 << 2; 21 22 QBarSeries *series = new QBarSeries(); 23 series->append(set0); 24 series->append(set1); 25 series->append(set2); 26 series->append(set3); 27 series->append(set4); 28 29 QChart *chart = new QChart(); 30 chart->addSeries(series); 31 chart->setTitle("Simple barchart example"); 32 chart->setAnimationOptions(QChart::SeriesAnimations); 33 34 QStringList categories; 35 categories << "Jan" << "Feb" << "Mar" << "Apr" << "May" << "Jun"; 36 QBarCategoryAxis *axis = new QBarCategoryAxis(); 37 axis->append(categories); 38 chart->createDefaultAxes(); 39 chart->setAxisX(axis, series); 40 41 chart->legend()->setVisible(true); 42 chart->legend()->setAlignment(Qt::AlignBottom); 43 44 QChartView *chartView = new QChartView(chart); 45 chartView->setRenderHint(QPainter::Antialiasing); 46 47 ui->horizontalLayout->addWidget(chartView); 48 }
运行测试:
这种方式每次是在水平布局中添加一个QWidget,有时候不太好用。
方式二:
将QWidget提升为QChartView。
在代码中直接使用下面的代码就可以显示了:
1 ui->widget_factory->setChart(chart); 2 ui->widget_factory->show();
(2)如何在柱状图中顶端带数字显示
只需要添加下面两句代码:
1 series->setLabelsPosition(QAbstractBarSeries::LabelsInsideEnd); 2 series->setLabelsVisible(true);