Qt Charts示例

Qt 5.7 有一些变化，把原来商业版的几个模块用GPLv3协议放到了社区版本里：

• Qt Charts (GPLv3)
• Qt Data Visualization (GPLv3)
• Qt Virtual Keyboard (GPLv3)
• Qt Purchasing (LGPLv3)
• Qt Quick 2D renderer (GPLv3)

这些模块都是非常赞的！

Qt 5.7 的一些消息，具体参看：

• http://blog.qt.io/blog/2016/06/16/qt-5-7-released/
• https://wiki.qt.io/New_Features_in_Qt_5.7

之前在论坛上看好多人在找可以在Qt中使用的图表库，现在好了，官方的有了。还有Qt Quick 2D renderer，支持在没有OpenGL支持的设备上使用Qt Quick，对于一些嵌入式设备来讲，简直是福音。

好久没弄Qt了，发现版本更新好快，我写《Qt Quick核心编程》和《Qt on Android核心编程》时，版本是5.3，现在5.8 alpha都出来了……我已经Out了……

现在偶有时间，赶紧试用了下Qt Charts，简单，好用，没说的啊。

示例效果

先上一个小demo的效果图：

基本用法

Qt Charts作为模块随Qt SDK发布，要使用，首先需要在 pro 文件中加入下面的语句：

QT += charts

然后，在代码中加入下面的语句：

#include <QtCharts>
using namespace QtCharts;

再接下来就可以使用Qt Charts模块的各种类库了。介绍下比较常见的类库：

>> QChart

最主要的类了，用来显示各种 Charts 。它是QGraphicsWidget的派生类，所以，可以放在 QGraphicsView 中来显示。我提供的简单示例，就是把 6 个 QChart 放在同一个 QGraphicsScene 中展示出来。

使用 QChart 分三步：

1. 构造一个实例，比如 new QChart()
2. 调用 addSeries() 添加图表数据，调用 addAxis 、 setAxisX 或 setAxisY 配置坐标轴，以及其他一些设置背景、图例的方法
3. 使用 QChartView 或 QGraphicsScene + QGraphicsView 来显示 QChart

>> QChartView

这是一个方便类，从QGraphicsView继承而来，专门用于显示 QChart ，而且，窗口大小变化时，它会自动缩放 QChart 。

你可以独立使用QChartView，也可以把它嵌在你的其它UI界面中。最简单的用法是：

auto chart = new QChart();
// ...configure chart
QChartView view(lineChart);
view.show();

如果你想使用 QGraphicsView + QGraphicsScene 这种组合，代码类似下面这样：

auto chart = new QChart();
// ...configure chart
QGraphicsScene scene(0, 0, 500, 400);
scene.addItem(chart);
QGraphicsView view(&scene);
view.show();

注意，使用 QGraphicsView 直接显示 QChart 时，QChart的大小不会随着窗口大小变化而自动变化哦，如有需要，可以自己设置。

>>各种Series及配套的set

Qt Charts用 QAbstractSeries来表示各类图表数据，它有各种各样的派生类。

QAbstractBarSeries 又是一个抽象类，定义柱状图数据；从它派生的可以实例化的代表柱状图数据的类有：

• QBarSeries
• QHorizontalBarSeries
• QHorizontalPercentBarSeries
• QHorizontalStackedBarSeries
• QPercentBarSeries
• QStackedBarSeries

我的示例里演示了 QBarSeries 和 QPercentBarSeries 的用法。其它的类，看Qt文档即可快速了解用法。

QAreaSeries 定义区块图数据，就是我们示例效果中左下角那个图表那样的。

QBoxPlotSeries 定义箱线图（金融类软件常用）。

QPieSeries 定义饼图数据。

QXYSeries则是诸如 QLineSeries、QScatterSeries的基类。我的示例演示了 QLineSeries （折线图）的用法。

代码

Show me the code ！

#include <QApplication>
#include <QtCharts>
using namespace QtCharts;

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);

    // use QGraphicsScene + QGraphicsView instead of QChartView
    QGraphicsScene scene(0, 0, 960, 560);
    QGraphicsView view(&scene);
    view.setRenderHint(QPainter::Antialiasing);
    view.setMinimumSize(1000, 600);
    view.setSceneRect(0, 0, 960, 560);

    // Line Chart
    auto lineChart = new QChart();
    lineChart->setTitle("Simple Line Chart");
    lineChart->legend()->setVisible(false);
    auto lines = new QLineSeries();
    lines->append(5, 5);
    lines->append(10, 38);
    lines->append(35, 60);
    lines->append(50, 20);
    lines->append(80, 90);
    lines->append(100, 70);
    lineChart->addSeries(lines);

    lineChart->setGeometry(10, 4, 300, 260); // the method of QGraphicsWidget, move && resize
    lineChart->createDefaultAxes();
    lineChart->setBackgroundVisible(true);
    lineChart->setBackgroundPen(QPen(Qt::lightGray)); // the frame
    lineChart->setBackgroundBrush(QBrush(QColor(240, 240, 240)));
    scene.addItem(lineChart);

    // Bar Charts
    auto barChart = new QChart();
    barChart->setTitle("Simple Bar Charts");
    barChart->setAnimationOptions(QChart::SeriesAnimations);
    auto bars = new QBarSeries();

    //QBarSet, value sets, from 0 ~ N, 0 <--> categories 0
    auto setJan = new QBarSet("Jan");
    setJan->setBrush(QBrush(Qt::darkRed));
    *setJan << 20 << 120 << 60 << 40;
    bars->append(setJan);
    auto setFeb = new QBarSet("Feb");
    setFeb->setBrush(QBrush(Qt::darkBlue));
    bars->append(setFeb);
    setFeb->append(50);
    setFeb->append(160);
    setFeb->append(80);
    setFeb->append(100);
    auto setMar = new QBarSet("Mar");
    bars->append(setMar);
    *setMar << 40 << 140 << 120 << 100;

    barChart->setGeometry(320, 4, 300, 260);
    barChart->setBackgroundPen(QPen(Qt::lightGray)); 
    barChart->setBackgroundBrush(QBrush(QColor(240, 240, 240)));
    barChart->addSeries(bars);

    QStringList categories;
    categories << "Jan" << "Feb" << "Mar" << "Apr";
    auto axisX = new QBarCategoryAxis();
    axisX->append(categories);
    barChart->createDefaultAxes();
    barChart->setAxisX(axisX, bars);

    barChart->legend()->setVisible(true);
    barChart->legend()->setAlignment(Qt::AlignBottom);

    scene.addItem(barChart);

    // Pie Charts
    auto pieChart = new QChart();
    pieChart->setTitle("Simple Pie Charts");
    auto pies = new QPieSeries();
    pies->append("Qt", 60);
    pies->append("MFC", 25);
    pies->append("FLTK", 10);
    auto gtkSlice = new QPieSlice("GTK", 5);
    pies->append(gtkSlice);
    pieChart->addSeries(pies);
    pieChart->setGeometry(630, 4, 300, 260);
    pieChart->setBackgroundPen(QPen(Qt::lightGray)); 
    pieChart->setBackgroundBrush(QBrush(QColor(240, 240, 240)));
    pieChart->legend()->setVisible(true);
    pieChart->legend()->setAlignment(Qt::AlignBottom);

    scene.addItem(pieChart);

    // Area Charts
    auto upperBounds = new QLineSeries();
    *upperBounds << QPointF(20, 20) << QPointF(40, 80) << QPointF(80, 60);
    auto lowerBounds = new QLineSeries();
    *lowerBounds << QPointF(30, 5) << QPointF(45, 30) << QPointF(70, 10);
    auto area = new QAreaSeries(upperBounds, lowerBounds);
    auto areaChart = new QChart();
    areaChart->legend()->setVisible(false);
    areaChart->setTitle("Simple Area Chart");
    areaChart->addSeries(area);
    areaChart->setGeometry(10, 280, 300, 260);
    areaChart->setBackgroundPen(QPen(Qt::lightGray)); 
    areaChart->setBackgroundBrush(QBrush(QColor(240, 240, 240)));
    areaChart->createDefaultAxes();

    scene.addItem(areaChart);

    // BoxPlot Charts
    auto boxplots = new QBoxPlotSeries();
    auto boxset1 = new QBoxSet(5, 20, 60, 80, 120);
    auto boxset2 = new QBoxSet();
    *boxset2 << 20 << 40 << 80 << 100 << 110;
    auto boxset3 = new QBoxSet();
    QList<qreal> vals = {0 ,60 ,76 ,120 ,150};
    boxset3->append(vals);
    boxplots->append(boxset1);
    boxplots->append(boxset2);
    boxplots->append(boxset3);
    auto boxChart = new QChart();
    boxChart->legend()->setVisible(false);
    boxChart->setTitle("Box and Whiskers");
    boxChart->addSeries(boxplots);
    boxChart->setGeometry(320, 280, 300, 260);
    boxChart->setBackgroundPen(QPen(Qt::lightGray)); 
    boxChart->setBackgroundBrush(QBrush(QColor(240, 240, 240)));
    boxChart->createDefaultAxes();
    scene.addItem(boxChart);

    // PercentBar Charts
    auto pbarChart = new QChart();
    pbarChart->setTitle("Percent Bar Charts");
    pbarChart->setAnimationOptions(QChart::SeriesAnimations);
    auto pbars = new QPercentBarSeries();

    //QBarSet, value sets, from 0 ~ N, 0 <--> categories 0
    auto set1 = new QBarSet("Jan");
    set1->setBrush(QBrush(Qt::darkRed));
    *set1 << 20 << 120 << 60 << 40;
    pbars->append(set1);
    auto set2 = new QBarSet("Feb");
    set2->setBrush(QBrush(Qt::darkBlue));
    pbars->append(set2);
    set2->append(50);
    set2->append(160);
    set2->append(80);
    set2->append(100);
    auto set3 = new QBarSet("Mar");
    pbars->append(set3);
    *set3 << 40 << 140 << 120 << 100;

    pbarChart->setGeometry(630, 280, 300, 260);
    pbarChart->setBackgroundPen(QPen(Qt::lightGray)); 
    pbarChart->setBackgroundBrush(QBrush(QColor(240, 240, 240)));
    pbarChart->addSeries(pbars);

    QStringList pcategories;
    pcategories << "Jan" << "Feb" << "Mar" << "Apr";
    auto paxisX = new QBarCategoryAxis();
    paxisX->append(pcategories);
    pbarChart->createDefaultAxes();
    pbarChart->setAxisX(paxisX, pbars);

    pbarChart->legend()->setVisible(true);
    pbarChart->legend()->setAlignment(Qt::AlignBottom);

    scene.addItem(pbarChart);

    view.show();

    return a.exec();
}

代码都放在main()方法里了，看起来有些长……不过演示某一个具体Chart的代码都不长。

一些API的用法，参考Qt帮助，这里不再赘述。