利用QPainter实现漂亮的柱状图。看一下效果
利用渐进色实现三维的效果。
代码如下
1 void qbarpainter::paintEvent( QPaintEvent * )
2 {
3 QPainter painter(this);
4 painter.setRenderHint(QPainter::Antialiasing);
5 painter.setBrush(QColor("black"));
6 painter.drawRect(rect());
7
8 drawBarIndex(0,50,painter,QColor("#7A6864"));
9 drawBarIndex(1,50,painter,QColor("#4D84AF"));
10 drawBarIndex(2,100,painter,QColor("#B8B06C"));
11 drawBarIndex(3,100,painter,QColor("#BD2799"));
12 drawBarIndex(4,100,painter,QColor("#39B708"));
13 drawBarIndex(5,100,painter,QColor("#05AA67"));
14 drawBarIndex(6,100,painter,QColor("#3408AF"));
15 drawBarIndex(7,100,painter,QColor("#980A0A"));
16 drawBarIndex(8,100,painter,QColor("#007CF8"));
17 }
18
19
20 void qbarpainter::drawBarIndex( int index, int valus ,QPainter &painter, QColor color )
21 {
22 int w = width();
23 int h = height()/4;
24 int leftw = 100 + index*100;
25 int step = valus*h*2/100;
26
27 //bottom 椭圆
28 painter.save();
29 QRectF bottomrect(leftw,h*3-10,50,15);
30 QLinearGradient bottomlinear(leftw,h*3-step,50,step);
31 bottomlinear.setColorAt(0, color);
32 bottomlinear.setColorAt(0.3, color.lighter(200));
33 bottomlinear.setColorAt(0.35, color.lighter(180));
34 bottomlinear.setColorAt(0.9, color.darker(200));
35 bottomlinear.setColorAt(1, color);
36 bottomlinear.setStart(leftw,h);
37 bottomlinear.setFinalStop(leftw+50,h);
38 painter.setPen(Qt::NoPen);
39 painter.setBrush(bottomlinear);
40 painter.drawEllipse(bottomrect);
41 painter.restore();
42
43 //背景
44 painter.save();
45 QLinearGradient bgLinearGradient(leftw,h,50,h*2);
46 bgLinearGradient.setColorAt(0, QColor("#A8C0D0"));
47 bgLinearGradient.setColorAt(0.3, QColor("#CFDBE3"));
48 bgLinearGradient.setColorAt(0.35, QColor("#A2BBCC").lighter(120));
49 bgLinearGradient.setColorAt(0.9, QColor("#767775").lighter(120));
50 bgLinearGradient.setColorAt(1, QColor("#A8C0D0"));
51 bgLinearGradient.setStart(leftw,h);
52 bgLinearGradient.setFinalStop(leftw+50,h);
53
54 QRectF bgrect(leftw,h,50,h*2);
55
56 painter.fillRect(bgrect, bgLinearGradient);
57 painter.restore();
58
59 //中间
60 painter.save();
61 QRectF midrect(leftw,h*3-step,50,step);
62
63 QLinearGradient midLinearGradient(leftw,h*3-step,50,step);
64 midLinearGradient.setColorAt(0, color);
65 midLinearGradient.setColorAt(0.3, color.lighter(200));
66 midLinearGradient.setColorAt(0.35, color.lighter(180));
67 midLinearGradient.setColorAt(0.9, color.darker(200));
68 midLinearGradient.setColorAt(1, color);
69 midLinearGradient.setStart(leftw,h);
70 midLinearGradient.setFinalStop(leftw+50,h);
71
72 painter.fillRect(midrect, midLinearGradient);
73 painter.restore();
74
75 ////top 椭圆
76 painter.save();
77 painter.setPen(Qt::NoPen);
78 QLinearGradient fade3(leftw, h-30,50,100);
79 fade3.setColorAt(0, QColor("#A8C0D0"));
80 fade3.setColorAt(0.9, QColor("#CFDBE3"));
81 fade3.setColorAt(0.35, QColor("#A2BBCC").darker(120));
82 fade3.setColorAt(0.3, QColor("#767775").darker(120));
83 fade3.setColorAt(0, QColor("#A8C0D0"));
84 fade3.setStart(leftw,h-30);
85 fade3.setFinalStop(leftw,h+20);
86 painter.setBrush(fade3);
87 QRectF rectangle(leftw, h-9, 50, 16);
88 painter.drawEllipse(rectangle);
89 painter.restore();
90 //////////////////////////////////////////////////////////////////////////
91
92 //mid 椭圆
93 painter.save();
94 QRectF midtoprect(leftw,h*3-step-9,50.5,15);
95
96 QLinearGradient midtoplinear(leftw,h*3-step,50,step);
97 midtoplinear.setColorAt(0, color.darker(100));
98 midtoplinear.setColorAt(0.3, color.darker(100));
99 midtoplinear.setColorAt(0.35, color.darker(100));
100 midtoplinear.setColorAt(0.9, color.darker(100));
101 midtoplinear.setColorAt(1, color.darker(100));
102 midtoplinear.setStart(leftw,h);
103 midtoplinear.setFinalStop(leftw+50,h);
104 painter.setPen(Qt::NoPen);
105 painter.setBrush(midtoplinear);
106 painter.drawEllipse(midtoprect);
107 painter.restore();
108 }