展示效果：
能夠響應式設計，能夠靈活展示對比數據
<!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>