QtCharts 绘制折现图

自从Qt的新版本加入了QtCharts之后还没有使用过，今天得空研究了一下，先看看折线图。本文是基于Qt Custom Widget方式使用的QtCharts

• QtCharts的介绍
• x y轴的绘制
• 折线段的绘制
• 样式的设置
• 表头的设置和样式

---

QtCharts

Qt Charts模块提供了一套易于使用的图表组件。它采用了Qt Graphics View框架，因此图表可以很容易地集成到现代的用户界面。 Qt Charts可以被用作QWidgets、QGraphicsWidget、或QML类型。用户可以方便地通过选择图表主题之一来创建令人印象深刻的图表。

使用方式

工程加入Qt Charts方式

1. Qt Creator 工程的话 在pro 中加入QT += charts
2. 然后在使用的时候在文件头 加入
   #include
   using namespace QtCharts;

vs工程的话要先装好环境，我的是vs2015和Qt5.7.在新建工程的时候选择Qt模块的时候要注意选择charts模块

x y轴的绘制

先是新建一个charts类的对象:
QChart *chart = new QChart();
新建x y轴对象:
QCategoryAxis *axisX = new QCategoryAxis();
QCategoryAxis *axisY = new QCategoryAxis();
charts加载x y 轴:
chart->setAxisX(axisX, series);
chart->setAxisY(axisY, series);
x y轴已经建立了,但是没有标注啊 谁都不知道这是什么啊对不，下面咱们加上标注用以说明
可以直接用范围：

axisY->setRange(-1, 1);//y范围axisY->setTitleText("Audio level");//y标题axisX->setLabelFormat("%g");//x格式axisX->setTitleText("Samples");//x标题

可以设置每段的标题:

    axisX->append("low", 10);    axisX->append("optimal", 20);    axisX->append("high", 30);    axisX->setRange(0, 30);    axisY->append("slow", 10);    axisY->append("med", 20);    axisY->append("fast", 30);    axisY->setRange(0, 30); 

折线段的绘制

先new一个线段类QLineSeries 的对象

 QLineSeries *series = new QLineSeries();  *series << QPointF(0, 6) << QPointF(9, 4) << QPointF(15, 20) << QPointF(25, 12) << QPointF(29, 26);

将此对象加载进charts对象中

chart->addSeries(series);

样式的设置

设置折线的样式，设置方式和设置画笔的一样

QPen pen(QRgb(0xff0000));pen.setWidth(5);series->setPen(pen);

设置x y轴得样式：

    QFont labelsFont;    labelsFont.setPixelSize(12);    axisX->setLabelsFont(labelsFont);    axisY->setLabelsFont(labelsFont);    //x y 坐标轴线条得颜色和宽度    QPen axisPen(Qt::blue);    axisPen.setWidth(2);    axisX->setLinePen(axisPen);    axisY->setLinePen(axisPen);    //x y轴得标注得字体得颜色宽度    QBrush axisBrush(Qt::red);    axisX->setLabelsBrush(axisBrush);    axisY->setLabelsBrush(axisBrush);   //设置阴影 和是否显示网格线    axisX->setGridLineVisible(false);    axisY->setGridLineVisible(false);//x y轴得阴影背景  axisY->setShadesPen(Qt::NoPen);    axisY->setShadesBrush(QBrush(QColor(0x99, 0xcc, 0xcc, 0x55)));    axisY->setShadesVisible(true);    axisX->setShadesBrush(QBrush(QColor(0x99, 0xcc, 0xcc, 0x55)));    axisX->setShadesVisible(true);

设置整个窗体得背景为渐变色

    QLinearGradient backgroundGradient;    backgroundGradient.setStart(QPointF(0, 0));    backgroundGradient.setFinalStop(QPointF(0, 1));    backgroundGradient.setColorAt(0.0, QRgb(0xd2d0d1));    backgroundGradient.setColorAt(1.0, QRgb(0x4c4547));    backgroundGradient.setCoordinateMode(QGradient::ObjectBoundingMode);    chart->setBackgroundBrush(backgroundGradient);

设置折线图得背景为渐变色

    QLinearGradient plotAreaGradient;    plotAreaGradient.setStart(QPointF(0, 1));    plotAreaGradient.setFinalStop(QPointF(1, 0));    plotAreaGradient.setColorAt(0.0, QRgb(0x555555));    plotAreaGradient.setColorAt(1.0, QRgb(0x55aa55));    plotAreaGradient.setCoordinateMode(QGradient::ObjectBoundingMode);    chart->setPlotAreaBackgroundBrush(plotAreaGradient);    chart->setPlotAreaBackgroundVisible(true);

表头的设置和样式

    QFont font;    font.setPixelSize(18);    chart->setTitleFont(font);    chart->setTitleBrush(QBrush(Qt::white));    chart->setTitle("Customchart example");

上源码

chatsDemo.h

#include <QMainWindow>class chatsDemo : public QMainWindow{    Q_OBJECTpublic:    chatsDemo(QWidget *parent = 0);    ~chatsDemo();};

chatsDemo.cpp

#include "chatsDemo.h"#include <QtCharts/QChartView>#include <QtCharts/QLineSeries>#include <QtCharts/QCategoryAxis>QT_CHARTS_USE_NAMESPACEchatsDemo::chatsDemo(QWidget *parent)    : QMainWindow(parent){    //![1]    //! 设置直线线段，chart显示得QLineSeries线段        QLineSeries *series = new QLineSeries();        *series << QPointF(0, 6) << QPointF(9, 4) << QPointF(15, 20) << QPointF(25, 12) << QPointF(29, 26);        QChart *chart = new QChart();        chart->legend()->hide();        chart->addSeries(series);    //![1]    //![2]        // Customize series        QPen pen(QRgb(0xff0000));        pen.setWidth(5);        series->setPen(pen);        // Customize chart title        QFont font;        font.setPixelSize(18);        chart->setTitleFont(font);        chart->setTitleBrush(QBrush(Qt::white));        chart->setTitle("Customchart example");        // 设置整个窗体得背景为渐变色        QLinearGradient backgroundGradient;        backgroundGradient.setStart(QPointF(0, 0));        backgroundGradient.setFinalStop(QPointF(0, 1));        backgroundGradient.setColorAt(0.0, QRgb(0xd2d0d1));        backgroundGradient.setColorAt(1.0, QRgb(0x4c4547));        backgroundGradient.setCoordinateMode(QGradient::ObjectBoundingMode);        chart->setBackgroundBrush(backgroundGradient);        // 设置折线图得背景为渐变色        QLinearGradient plotAreaGradient;        plotAreaGradient.setStart(QPointF(0, 1));        plotAreaGradient.setFinalStop(QPointF(1, 0));        plotAreaGradient.setColorAt(0.0, QRgb(0x555555));        plotAreaGradient.setColorAt(1.0, QRgb(0x55aa55));        plotAreaGradient.setCoordinateMode(QGradient::ObjectBoundingMode);        chart->setPlotAreaBackgroundBrush(plotAreaGradient);        chart->setPlotAreaBackgroundVisible(true);    //![2]    //![3]        QCategoryAxis *axisX = new QCategoryAxis();        QCategoryAxis *axisY = new QCategoryAxis();        // Customize axis label font        QFont labelsFont;        labelsFont.setPixelSize(12);        axisX->setLabelsFont(labelsFont);        axisY->setLabelsFont(labelsFont);        // Customize axis colors        QPen axisPen(Qt::blue);        axisPen.setWidth(2);        axisX->setLinePen(axisPen);        axisY->setLinePen(axisPen);        // Customize axis label colors        QBrush axisBrush(Qt::red);        axisX->setLabelsBrush(axisBrush);        axisY->setLabelsBrush(axisBrush);        // Customize grid lines and shades        axisX->setGridLineVisible(false);        axisY->setGridLineVisible(false);        axisY->setShadesPen(Qt::NoPen);        axisY->setShadesBrush(QBrush(QColor(0x99, 0xcc, 0xcc, 0x55)));        axisY->setShadesVisible(true);        axisX->setShadesPen(Qt::NoPen);        axisX->setShadesBrush(QBrush(QColor(0x99, 0xcc, 0xcc, 0x55)));        axisX->setShadesVisible(true);    //![3]    //![4]        axisX->append("low", 10);        axisX->append("optimal", 20);        axisX->append("high", 30);        axisX->setRange(0, 30);        axisY->append("slow", 10);        axisY->append("med", 20);        axisY->append("fast", 30);        axisY->setRange(0, 30);        chart->setAxisX(axisX, series);        chart->setAxisY(axisY, series);    //![4]    //![5]        QChartView *chartView = new QChartView(chart);        chartView->setRenderHint(QPainter::Antialiasing);    //![5]        setCentralWidget(chartView);}chatsDemo::~chatsDemo(){}

main.cpp

#include "chatsDemo.h"#include <QApplication>int main(int argc, char *argv[]){    QApplication a(argc, argv);    chatsDemo w;    w.show();    return a.exec();}

最后得效果图