今天一个统计模块要做一个报表,我考虑了决定用JQchart来做。js绘图。因为页面不只需要来展示一下,所以fusionChart这种重量级的报表不用了。废话少说先来照片:
这就是JQchart显示出来的,非常漂亮。jqchart是一个jquery的插件。其实非常的简单。下面贴代码:
<!--[if IE]>
<script type="text/javascript" src="./lib/excanvas/excanvas-compressed.js"></script>
<![endif]-->
<script type="text/javascript" src="./lib/jquery-1.2.3.min.js"></script>
<script type="text/javascript" src="./jquery.jqchart.js" charset="utf-8"></script>
<script type="text/javascript" src="./lib/jquery.dimensions.js"></script>
<script type="text/javascript" src="./jquery.gradient-forjqchart.js"></script>
</head><body>
<style>
body {
margin: 20px;
font-family: "Myriad Web","Trebuchet MS","Tahoma","Helvetica","Arial","sans-serif";
}
#myBgBox{
background-color:#3f464c;
padding:30px;
padding-top:5px;
text-align:center;
color:white;
}
#myBgBox h5{
margin :15px;
font-size : 18px;
}
.jQchart{
font-size : 12px;
}
.jQchart-bg{
margin-left : auto ;
margin-right : auto ;
}
.jQchart-labelData{
font-size : 9px;
}
.jQchart-title{
font-size : 12px;
}
</style>
<script type="text/javascript">
var data = [
[200,555,200,300,700,600,789,666,887,336,666,776,123,333,567]
];
</script>
<div id="myBgBox">
<h5>jQchart + use:gradient</h5>
<canvas id="canvasMyID1" width="500" height="220"></canvas>
</div>
<script type="text/javascript">
var chartSetting1={
config:{
title : '<b>type : "line"</b>,setting.config.colorSet : $.jQchart.colorSets.omitted',
labelX : ["11","12","13","14","15","16","17","18","19","20","21","22","23","24","25"],
type : 'line',
bgGradient : {
direction : '',
from : '',
to : ''
},
colorSet : $.jQchart.colorSets.omitted
},
data : data
};
jQuery(function($){
$('#canvasMyID1').jQchart(chartSetting1);
})
</script>
本博客是用来记录开发中的一些小技巧的,一般都是比价容易懂的东西。细节就不多说了