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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏韩东吉的Unity杂货铺

零基础入门 13: UGUI Text

前几篇介绍了UGUI里的Image,今天来说下UGUI 的Text,显示文本的组件。因为有了之前代码创建Image的铺垫,所以对Text的使用就都在这篇介绍了。

1472
来自专栏Thinks

【译】W3C WAI-ARIA最佳实践 -- 控件

手风琴是个垂直罗列的元素组合,例如标签或缩略图,这允许用户切换内容模块的展示。每个标签元素可以被用来展开折叠、暴露隐藏其相关内容。手风琴一般被用来减少页面滚动,...

2913
来自专栏前端之心

你真的了解回流和重绘吗

最近有空对其进行了一些研究,看了一些博客和书籍,整理了一些内容并且结合一些例子,写了这篇文章,希望可以帮助到大家。

8875
来自专栏王磊的博客

vscode使用汇总——常用插件、常用配置、常用快捷键

一、代码提示快捷键设置:(keybindings.json) [ { "key": "ctrl+j", "command...

5027
来自专栏大数据钻研

HTML基础

HTML基础 ---- HTML基本知识与结构 HTML常见标签 标签写法与嵌套的讨论 HTML、CSS、javascript三者的关系 HTML是网页内容...

1K3
来自专栏一“技”之长

Bootstrap响应式前端框架笔记十八——导航滚动监听

    Bootstrap框架中提供了十分方便的方法来使用导航关联内容快,并且开发者可以监听滚动进行导航按钮的切换,示例如下:

1091
来自专栏WindCoder

photoshop技巧之 在排版文字时常会用到的快捷键技巧

这两天兴致来了,又开始了PS学习之旅,看到教程中的思考,不由去网上搜索了一番,暂且记录在这里。

1290
来自专栏极乐技术社区

微信小程序开发详解《五》布局基础

1:Flex布局 Flex布局如图所示 image.png 1.1 Flex容器属性 image.png 1.2 Flex容器内元素属性 image...

6195
来自专栏木头编程 - moTzxx

PHP 开发学习[3] —— 文字水印,缩略图,图片水印实现类

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u011415782/article/de...

1793
来自专栏互联网杂技

40个重要的HTML 5面试问题及答案

目录 介绍 SGML、HTML、XML和XHTML之间的关系? 什么是HTML 5? 如果我不输入<!DOCTYPE HTML>,HTML 5能工作吗? 哪些浏...

60413

扫码关注云+社区

领取腾讯云代金券