实习公司项目需要从数据源读取一张表,然后通过指定一个字符串的形式就能生成表格,于是我苦逼的吭哧吭哧鼓捣了挺久,弄了个初级版本demo出来。
用的是JQplot,直接贴代码:
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<link rel="stylesheet" type="text/css" href="js/jqplot/jquery.jqplot.min.css"/>
<script type="text/javascript" src="js/jqplot/jquery.jqplot.min.js"></script>
<script type="text/javascript" src="js/jqplot/plugins/jqplot.pieRenderer.min.js"></script>
<script type="text/javascript" src="js/jqplot/plugins/jqplot.logAxisRenderer.min.js"></script>
<script type="text/javascript" src="js/jqplot/plugins/jqplot.canvasTextRenderer.min.js"></script>
<script type="text/javascript" src="js/jqplot/plugins/jqplot.categoryAxisRenderer.min.js"></script>
<script type="text/javascript" src="js/jqplot/plugins/jqplot.canvasAxisTickRenderer.min.js"></script>
<script type="text/javascript" src="js/jqplot/plugins/jqplot.pointLabels.min.js"></script>
<script type="text/javascript" src="js/jqplot/plugins/jqplot.dateAxisRenderer.min.js"></script>
<script type="text/javascript" src="js/jqplot/plugins/jqplot.highlighter.min.js"></script>
<script type="text/javascript" src="js/jqplot/plugins/jqplot.enhancedLegendRenderer.min.js"></script>
<script type="text/javascript" src="js/jqplot/plugins/jqplot.barRenderer.min.js"></script>
<script type="text/javascript" src="index.js"></script>
</head>
<script type="application/x-javascript">
var DataText = {};
var listData = new Array();
var pot;
jQuery(function($) {
var aa = {"total":"15","rows":[{"price":31,"name":"li","datee":"2013-05-01","eat":"ps"},{"price":9,"name":"li","datee":"2013-05-02","eat":"st"},{"price":31,"name":"li","datee":"2013-05-03","eat":"ps"},{"price":31,"name":"li","datee":"2013-05-04","eat":"ps"},{"price":9,"name":"li","datee":"2013-05-05","eat":"st"},{"price":16,"name":"wang","datee":"2013-05-01","eat":"hb"},{"price":9,"name":"wang","datee":"2013-05-02","eat":"st"},{"price":31,"name":"wang","datee":"2013-05-03","eat":"ps"},{"price":16,"name":"wang","datee":"2013-05-04","eat":"hb"},{"price":9,"name":"wang","datee":"2013-05-05","eat":"st"},{"price":9,"name":"zhang","datee":"2013-05-01","eat":"st"},{"price":9,"name":"zhang","datee":"2013-05-02","eat":"st"},{"price":9,"name":"zhang","datee":"2013-05-03","eat":"st"},{"price":16,"name":"zhang","datee":"2013-05-04","eat":"hb"},{"price":16,"name":"zhang","datee":"2013-05-05","eat":"hb"}]};
for (var i in aa.rows) {
listData.push([aa.rows[i].name, aa.rows[i].datee, aa.rows[i].eat, aa.rows[i].price]);
}
/*listData
// 0 1 2 3
//[["li", "2013-05-01", "ps", 31],
//["li", "2013-05-02", "st", 9],
//["li", "2013-05-03", "ps", 31],
//["li", "2013-05-04", "ps", 31],
//["