30
5
最近在做一个三防指挥系统,其中有一部分就是要把水闸的水位数据以图标显示.
25 个在 Web 中嵌入图表的免费资源,筛选了几个图标生成的程序,原本打算用js生成,但试了几个不太满意,最后还是用PHP的pChart来做.先看看效果:
PHP生成的图表有几个优缺点先说说:
1.需要服务器的资源来生成,对于大用户量,生成频繁的最好还是用js/flash等客户端方式生成吧.
2. server必须GD库支持
3. 图片形式显示,可以忽略客户端兼容性问题.
4.缺少辅助功能,例如鼠标悬停显示详细数据等(js和flash都有)
5.pChart图表生成功能强大,定制灵活而简单.(js/flash通常做得比较死,而且配置相当复杂)
好了,说回这个实例.放代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 | $title = $floodgate['name'].'水位图'; include("lib/pData.php");//包含库文件,官方源文件是pData.class和pChart.class include("lib/pChart.php"); //警戒线,填充一个等值数组 $warn = array_fill(0,count($datas['data']),$floodgate['warn']); $DataSet = new pData; $DataSet->AddPoint($datas['data'],"data"); $DataSet->AddPoint($warn,"warn"); //X坐标 $DataSet->AddPoint($datas['date'],"date"); $DataSet->AddSerie("warn"); $DataSet->AddSerie("data"); $DataSet->;SetAbsciseLabelSerie("date"); $DataSet->SetSerieName("水位","data"); $DataSet->;SetSerieName("警戒水位","warn"); // 初始化图形 $Test = new pChart(720,250); $Test->;drawGraphAreaGradient(90,90,90,90,TARGET_BACKGROUND); // 设置图标区域 $Test->setGraphArea(100,40,705,220); $Test->setColorPalette(0,51,51,255); //线1颜色,数值线 $Test->setColorPalette(1,255,0,0);//线2颜色,警戒线 $Test->setFontProperties("lib/fonts/zhunyuan.ttf",10); //自己下载的方正准圆简体 // Draw the SourceForge Rank graph $DataSet->SetYAxisName("水位(m)"); $Test->drawScale($DataSet->GetData(),$DataSet->GetDataDescription(),SCALE_NORMAL,213,217,221,TRUE,0,1,FALSE,4); $Test->drawGraphAreaGradient(40,40,40,-50); $Test->drawGrid(4,TRUE,230,230,230,10); $Test->setShadowProperties(3,3,0,0,0,30,4); //画曲线 $Test->drawCubicCurve($DataSet->GetData(),$DataSet->GetDataDescription()); $Test->clearShadow(); //这个不需要填充和标点,暂时Remov $DataSet->;RemoveSerie("warn"); //填充曲线 $Test->drawFilledCubicCurve($DataSet->GetData(),$DataSet->GetDataDescription(),.1,30); //标点 $Test-.drawPlotGraph($DataSet->GetData(),$DataSet->GetDataDescription(),3,2,255,255,255); //画标示 $Test->drawLegend(0,30,$DataSet->GetDataDescription(),0,0,0,0,0,0,255,255,255,FALSE); //输出标题 $Test->setFontProperties("lib/fonts/zhunyuan.ttf",18); $Test->setShadowProperties(1,1,0,0,0); $Test->drawTitle(0,0,$title,255,255,255,660,30,TRUE); $Test>clearShadow(); //用小字体标出每个点的数值 $Test->setFontProperties("lib/fonts/zhunyuan.ttf",8); $Test->setColorPalette(0,204,204,255); $Test->writeValues($DataSet->GetData(),$DataSet->GetDataDescription(),"data"); $Test->Stroke(); |
上面程序里用到的两个数组如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 | //$floodgate数组 Array ( [id] => 1 [ip] => 19.127.200.30 [name] => 横沥水闸(内河) [type] => 小(一) [river] => 西江 [street] => 外海办事处 [warn] => 3.80 ) //$datas数组 Array ( [date] => Array //时间 ( [0] => 05-28 00:30 [1] => 05-28 01:30 [2] => 05-28 02:30 [3] => 05-28 03:30 [4] => 05-28 04:30 [5] => 05-28 05:30 [6] => 05-28 06:30 [7] => 05-28 07:30 [8] => 05-28 08:30 [9] => 05-28 09:30 [10] => 05-28 10:30 [11] => 05-28 11:30 [12] => 05-28 12:30 [13] => 05-28 13:30 [14] => 05-28 14:30 [15] => 05-28 15:30 [16] => 05-28 16:30 [17] => 05-28 17:30 [18] => 05-28 18:30 [19] => 05-29 03:30 [20] => 05-29 04:30 [21] => 05-29 05:30 [22] => 05-29 06:30 [23] => 05-29 07:30 [24] => 05-29 08:30 [25] => 05-29 09:30 [26] => 05-29 10:30 [27] => 05-29 11:30 [28] => 05-29 12:30 [29] => 05-29 13:30 ) [data] => Array //数据 ( [0] => 3.918 [1] => 3.902 [2] => 4.248 [3] => 4.594 [4] => 4.907 [5] => 4.993 [6] => 4.895 [7] => 4.694 [8] => 4.570 [9] => 4.405 [10] => 4.259 [11] => 4.122 [12] => 3.968 [13] => 3.815 [14] => 3.722 [15] => 3.637 [16] => 3.540 [17] => 3.640 [18] => 3.746 [19] => 4.135 [20] => 4.395 [21] => 4.636 [22] => 4.677 [23] => 4.582 [24] => 4.393 [25] => 4.291 [26] => 4.168 [27] => 3.990 [28] => 3.869 [29] => 3.707 ) ) |
详细说明可以看官方文档和demo:http://pchart.sourceforge.net/documentation.php
另外需要注意的是中文支持
1.如果有中文需要配置一个ttf的中文字体,否则会乱码;
2.数据,php,显示页面编码都设置成统一的编码,否则也会乱码,我统一用UTF8.

当前没有评论!
第一个在本文留言。