展示效果： 能够响应式设计，能够灵活展示对比数据
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>html5曲线柱形统计图表代码</title> <?php require_once './config.inc.php'; ini_set("error_reporting","E_ALL & ~E_NOTICE"); //屏蔽掉当前页面警告报错正式上线时候建议添加 读取第一条数据从data数据表中查找title字段/ $m = new Model(); $i = 0; $result = $m->fetchAll('data', 'title', '', ''); // 调用model类中的fetchAll方法，查询数据 foreach ($result as $x) { $i++; $arr[i] .= $x['title'].','; //echo $arr[i].'<br>'; } 读取第二条数据从data2数据表中查找title字段/ $m2 = new Model(); $j = 0; $result = $m2->fetchAll('data2', 'title', '', ''); // 调用model类中的fetchAll方法，查询数据 foreach ($result as $y) { $j++; $arr[j] .= $y['title'].','; //echo $arr[j].'<br>'; } //如果有三条以上的数据需要显示，建议使用循环生成这段代码/// ?> <script type="text/javascript" src="jQuery.js"></script> <script type="text/javascript" src="jqplot.js"></script> <script type="text/javascript"> $(document).ready(function() { var str1 = [<?php echo $arr[i]?>]; //第一个数组里面的数据 var str2 = [<?php echo $arr[j]?>]; //第二个数组里面的数据 var data = [str1,str2]; //这里拼接查询到的两组数据 var length = str1.length>str2.length ? length = str1.length : length = str2.length; //三目表达式length等于最长的数组 var data_max = 30; //Y轴最大刻度 var line_title = ["A","B"]; //曲线名称 var y_label = "这是Y轴"; //Y轴标题 var x_label = "这是X轴"; //X轴标题 //var x = [1,2,3,4,5,6,7,8,9,10]; //定义X轴刻度值 //* var x = []; //初始化x值这里不能用 x = ‘’，否则会被识别为字符串 for (var z = 0; z < length; z++) { x.push(z); //在数组的末尾追加数据 };//*/ //alert(x); var title = "这是标题"; //统计图标标题 j.jqplot.diagram.base("chart1", data, line_title, "这是统计标题", x, x_label, y_label, data_max, 1); j.jqplot.diagram.base("chart2", data, line_title, "这是统计标题", x, x_label, y_label, data_max, 2); }); </script> </head> <body> <!--调用两个表--> <div id="chart1"></div> <div id="chart2"></div> </body> </html>http://pan.baidu.com/s/1bScNh0 完整文件
