前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >ChartDirector应用笔记(三)

ChartDirector应用笔记(三)

作者头像
24K纯开源
发布2018-01-18 10:01:22
1.3K0
发布2018-01-18 10:01:22
举报
文章被收录于专栏:24K纯开源24K纯开源

前言

继上篇文章(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:\WINDOWS\Fonts下,可以查看系统所带字体库。
 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进行设置。
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2014-01-03 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 前言
  • 效果图
  • 关键代码
  • 小结
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档