前言
继上篇文章(Simple bar chart)推出之后，本篇文章继续ChartDirector的使用。在这篇Blog中，博主实现的是soft lighting bar。soft lighting bar是在一个XYChart中具备多个Bar的图表，每一个Bar具有柔和光影效果(soft lighting)。在Bar chart大类中，还有glass lighting效果，也是在Bar的光影上面做功夫。这种效果主要是通过在添加图层(BarLayer)时,传递不同的参数实现。用户通过在设置面板进行配置，可以实现输出不同色调和格式的图表。
效果图
（图一） 整体界面
（图二） 设置图表的背景色和栅格颜色
（图三） 选择图表文件保存路径及格式（仅支持bmp,jpg,png,gif格式）
（图四） 保存完成，提示保存路径
（图五）由上述配置生成的图表
关键代码
在Qt中使用ChartDirector，配置好工程属性并拷贝相应的库文件到工程目录下。以下以绘图代码为主进行分析：
代码语言：javascript复制 1 //Y轴数据
2 const double data[] = {450, 560, 630, 800, 1100, 1350, 1600, 1950, 2300, 2700};
3 //X轴标记
4 const char* lbs[] = {"1996", "1997", "1998", "1999", "2000", "2001", "2002", "2003", "2004", "2005"};
5 //给图表添加标题，该标题绘制于PlotArea区域以外。指定文本内容的时候，我们还需要指定文本字体，以及字体大小。
6 //在windows XP系统的C:WINDOWSFonts下，可以查看系统所带字体库。
7 c->addTitle(msg.mainTitle.c_str(), "timesbi.ttf", 18);
8 // 设置PlotArea区域，setPlotArea()函数所带参数较多，在这里我们可以设置PlotArea区域的大小以及在Chart画布中的位置。
9 // 前面四个参数设置PlotArea区域在XYChart绘图坐标中的位置及大小，最后的两个参数指定水平、垂直栅格线的颜色。
10 // XYChart的linearGradientColor()可以用于设置PlotArea区域的渐变色，前面四个参数指定渐变区域，后面的两个颜色值指定
11 // 颜色渐变范围。
12 c->setPlotArea(50, 40, 340, 250,
13 c->linearGradientColor(30, 20, 30, 290, msg.bgColor, 0x000000),
14 -1,
15 0xffffff,
16 msg.gridColor,
17 msg.gridColor);
18 // 添加一个图层BarLayer。在这个图层中，我们使用了IntArray(0, 0)来指定Bars的颜色值。也就是说，我们并没有指定Bar的颜色。
19 // 在这种情况下，ChartDirector会自动从默认调色板中依次选择颜色来填充Bars。
20 // 在这里我们调用了setBorderColor()来设置soft lighting效果。根据不同的值：Left, Right，光影出现在bars的不同侧。
21 c->addBarLayer(DoubleArray(data, (int)(sizeof(data)/sizeof(data[0]))),
22 IntArray(0, 0))->setBorderColor(Chart::Transparent, Chart::softLighting(msg.lightDirection));
23 // 设置X轴标记
24 c->xAxis()->setLabels(StringArray(lbs, (int)(sizeof(lbs)/sizeof(lbs[0]))));
25 // 设置X轴的标记位移。
26 c->xAxis()->setTickOffset(0.5);
27 // 设置X, Y轴的标题说明的字体和字体大小
28 c->xAxis()->setTitle(msg.xTitle.c_str(), "timesbi.ttf", 8);
29 c->yAxis()->setTitle(msg.yTitle.c_str(), "timesbi.ttf", 8);
30 // 设置X, Y轴轴线的宽度，这里为2个像素宽。
31 c->xAxis()->setWidth(2);
32 c->yAxis()->setWidth(2);小结
- Chart绘图区域和PlotArea大小要区分清楚：Chart绘图区域是整个画布的大小，所有后续的绘图操作都在这张画布上进行操作，包括XY坐标区域，XY坐标轴标志、名称等数据。Chart区域大小在生成XYChart对象的时候指定；PlotArea对象在前面已经说过了，针对于XYChart才有意义。在XYChart中，PlotArea代表的区域是由X, Y轴形成的矩形区域，不包括X, Y轴的标记、名称以及图表标题。所有的图层(Layer)也是覆盖在PlotArea上面进行操作的。
- ChartDirector支持的图片文件格式包括png, jpg, jpeg, gif, bmp, SVG等。其中SVG格式需要在生成图表文件之前，调用BaseChart.enableVectorOutput进行设置。
