M 表单图形化展示

来源：互联网发布：java面向对象设计原则编辑：程序博客网时间：2024/06/06 03:36
展示效果：
这里写图片描述
能够响应式设计，能够灵活展示对比数据
<!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><?phprequire_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 完整文件
0 0