今天搞定了Proposal Tool v2.0的PDF报表生成模块。简单总结一下我所使用的解决方案。

需求

需求是要根据用户选择的历史数据，动态的生成一系列的折线图、饼图、柱状图，然后将这些图表整合到一个PDF文件中。PDF中的文本也是动态的和可修改的。

工具

开发语言使用PHP；图表生成工具使用了强大的pChart库；生成PDF的库选择了dompdf。

pChart将直接生成图片文件，很方便的就可以作多种用途。(pChart和jqPlot的比较，可参考我之前的文章：《图表生成工具pChart和jqPlot》)

dompdf简单易用，可直接将HTML转换成PDF。API十分简洁。不过dompdf有一些限制，它不支持position:relative/absolute, 不支持嵌套表格，不支持float等等(其他限制参考dompdf官方网站)。所以布局比较复杂的页面用它来处理会比较吃力。

解决思路

分3步解决

1. 使用pChart将数据转换成图表，并存储为图片文件，保存在临时存储区中
2. 使用PHP的模板引擎定制HTML，并在其中引用上一步中生成的图片文件
3. 使用dompdf将上一步中的HTML转换为PDF文件，删除临时存储区中的图片文件

效果图

PDF Report Generated by pChart and dompdf

之前开发喜乐喜乐网的后台统计功能的时候，一直在用jqPlot，效果很不错，我挺喜欢的。最近手头的一个项目要求将生成的图表嵌入到PDF中，jqPlot就无能为力了。于是我不得不转而寻找其他的解决方案，这才发现了pChart。感觉只有一个，那就是相见恨晚啊。

下面简单对比一下这两个图表生成工具。

成像风格

先上两个图看看效果

pChart Showcase

jqPlot Showcase

在图像风格上，pChart更加倾向于秀气，线条比较纤细；而jqPlot则显得比较大气，线条结实稳重。pChart内置了边缘防锯齿的功能，阴影、透明等feature一应俱全，成像风格很漂亮，我个人比较偏爱之。

适用场景

当然，图像的风格只是外在的表象，这二者最重要的区别在于，一个是在服务器端渲染图像，另外一个则是在浏览器端。

因此，pChart要占用服务器的CPU资源，当然，也要占用硬盘空间，如果你要把图表通过web页面展示的话，还要占用带宽资源。因此，pChart并不适合于用在仅需通过web页面显示图表的情境下，在这方面，jqPlot要更有优势一些，因为它是完全通过Javascript在浏览器端作图像渲染，不需要占用服务器端的CPU和硬盘，带宽的消耗也偏小，因为仅需传输文本数据而不是图片。

反过来，当你的图片不仅仅是要在浏览器上显示，还要作其他用处，比如我现在面临的情境，需要把图表嵌入到PDF文件中，那么pChart就将是不二之选了。pChart还内置了缓存机制pCache，用以节约CPU资源。一定程度上减少了CPU的消耗。

API易用程度

由于图表中需要控制的元素特别的多，因此API不可避免的会比较复杂一点，总体上来看，由于jqPlot中可以使用json，API上相对会比较简洁一些。而pChart则略逊一筹。

pChart

jqPlot

总结

前些日子发了一个Wordrpess中文包，但没有对如何发安装和配置进行详细的说明。有几个网友给我发信询问关于如何安装的问题，本篇文章详细描述的安装过程，希望对朋友们有帮助。

第一步：下载WordPress中文包。

第二步：把下载得到的zh_CN.mo文件拷贝到wordpress安装目录下的 wp-includes/languages/ 目录中。如果这个目录不存在则创建之。

第三步：修改配置文件 wp-config.php，此文件位于wordpress安装根目录中。将以下这一行：
[php]define (‘WPLANG’, ”);[/php]
改为：
[php]define(‘WPLANG’, ‘zh_CN’);[/php]
注意不要把文件的后缀 .mo 带上。

以上三步过后，你的wordpress就已经中文化了，怎么样？是不是很简单？

如果您在配置的过程中遇到什么问题，可以给我留言或者发信。另外，如果发现本文有错误之处，请及时告诉我，我会及时改正。

在本节课中，我们来研究一下真正重要的问题：你如何让你的博客的内容显示出来？然后，你得添加更多的层来把内容和我们昨天已经调用过的文章标题分隔开来。
（注意：昨天的课程十分十分重要，如果你没有完全理解我昨天叙述的内容，你得再重新看一遍，然后可以向我提问，以便弄清楚它。）

第一步：
在文章标题的代码下面输入：.

保存并刷新你的浏览器，你应该能够看到在标题下面有一些文字。

刚才发生了什么？为什么会这样呢？
你使用PHP函数the_content()调用了文章的内容。现在你的文章内容只是一行文本，一直延伸到屏幕的右边，这是因为你还没有定义它的显示样式。还记得style.css文件吗？在以后的课程中我们将使用它来控制所有东西的显示方式。

昨天我让你们多发几篇文章来看看多篇文章是什么样子，如果你还没有发，那么现在就发吧。发完之后回到首页，多篇文章应该是这个样子的：

继续。。。

回到浏览器，点击查看-原代码。会弹出一个代码窗口。如果你用的是IE，那么弹出的会是一个记事本窗口。

我用的是FireFox，下面是在FireFox中的样子：

注意到页面源代码与你的index.php文件的不同了吗？所有你的图片、文字和其他东西，一切你在源代码中看到的都是由the_content()函数调用的。很有用，不是吗？如果没有博客程序，尤其是WordPress的模板系统，你就得自己编写所有的代码。

还有，注意一下我用圈圈起来的p标签，他们并没有在你的index.php文件中出现，但却出现在你的源代码窗口中。

那么这些P标签是为什么又是怎么加上去的呢？
为什么：在输入你的内容的时候，每个空行代表一个段落，你需要一种方式来把这种段落的划分显示出来。每个段落处于一对P标签中。这样就在段落之间产生了你所看到的空白。
怎样加上去：这很简单，WordPress自动为你生成了P标签。

第二步：
用一个具有class=”entry”的层来包含the_content()，像这样：
[html]

[/html]
这时的代码应该是：

保存并刷新浏览器，如果你查看源代码，你会发现你的每个文章内容条目都被一个class=”entry”的层包围着。

为什么这么做呢？
第一个原因，这样做可以让你把文章标题和文章内容区别开。第二个原因，是为了让你可以订制你的style.css文件。如果你愿意的话，你可以在不改变其他任何东西的情况下修改文章内容的样式。

id与class有什么区别：
到现在为止，你一直使用id来给层命名，还记得id=”header”吧。那么id与class有什么不同呢？id是唯一的，而class不是。如果你看看你的源代码就会发现，只有一个层id=”header”，只有一个层id=”content”,但有多个层class=”entry”。

那么header和content可不可以也用class呢？当然可以。

记住一点，你不能多次使用一个id。比如你不能在一个页面上写入两个id=”header”的层。如果你想反复使用同一个样式，那么就用class。

第三步：
把文章标题和文章内容用一个class=”post”的层包围起来。[html]

[/html]
（你可以给id和class用任何名字，你甚至可以用你喜欢的食物来命名他们，但是post和entry既简短有容易记，不是吗？）
现在的代码是这样：

下面是组织过后的版本：

我使用制表符来产生缩进。为什么要这么做呢？那是因为你的代码不像我的截图，没有红色和绿色的高亮显示，你需要一种方式来跟踪你的代码，使用缩进以后，你就可以很容易的分辨出哪个</div>与哪个<div>相对应。

保存并刷新你的浏览器来查看源代码的改变。

为什么要用另一个层来包围文章标题和文章内容呢？
你添加了class=”entry”层 来区分文章标题和文章内容，而你添加class=”post”的层则是为了把文章与文章区分开来。

这些就是今天的内容了。可能有点难懂，所以如果你不懂得话一定要问我。明天我们讨论一下日期、分类和评论。

如果你在我的教程中发现了错误，请一定尽快告诉我，以便我进行修改。还有，现在我们的进度如何？我是否需要讲的再详细一些呢？这个教程是不是太长了呢？请告诉我。

点击这里来从头阅读WordPress主题编写教程。

主循环，调用了你的博客的内容条目。它是最为重要的PHP代码段。现在你应该已经知道在本节之前应该对我的系列教程做什么了吧，现在开始。先去做那件该做的事，然后我们来总结一下我们现在学过了什么东西。

到现在为止，你已经学到：

原则、结构和WordPress主题的分级制度
你的每一个页面是由什么组成的
如何安装你的主题
如何调用你的博客标题并把它转化成一个链接
如何调用你的博客的描述并把页头与其实内容分隔开来
现在我们开始第五课：
现在你应该已经开启了Xampp Control，打开了主题文件夹，将浏览器定位到 http://localhost/wordpress, 并已经在记事本中打开了index.php文件。该文件中应该有这样的内容：

记住，要想学会，请自己输入代码，而不要拷贝。

第一步：
在页头区域下面添加一个DIV（看不见的盒子）。将其ID设为”content”，像这样：

[html]

[/html]

这个层（DIV）是用来干什么的呢？它是用来把你的内容与接下来的内容（像侧边栏、页脚）分隔开来的。

第二步：

在content层中加入以下代码。按照你看到的原样输入这些代码，如果出现错误，请重新输入。

[php]

[/php]

从现在起，对你来说，每一个代码段是做什么的与它具体是怎么工作的相比，前者更好理解。刚才你输入的就是WordPress中的主循环。在我作进一步解释之前，你的代码应该已经是这样了：

你应该已经注意到，我把内容层中的代码都进行了缩进，而且常常输入空行。这是为了方便组织代码。现在单单手动输入代码已经不够了。你还得组织它们，使得你在一段时间后还知道每样东西在哪，有哪些代码与它相关。对于代码的缩进，最好用制表符而不是空格。

刚才发生了什么？

if(have_posts()) – 检查你是否有post
while(have_posts()) – 如果有post，只要还有，就执行the_post()
the_post() – 调用要显示的post
endwhile – 遵循原则#1，这个是用来关闭while()的
endif – 关闭if()
注意：不是每一个代码段都需要两个部分来开始和结束。有一些可以自关闭，这就解释了 have_posts() 和 the_post(); 函数(前者无分号，后者有分号)。因为the_post(); 在if()和while()的外面，它就需要用它自己的分号来结束它自己。（这里作者所说的“关闭”和“自关闭”应该是XHTML标签中的术语，译者认为并不适用于对PHP代码的解释。）

第三步：

在前面的课程中，你学会了如何用 bloginfo(‘name’) 来调用你的博客的标题。现在，你将学习如何在主循环中调用文章标题。

在the_post();?> 后面、 前面输入：

保存并刷新浏览器。你会发在你的博客的描述后面紧跟的是 Hello World。默认情况下，你的博客只有一篇文章。对于我来说，我的测试博客有多篇文章，所以我这里会显示多个文章标题。由于我的文章标题是相同的，而且在教程的本部分并没有将它们组织起来，它们看起来就像是一长串的 Hello World。

第四步：

把你的文章标题转换成链接。还记得怎么把博客标题转换成链接的吗？这里是一样的。在 两端加上<a href=”#”>和</a>。

保存并刷新。现在你的文章标题是链接形式了，但它们没有链接到任何地方。为了让每一个标题指向它所对应的文章，你需要用 the_permalink() 替换 #。

[php]<a href="”>[/php]

the_permalink() 是一个PHP函数，用来调用每篇文章的地址。保存并刷新浏览器。如果你只有一个 Hello World 标题，把鼠标停在上面，你会发现状态栏中的地址已经不是 http://localhost/wordpress/#了。

如果你有不只一个标题链接，你会发现每一个标题链接到不同的页面。但我们的标题链接还在同一行里。为了把它们分开，在你的链接代码的两端加上

和

。

[php]

<a href="”>

[/php]

还记得我们在博客标题中用到的h1标签吗？那是你的页面的标题。h2用于子标题。现在你的文章标题都是子标题，每一个都占用独立的一行。保存并刷新浏览器以观察改变。

本节课到此结束。你应该已经掌握：

……

注意：如果你还没有掌握上述内容，发几个测试文章来测试一下你的主题。定位到： http://localhost/wordpress/wp-login.php。登陆，点击 Write 标签，请确定你正在看 Write Post标签，写一个post, 然后重复这一动作。你可以像我一样给他们起同一个名字 Hello World，或者你也可以给它们起不同的名字。

原文地址：http://www.wpdesigner.com/2007/02/24/wp-theme-lesson-4b-header-template-continues/

这是本系列的第四节。我本不该再提，但我还是再提最后一下：请确定您已经阅读了本系列之前的几篇文章，否则你可能不明白本节的内容。今天我们快速的结束页头模板的内容，然后介绍一下BOX模型。

第一步：

开启Xampp Control
打开名字为Tutorial的主题文件夹
打开浏览器，定位到 http://localhost/wordpres
打开主题文件夹中的index.php文件
第二步：
现在，在index.php文件中有这样一行：
[php]<a href="”>[/php]

在此行两端添加

和

。这里h1意思是一号标题。共有六级标题：h1, h2, h3, h4, h5, h6。默认情况下，h1是最大的，h6是最小的。

现在你的index.php文件中是这样的：
[php]

<a href="”>

[/php]
保存并在浏览器中刷新以查看效果。

第三步：

调用你的博客的描述信息。在标题链接的代码下面输入：。现在代码成为：
[php]

<a href="”>

[/php]

保存并刷新浏览器，你会看到你的博客的描述信息出现在标题链接的下方。你可以在后台更改你的描述信息。

– 结束PHP代码段

第四步：这一步教你一个新的标签，DIV。

用<div>和</div>包围所有的代码：

[php]

[/php]

保存并刷新浏览器。你应该发现没有发生变化。

DIV可以比做一个看不见的盒子。它把你的博客标题链接和博客描述与其它内容分隔开来。如果你不给它规定样式的话，它就只起到分隔内容的作用。在接下来的课程里，你会学习用style.css文件来定义你的看不见的盒子的样式。你可以给它边界（border）,补白（padding），边距（margin），背景色（background color），背景图片（background image），等等。

第五步：

给DIV标签添加一个id=”header”的属性。像这样：
[html]