qt绘制简单折线图

依然是模仿刘典武大神的作品做的

效果图：

 

学习到现在，很多用法对我来讲都比较熟悉了。

(1)画文字

    painter->save();
    QPen pen;
    pen.setColor(QColor(250,250,250));
    QFont font;
    font.setPixelSize(25);
    font.setBold(true);
    painter->setFont(font);
    painter->setPen(pen);
    painter->drawText(QRect(0,0,width(),space),Qt::AlignCenter,text);
    painter->restore();

(2)画框

    painter->translate(space,space);
    QPointF topLeftPot(0,0);
    qreal w=width()-space*3/2,h=height()-space*3/2;
    QPointF bottomRightPot(w,h);

    painter->setPen(QColor(250,250,250));
    painter->setBrush(Qt::NoBrush);
    //画盒子
    painter->drawRect(QRectF(topLeftPot,bottomRightPot));

(3)画数字

    qreal sp=h/10;
    //画数字
    for(int i=0;i<11;i++)
    {
        int num=100-i*10;
        QRect rect(-space-5,-20+i*sp,space,40);

        painter->drawText(rect,Qt::AlignVCenter|Qt::AlignRight,QString::number(num));
    }

(4)画虚线

    if(showHLine){
        QPen pen(QColor(250,250,250),1,Qt::DotLine);
        painter->setPen(pen);
        for(int i=1;i<10;i++)
        {
            painter->drawLine(QPointF(0,sp*i),QPointF(w,sp*i));
        }
    }

QPen(const QBrush &brush, qreal width, Qt::PenStyle style = Qt::SolidLine, Qt::PenCapStyle cap = Qt::SquareCap, Qt::PenJoinStyle join = Qt::BevelJoin) 

填充效果，宽度，线条样式(线是实线还是虚线还是,,,)，线条端点样式，线条连接样式。

(5)画折线。（这部分稍微有点复杂)

又可分为画点和画多边形

I.画多变形

    painter->translate(space,height()-space/2);

    qreal w=width()-space*3/2;
    qreal sp=w/num;
    QVector<QPointF> points;
    //right_num:最右边的点:(sp*30,listData[right_num])
    int s=sum;
    qreal right_w=w;
    int m=right_num;
    qreal scale=(height()-space*3/2)/100;//高度比例

    points.append(QPointF(right_w,0));//最右边的点
    while(s!=1)
    {
        if(s==2){
            points.append(QPointF(right_w,0));
            qDebug()<<right_w;
            break;
        }
        QPointF p(right_w,-listData[m]*scale);//在listData中的第m+1个数
        points.append(p);
//      qDebug()<<s<<":"<<p;
        s--;
        right_w-=sp;
        if(m>0)m=m-1;
        else m=listData.count()-1;
    }
    //需要在首尾添加点
    QColor color(pointColor.red(),pointColor.green(),pointColor.blue(),150);
    QPen pen;
    pen.setColor(pointColor);
    pen.setWidth(3);
    painter->setPen(pen);
    if(ShowPointBg){
        painter->setBrush(color);
    }
    else{
        painter->setBrush(Qt::NoBrush);
    }
    //绘制图
    painter->drawPolygon(points);

II.画点

    if(showPoint){
        for(int i=0;i<points.count();++i)
        {
            QPointF dataPot=points.at(i);
            painter->setBrush(QBrush(color));
            painter->drawEllipse(dataPot,3,3);
        }
    }

关于点的移动：

只需要使用定时器(QTimer)即可。 

遇到的问题：

1.开始的时候我画出的多边形是这样的

 这是因为我的

QVector<QPointF> points;
最左边和最右边没有添加一个接地的点。 

感悟：

看到他设置了很多变量和函数来控制使程序可以有许多的状态，这是非常非常值得学习的，这样让程序的灵活性变强了许多。可以轻易地改变程序的颜色，是否显示横线，显示坐标点，显示坐标点背景etc。（设置一个变量和对应的函数)