ChartDirector应用笔记（三）

前言

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

 //Y轴数据
  const double data[] = {, , , , , , , , , };
  //X轴标记
  const char* lbs[] = {"", "", "", "", "", "", "", "", "", ""};
  //给图表添加标题，该标题绘制于PlotArea区域以外。指定文本内容的时候，我们还需要指定文本字体，以及字体大小。
  //在windows XP系统的C:\WINDOWS\Fonts下，可以查看系统所带字体库。
  c->addTitle(msg.mainTitle.c_str(), "timesbi.ttf", );
  // 设置PlotArea区域，setPlotArea()函数所带参数较多，在这里我们可以设置PlotArea区域的大小以及在Chart画布中的位置。
  // 前面四个参数设置PlotArea区域在XYChart绘图坐标中的位置及大小，最后的两个参数指定水平、垂直栅格线的颜色。
  // XYChart的linearGradientColor()可以用于设置PlotArea区域的渐变色，前面四个参数指定渐变区域，后面的两个颜色值指定
  // 颜色渐变范围。
  c->setPlotArea(, , , ,
       c->linearGradientColor(, , , , msg.bgColor, 0x000000),
       -,
       0xffffff,
       msg.gridColor,
       msg.gridColor);
  // 添加一个图层BarLayer。在这个图层中，我们使用了IntArray(0, 0)来指定Bars的颜色值。也就是说，我们并没有指定Bar的颜色。
  // 在这种情况下，ChartDirector会自动从默认调色板中依次选择颜色来填充Bars。
  // 在这里我们调用了setBorderColor()来设置soft lighting效果。根据不同的值：Left, Right，光影出现在bars的不同侧。
  c->addBarLayer(DoubleArray(data, (int)(sizeof(data)/sizeof(data[]))),
       IntArray(, ))->setBorderColor(Chart::Transparent, Chart::softLighting(msg.lightDirection));
  // 设置X轴标记
  c->xAxis()->setLabels(StringArray(lbs, (int)(sizeof(lbs)/sizeof(lbs[]))));
  // 设置X轴的标记位移。
  c->xAxis()->setTickOffset(0.5);
  // 设置X, Y轴的标题说明的字体和字体大小
  c->xAxis()->setTitle(msg.xTitle.c_str(), "timesbi.ttf", );
  c->yAxis()->setTitle(msg.yTitle.c_str(), "timesbi.ttf", );
  // 设置X, Y轴轴线的宽度，这里为2个像素宽。
  c->xAxis()->setWidth();
  c->yAxis()->setWidth();

小结

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进行设置。