PHP柱状图、饼状图和线性图(原创)
作者:余超 email:yuchao86@gmail.com
首先我们要介绍一下我们在这篇文章中使用的PHP类Libchart,这是个外国人(非中国国籍的地球人,被称为外国人!)写的免费类!使用起来非 常简单。看出来了吧,我们是要用一个外国人写的PHP创建柱状图,饼状图,和线性图的类,来工作的。如果你要学习这个类的写法,你也可以把这个类下载下来看看外国人的思路! 我们开始吧,首先下载这个类 点击此处:下 载Libchart,解压缩! 第一个用例,我们来创建一个纵向的柱状图:
首先我们包含这个类文件到我们的程序中,并且实例化这个类,程序如下: [php] view plaincopy
- requir_once<span style="color: #009900;">(</span>
- <span style="color: #0000ff;">'./Libchart/classes/libchart.php'</span>
- <span style="color: #009900;">)</span>
- <span style="color: #339933;">;</span>
- <br>
- <span style="color: #000088;">$chart</span>
- <span style="color: #339933;">=</span>
- <span style="color: #000000; font-weight: bold;">new</span>
- VerticalBarChart<span style="color: #009900;">(</span>
- <span style="color: #cc66cc;">500</span>
- <span style="color: #339933;">,</span>
- <span style="color: #cc66cc;">250</span>
- <span style="color: #009900;">)</span>
- <span style="color: #339933;">;</span>
- <span style="color: #666666; font-style: italic;">//参数表示需要创建的图像的宽和高</span>
- <br>
- <br>
- <span style="color: #000088;">$dataSet</span>
- <span style="color: #339933;">=</span>
- <span style="color: #000000; font-weight: bold;">new</span>
- XYDataSet<span style="color: #009900;">(</span>
- <span style="color: #009900;">)</span>
- <span style="color: #339933;">;</span>
- <span style="color: #666666; font-style: italic;">//实例化一个XY轴数据对象</span>
- <br>
- <span style="color: #666666; font-style: italic;">//为这个对象增加四组数据集合,Point对象的第一个参数表示X轴坐标,第二个表示Y轴坐标</span>
- <br>
- <span style="color: #000088;">$dataSet</span>
- <span style="color: #339933;">-></span>
- <span style="color: #004000;">addPoint</span>
- <span style="color: #009900;">(</span>
- <span style="color: #000000; font-weight: bold;">new</span>
- Point<span style="color: #009900;">(</span>
- <span style="color: #0000ff;">"Jan 2005"</span>
- <span style="color: #339933;">,</span>
- <span style="color: #cc66cc;">273</span>
- <span style="color: #009900;">)</span>
- <span style="color: #009900;">)</span>
- <span style="color: #339933;">;</span>
- <br>
- <span style="color: #000088;">$dataSet</span>
- <span style="color: #339933;">-></span>
- <span style="color: #004000;">addPoint</span>
- <span style="color: #009900;">(</span>
- <span style="color: #000000; font-weight: bold;">new</span>
- Point<span style="color: #009900;">(</span>
- <span style="color: #0000ff;">"Feb 2005"</span>
- <span style="color: #339933;">,</span>
- <span style="color: #cc66cc;">321</span>
- <span style="color: #009900;">)</span>
- <span style="color: #009900;">)</span>
- <span style="color: #339933;">;</span>
- <br>
- <span style="color: #000088;">$dataSet</span>
- <span style="color: #339933;">-></span>
- <span style="color: #004000;">addPoint</span>
- <span style="color: #009900;">(</span>
- <span style="color: #000000; font-weight: bold;">new</span>
- Point<span style="color: #009900;">(</span>
- <span style="color: #0000ff;">"March 2005"</span>
- <span style="color: #339933;">,</span>
- <span style="color: #cc66cc;">442</span>
- <span style="color: #009900;">)</span>
- <span style="color: #009900;">)</span>
- <span style="color: #339933;">;</span>
- <br>
- <span style="color: #000088;">$dataSet</span>
- <span style="color: #339933;">-></span>
- <span style="color: #004000;">addPoint</span>
- <span style="color: #009900;">(</span>
- <span style="color: #000000; font-weight: bold;">new</span>
- Point<span style="color: #009900;">(</span>
- <span style="color: #0000ff;">"April 2005"</span>
- <span style="color: #339933;">,</span>
- <span style="color: #cc66cc;">711</span>
- <span style="color: #009900;">)</span>
- <span style="color: #009900;">)</span>
- <span style="color: #339933;">;</span>
- <br>
- <br>
- <span style="color: #666666; font-style: italic;">//把这个数据集合传递给图形对象</span>
- <br>
- <span style="color: #000088;">$chart</span>
- <span style="color: #339933;">-></span>
- <span style="color: #004000;">setDataSet</span>
- <span style="color: #009900;">(</span>
- <span style="color: #000088;">$dataSet</span>
- <span style="color: #009900;">)</span>
- <span style="color: #339933;">;</span>
- <br>
- <span style="color: #666666; font-style: italic;">//设置图形的标题,并把它作为一个png文件渲染</span>
- <br>
- <span style="color: #000088;">$chart</span>
- <span style="color: #339933;">-></span>
- <span style="color: #004000;">setTitle</span>
- <span style="color: #009900;">(</span>
- <span style="color: #0000ff;">"Monthly usage for www.example.com"</span>
- <span style="color: #009900;">)</span>
- <span style="color: #339933;">;</span>
- <br>
- <span style="color: #000088;">$chart</span>
- <span style="color: #339933;">-></span>
- <span style="color: #004000;">render</span>
- <span style="color: #009900;">(</span>
- <span style="color: #0000ff;">"generated/demo1.png"</span>
- <span style="color: #009900;">)</span>
- <span style="color: #339933;">;</span>
- <span style="color: #666666; font-style: italic;">//这里需要一个路径和文件名称</span>
就这么简单一个像下图一样美丽的柱状图就出来了。 PHP柱状图
PHP创建一个饼状图的过程和上边说的柱状图大同小异 ,具体实例代码如下: [php] view plaincopy
- <span style="color: #000088;">$chart</span>
- <span style="color: #339933;">=</span>
- <span style="color: #000000; font-weight: bold;">new</span>
- PieChart<span style="color: #009900;">(</span>
- <span style="color: #cc66cc;">500</span>
- <span style="color: #339933;">,</span>
- <span style="color: #cc66cc;">250</span>
- <span style="color: #009900;">)</span>
- <span style="color: #339933;">;</span>
- <br>
- <br>
- <span style="color: #000088;">$dataSet</span>
- <span style="color: #339933;">=</span>
- <span style="color: #000000; font-weight: bold;">new</span>
- XYDataSet<span style="color: #009900;">(</span>
- <span style="color: #009900;">)</span>
- <span style="color: #339933;">;</span>
- <br>
- <span style="color: #000088;">$dataSet</span>
- <span style="color: #339933;">-></span>
- <span style="color: #004000;">addPoint</span>
- <span style="color: #009900;">(</span>
- <span style="color: #000000; font-weight: bold;">new</span>
- Point<span style="color: #009900;">(</span>
- <span style="color: #0000ff;">"Mozilla Firefox (80)"</span>
- <span style="color: #339933;">,</span>
- <span style="color: #cc66cc;">80</span>
- <span style="color: #009900;">)</span>
- <span style="color: #009900;">)</span>
- <span style="color: #339933;">;</span>
- <br>
- <span style="color: #000088;">$dataSet</span>
- <span style="color: #339933;">-></span>
- <span style="color: #004000;">addPoint</span>
- <span style="color: #009900;">(</span>
- <span style="color: #000000; font-weight: bold;">new</span>
- Point<span style="color: #009900;">(</span>
- <span style="color: #0000ff;">"Konqueror (75)"</span>
- <span style="color: #339933;">,</span>
- <span style="color: #cc66cc;">75</span>
- <span style="color: #009900;">)</span>
- <span style="color: #009900;">)</span>
- <span style="color: #339933;">;</span>
- <br>
- <span style="color: #000088;">$dataSet</span>
- <span style="color: #339933;">-></span>
- <span style="color: #004000;">addPoint</span>
- <span style="color: #009900;">(</span>
- <span style="color: #000000; font-weight: bold;">new</span>
- Point<span style="color: #009900;">(</span>
- <span style="color: #0000ff;">"Other (50)"</span>
- <span style="color: #339933;">,</span>
- <span style="color: #cc66cc;">50</span>
- <span style="color: #009900;">)</span>
- <span style="color: #009900;">)</span>
- <span style="color: #339933;">;</span>
- <br>
- <span style="color: #000088;">$chart</span>
- <span style="color: #339933;">-></span>
- <span style="color: #004000;">setDataSet</span>
- <span style="color: #009900;">(</span>
- <span style="color: #000088;">$dataSet</span>
- <span style="color: #009900;">)</span>
- <span style="color: #339933;">;</span>
- <br>
- <br>
- <span style="color: #000088;">$chart</span>
- <span style="color: #339933;">-></span>
- <span style="color: #004000;">setTitle</span>
- <span style="color: #009900;">(</span>
- <span style="color: #0000ff;">"User agents for www.example.com"</span>
- <span style="color: #009900;">)</span>
- <span style="color: #339933;">;</span>
- <br>
- <span style="color: #000088;">$chart</span>
- <span style="color: #339933;">-></span>
- <span style="color: #004000;">render</span>
- <span style="color: #009900;">(</span>
- <span style="color: #0000ff;">"generated/demo2.png"</span>
- <span style="color: #009900;">)</span>
- <span style="color: #339933;">;</span>
创建饼状图 就一点值得说一下就是Point的参数,第一个参数是占用比例的名称,第二个是数据,并不存在XY坐 标;图如下: 饼状图
创建一个线性图, 这个有点和上边两个不同,就是数据集合的不同。我们也看到了XYDataSet这个数据集合, 另外在这个类中还有一个数据集合XYSeriesDataSet(),这个其实是一个比XYDataSet更大的集合而已,他的元素就是 XYDataSet,看一下例子和这段创建PHP线性图的程序,你一定就明白了: [php] view plaincopy
- <span style="color: #b1b100;">include</span>
- <span style="color: #0000ff;">"../libchart/classes/libchart.php"</span>
- <span style="color: #339933;">;</span>
- <br>
- <br>
- <span style="color: #000088;">$chart</span>
- <span style="color: #339933;">=</span>
- <span style="color: #000000; font-weight: bold;">new</span>
- LineChart<span style="color: #009900;">(</span>
- <span style="color: #cc66cc;">500</span>
- <span style="color: #339933;">,</span>
- <span style="color: #cc66cc;">250</span>
- <span style="color: #009900;">)</span>
- <span style="color: #339933;">;</span>
- <br>
- <br>
- <span style="color: #000088;">$serie1</span>
- <span style="color: #339933;">=</span>
- <span style="color: #000000; font-weight: bold;">new</span>
- XYDataSet<span style="color: #009900;">(</span>
- <span style="color: #009900;">)</span>
- <span style="color: #339933;">;</span>
- <br>
- <span style="color: #000088;">$serie1</span>
- <span style="color: #339933;">-></span>
- <span style="color: #004000;">addPoint</span>
- <span style="color: #009900;">(</span>
- <span style="color: #000000; font-weight: bold;">new</span>
- Point<span style="color: #009900;">(</span>
- <span style="color: #0000ff;">"06-01"</span>
- <span style="color: #339933;">,</span>
- <span style="color: #cc66cc;">273</span>
- <span style="color: #009900;">)</span>
- <span style="color: #009900;">)</span>
- <span style="color: #339933;">;</span>
- <br>
- <span style="color: #000088;">$serie1</span>
- <span style="color: #339933;">-></span>
- <span style="color: #004000;">addPoint</span>
- <span style="color: #009900;">(</span>
- <span style="color: #000000; font-weight: bold;">new</span>
- Point<span style="color: #009900;">(</span>
- <span style="color: #0000ff;">"06-02"</span>
- <span style="color: #339933;">,</span>
- <span style="color: #cc66cc;">421</span>
- <span style="color: #009900;">)</span>
- <span style="color: #009900;">)</span>
- <span style="color: #339933;">;</span>
- <br>
- <span style="color: #000088;">$serie1</span>
- <span style="color: #339933;">-></span>
- <span style="color: #004000;">addPoint</span>
- <span style="color: #009900;">(</span>
- <span style="color: #000000; font-weight: bold;">new</span>
- Point<span style="color: #009900;">(</span>
- <span style="color: #0000ff;">"06-03"</span>
- <span style="color: #339933;">,</span>
- <span style="color: #cc66cc;">642</span>
- <span style="color: #009900;">)</span>
- <span style="color: #009900;">)</span>
- <span style="color: #339933;">;</span>
- <br>
- <span style="color: #000088;">$serie1</span>
- <span style="color: #339933;">-></span>
- <span style="color: #004000;">addPoint</span>
- <span style="color: #009900;">(</span>
- <span style="color: #000000; font-weight: bold;">new</span>
- Point<span style="color: #009900;">(</span>
- <span style="color: #0000ff;">"06-04"</span>
- <span style="color: #339933;">,</span>
- <span style="color: #cc66cc;">799</span>
- <span style="color: #009900;">)</span>
- <span style="color: #009900;">)</span>
- <span style="color: #339933;">;</span>
- <br>
- <span style="color: #000088;">$serie1</span>
- <span style="color: #339933;">-></span>
- <span style="color: #004000;">addPoint</span>
- <span style="color: #009900;">(</span>
- <span style="color: #000000; font-weight: bold;">new</span>
- Point<span style="color: #009900;">(</span>
- <span style="color: #0000ff;">"06-05"</span>
- <span style="color: #339933;">,</span>
- <span style="color: #cc66cc;">1009</span>
- <span style="color: #009900;">)</span>
- <span style="color: #009900;">)</span>
- <span style="color: #339933;">;</span>
- <br>
- <span style="color: #000088;">$serie1</span>
- <span style="color: #339933;">-></span>
- <span style="color: #004000;">addPoint</span>
- <span style="color: #009900;">(</span>
- <span style="color: #000000; font-weight: bold;">new</span>
- Point<span style="color: #009900;">(</span>
- <span style="color: #0000ff;">"06-06"</span>
- <span style="color: #339933;">,</span>
- <span style="color: #cc66cc;">1106</span>
- <span style="color: #009900;">)</span>
- <span style="color: #009900;">)</span>
- <span style="color: #339933;">;</span>
- <br>
- <br>
- <span style="color: #000088;">$serie2</span>
- <span style="color: #339933;">=</span>
- <span style="color: #000000; font-weight: bold;">new</span>
- XYDataSet<span style="color: #009900;">(</span>
- <span style="color: #009900;">)</span>
- <span style="color: #339933;">;</span>
- <br>
- <span style="color: #000088;">$serie2</span>
- <span style="color: #339933;">-></span>
- <span style="color: #004000;">addPoint</span>
- <span style="color: #009900;">(</span>
- <span style="color: #000000; font-weight: bold;">new</span>
- Point<span style="color: #009900;">(</span>
- <span style="color: #0000ff;">"06-01"</span>
- <span style="color: #339933;">,</span>
- <span style="color: #cc66cc;">280</span>
- <span style="color: #009900;">)</span>
- <span style="color: #009900;">)</span>
- <span style="color: #339933;">;</span>
- <br>
- <span style="color: #000088;">$serie2</span>
- <span style="color: #339933;">-></span>
- <span style="color: #004000;">addPoint</span>
- <span style="color: #009900;">(</span>
- <span style="color: #000000; font-weight: bold;">new</span>
- Point<span style="color: #009900;">(</span>
- <span style="color: #0000ff;">"06-02"</span>
- <span style="color: #339933;">,</span>
- <span style="color: #cc66cc;">300</span>
- <span style="color: #009900;">)</span>
- <span style="color: #009900;">)</span>
- <span style="color: #339933;">;</span>
- <br>
- <span style="color: #000088;">$serie2</span>
- <span style="color: #339933;">-></span>
- <span style="color: #004000;">addPoint</span>
- <span style="color: #009900;">(</span>
- <span style="color: #000000; font-weight: bold;">new</span>
- Point<span style="color: #009900;">(</span>
- <span style="color: #0000ff;">"06-03"</span>
- <span style="color: #339933;">,</span>
- <span style="color: #cc66cc;">212</span>
- <span style="color: #009900;">)</span>
- <span style="color: #009900;">)</span>
- <span style="color: #339933;">;</span>
- <br>
- <span style="color: #000088;">$serie2</span>
- <span style="color: #339933;">-></span>
- <span style="color: #004000;">addPoint</span>
- <span style="color: #009900;">(</span>
- <span style="color: #000000; font-weight: bold;">new</span>
- Point<span style="color: #009900;">(</span>
- <span style="color: #0000ff;">"06-04"</span>
- <span style="color: #339933;">,</span>
- <span style="color: #cc66cc;">542</span>
- <span style="color: #009900;">)</span>
- <span style="color: #009900;">)</span>
- <span style="color: #339933;">;</span>
- <br>
- <span style="color: #000088;">$serie2</span>
- <span style="color: #339933;">-></span>
- <span style="color: #004000;">addPoint</span>
- <span style="color: #009900;">(</span>
- <span style="color: #000000; font-weight: bold;">new</span>
- Point<span style="color: #009900;">(</span>
- <span style="color: #0000ff;">"06-05"</span>
- <span style="color: #339933;">,</span>
- <span style="color: #cc66cc;">600</span>
- <span style="color: #009900;">)</span>
- <span style="color: #009900;">)</span>
- <span style="color: #339933;">;</span>
- <br>
- <span style="color: #000088;">$serie2</span>
- <span style="color: #339933;">-></span>
- <span style="color: #004000;">addPoint</span>
- <span style="color: #009900;">(</span>
- <span style="color: #000000; font-weight: bold;">new</span>
- Point<span style="color: #009900;">(</span>
- <span style="color: #0000ff;">"06-06"</span>
- <span style="color: #339933;">,</span>
- <span style="color: #cc66cc;">850</span>
- <span style="color: #009900;">)</span>
- <span style="color: #009900;">)</span>
- <span style="color: #339933;">;</span>
- <br>
- <br>
- <span style="color: #666666; font-style: italic;">//这些和前面的两个看起来没有什么区别,关键在下边这一段,需要自己理解一下啦:</span>
- <br>
- <span style="color: #000088;">$dataSet</span>
- <span style="color: #339933;">=</span>
- <span style="color: #000000; font-weight: bold;">new</span>
- XYSeriesDataSet<span style="color: #009900;">(</span>
- <span style="color: #009900;">)</span>
- <span style="color: #339933;">;</span>
- <br>
- <span style="color: #000088;">$dataSet</span>
- <span style="color: #339933;">-></span>
- <span style="color: #004000;">addSerie</span>
- <span style="color: #009900;">(</span>
- <span style="color: #0000ff;">"Product 1"</span>
- <span style="color: #339933;">,</span>
- <span style="color: #000088;">$serie1</span>
- <span style="color: #009900;">)</span>
- <span style="color: #339933;">;</span>
- <br>
- <span style="color: #000088;">$dataSet</span>
- <span style="color: #339933;">-></span>
- <span style="color: #004000;">addSerie</span>
- <span style="color: #009900;">(</span>
- <span style="color: #0000ff;">"Product 2"</span>
- <span style="color: #339933;">,</span>
- <span style="color: #000088;">$serie2</span>
- <span style="color: #009900;">)</span>
- <span style="color: #339933;">;</span>
- <br>
- <span style="color: #000088;">$chart</span>
- <span style="color: #339933;">-></span>
- <span style="color: #004000;">setDataSet</span>
- <span style="color: #009900;">(</span>
- <span style="color: #000088;">$dataSet</span>
- <span style="color: #009900;">)</span>
- <span style="color: #339933;">;</span>
- <br>
- <span style="color: #000088;">$chart</span>
- <span style="color: #339933;">-></span>
- <span style="color: #004000;">setTitle</span>
- <span style="color: #009900;">(</span>
- <span style="color: #0000ff;">"Sales for 2006"</span>
- <span style="color: #009900;">)</span>
- <span style="color: #339933;">;</span>
- <br>
- <span style="color: #000088;">$chart</span>
- <span style="color: #339933;">-></span>
- <span style="color: #004000;">render</span>
- <span style="color: #009900;">(</span>
- <span style="color: #0000ff;">"generated/demo3.png"</span>
- <span style="color: #009900;">)</span>
- <span style="color: #339933;">;</span>
画出这样一个图来: 线性图
然后,把数据交给图形实例,然后渲染图形,和创建柱状图和线性图是一样的。其实国外还有好多创建柱状图和饼状图的类程序,有的还 相当的NB,例如结合flash的,结合web css的不一而足,这个用起来相对简单一点,大家尽管拿去用好了!
|