前言

继上篇文章(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，配置好工程属性并拷贝相应的库文件到工程目录下。以下以绘图代码为主进行分析：

 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);

小结

1. Chart绘图区域和PlotArea大小要区分清楚：Chart绘图区域是整个画布的大小，所有后续的绘图操作都在这张画布上进行操作，包括XY坐标区域，XY坐标轴标志、名称等数据。Chart区域大小在生成XYChart对象的时候指定；PlotArea对象在前面已经说过了，针对于XYChart才有意义。在XYChart中，PlotArea代表的区域是由X, Y轴形成的矩形区域，不包括X, Y轴的标记、名称以及图表标题。所有的图层(Layer)也是覆盖在PlotArea上面进行操作的。
2. ChartDirector支持的图片文件格式包括png, jpg, jpeg, gif, bmp, SVG等。其中SVG格式需要在生成图表文件之前，调用BaseChart.enableVectorOutput进行设置。