Qt Charts入门指南

简述

Qt Charts 的横空出世标识着 QWT、QCustomPlot …… 时代的终结，是时候向他们做一个简单的告别了。Qt Charts - 强大并极具吸引力，从现在开始，让我们顺势拥抱灿烂的明天 。

安装配置

Qt5.7 中已经集成了 Qt Charts 模块，关于 Qt 的安装配置，请参考：

• Qt环境搭建(Visual Studio)
• Qt环境搭建(Qt Creator)
• Qt5.7 + VS2015 环境搭建

安装过程中，新添加的一些模块（例如：Qt Charts）默认不被安装，可以根据需要自行勾选：

注意：由于后期需要使用 Qt Charts，请勾选上此模块，否则无法使用。

基本示例

Qt 为 Qt Charts 提供了一系列示例，这是快速学习和掌握 Qt Charts 的方式之一。

打开 Creator，选择：【欢迎】->【示例】，输入“charts”相关的关键字：

选择其中一个示例运行，效果如下：

效果棒棒哒，美观、简单、直观，而且还支持动画 。。。

入门指南

如果要导入 Qt Charts QML 类型，需要在 .qml 文件中添加下面的导入语句：

import QtCharts 2.0

要在应用程序中使用 Qt Charts C++ 类，使用下面的 include 和 using 语句：

#include <QtCharts>using namespace QtCharts;

这里有更简单的宏定义来代替命名空间的使用：

QT_CHARTS_USE_NAMESPACE

找到定义，可以看到其实是一个道理：

#define QT_CHARTS_NAMESPACE QtCharts#ifdef QT_CHARTS_NAMESPACE#  define QT_CHARTS_BEGIN_NAMESPACE namespace QT_CHARTS_NAMESPACE {#  define QT_CHARTS_END_NAMESPACE }#  define QT_CHARTS_USE_NAMESPACE using namespace QT_CHARTS_NAMESPACE;#else#  define QT_CHARTS_BEGIN_NAMESPACE#  define QT_CHARTS_END_NAMESPACE#  define QT_CHARTS_USE_NAMESPACE#endif

注意：从 Qt Creator 3.0 以后，使用 Qt Quick Application 向导创建的项目，基于 Qt Quick 2 模板，默认使用 QGuiApplication。项目中所有此类 QGuiApplication 实例必须更换为 QApplication，模块依赖于 Graphics View 框架的渲染。

要链接到 Qt Charts 模块，需要在 qmake 项目文件中添加：

QT += charts

基本用法

要构建图表，可以通过以下两种方式：

• QChartView + QChart
  QChartView 作为一个独立的图表窗口，用于显示 QChart，不需要与 QGraphicsScene 一起使用。

• QGraphicsScene + QChart
  在现有的 QGraphicsScene 中显示 QChart（或 QPolarChart）。

QChartView + QChart

这种方式将 QChartView 作为一个独立的窗口，通过构造函数或者调用 setChart() 就可以为设置 QChart 作为显示的图表，这对于一个图表的单独显示来说非常简单。

#include <QApplication>#include <QChartView>#include <QLineSeries>QT_CHARTS_USE_NAMESPACEint main(int argc, char *argv[]){    QApplication a(argc, argv);    // 构建 series，作为图表的数据源，为其添加 6 个坐标点    QLineSeries *series = new QLineSeries();    series->append(0, 5);    series->append(4, 10);    series->append(8, 6);    *series << QPointF(13, 5) << QPointF(17, 6) << QPointF(20, 2);    // 构建图表    QChart *chart = new QChart();    chart->legend()->hide();  // 隐藏图例    chart->addSeries(series);  // 将 series 添加至图表中    chart->createDefaultAxes();  // 基于已添加到图表的 series 来创轴    chart->setTitle("Simple line chart");  // 设置图表的标题     // 构建 QChartView，并设置抗锯齿、标题、大小    QChartView *chartView = new QChartView(chart);    chartView->setRenderHint(QPainter::Antialiasing);    chartView->setWindowTitle("Simple line chart");    chartView->resize(400, 300);    chartView->show();    return a.exec();}

QGraphicsScene + QChart

这种方式不需要使用 QChartView，图表窗口用 QGraphicsView 来代替，在 QGraphicsScene 中显示 QChart（或 QPolarChart）。

#include <QApplication>#include <QChartView>#include <QLineSeries>#include <QPieSeries>QT_CHARTS_USE_NAMESPACEint main(int argc, char *argv[]){    QApplication a(argc, argv);    // 图形视图    QGraphicsScene scene;    QGraphicsView view(&scene);    view.setWindowTitle("Simple chart");    view.setRenderHint(QPainter::Antialiasing);    scene.setBackgroundBrush(QBrush(QColor(240, 240, 240)));    view.setSceneRect(0, 0, 630, 280);    // 折线图    // 构建 series，作为折线图的数据源，为其添加 6 个坐标点    QLineSeries *lineseries = new QLineSeries();    lineseries->append(0, 5);    lineseries->append(4, 10);    lineseries->append(8, 6);    *lineseries << QPointF(13, 5) << QPointF(17, 6) << QPointF(20, 2);    QChart *lineChart = new QChart();    lineChart->legend()->hide();  // 隐藏图例    lineChart->addSeries(lineseries);  // 将 series 添加至图表中    lineChart->createDefaultAxes();  // 基于已添加到图表的 series 来创建轴    lineChart->setTitle("Simple line chart");    lineChart->setGeometry(10, 10, 300, 260);    // 饼图    // 构建 series，作为饼图的数据源，为其添加 4 个切片    QPieSeries *pieSeries = new QPieSeries();    pieSeries->append("Java", 40);    pieSeries->append("C#", 30);    pieSeries->append("JS", 15);    QPieSlice *pieSlice = new QPieSlice("Others", 15);    pieSeries->append(pieSlice);    QChart *pieChart = new QChart();    pieChart->addSeries(pieSeries);  // 将 series 添加至图表中    pieChart->legend()->setAlignment(Qt::AlignRight);  // 设置图例靠右显示    pieChart->setTitle("Simple pie chart");    pieChart->setGeometry(320, 10, 300, 260);    // 将折线图、饼图添加至视图中    scene.addItem(lineChart);    scene.addItem(pieChart);    view.show();    return a.exec();}

基本的使用到这里就结束了，其它的一些图表在后面章节再进行分享。