在程序中用到不同的折线 曲线 饼图等信息的展现,用jquery和jquery的插件 gchart很容易实现的,而gchart插件是封装了google的图表api,所以重要数据或是安全性比较高的时候要慎重选择。
<script src="/js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="/js/swfobject.js"></script> <script type="text/javascript" src="/js/jquery.gchart.js"></script> <script type="text/javascript"> function listline () { //下载量 var array1=[5, 3, 12, 33,38, 21, 60, 31, 43, 25, 12, 58]; //日期数组 var array2=['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']; $('#basicGChart').gchart({ type: 'line',//图表类型 title: '2009年阿一电影下载量折线图', //图表标题 width:300,//图表宽带 height:136,//图表高度 series: [ $.gchart.series(array1,'red')//图表数据 ], axes: [//图表坐标轴 $.gchart.axis('left', 0, 100,'blue'), $.gchart.axis('bottom',array2,'008000') ], legend: 'top'}); } $(function(){ //listline(); //list(); listcirle(); }); </script> <h2>一个简单的gchart折线示例</h2> <div id="basicGChart"> <h2>一个简单的gchart雷达图示例</h2> <div id="brisChart"> </div> <h2>一个简单的gchart图示例</h2> <div id="circle"> </div>
function list(){
$('#brisChart').gchart({ type: 'line',//基本属性设置 'radar'雷达图 line折线图 width: 340, height:150, title: '三个国家的对比', titleColor: 'green', backgroundColor: $.gchart.gradient('horizontal', 'ccffff', 'ccffff00'),//背景色渐变 //图例设置 series: [$.gchart.series('Max', [29.1, 28.9, 28.1, 26.3, 23.5, 21.2, 20.6, 21.7, 23.8, 25.6, 27.3, 28.6], 'red'), $.gchart.series('Min', [20.9, 20.8, 19.5, 16.9, 13.8, 10.9, 9.5, 10.0, 12.5, 15.6, 18.0, 19.8], 'green'), $.gchart.series('Rainfall', [157.7, 174.6, 138.5, 90.4, 98.8, 71.2, 62.6, 42.7, 34.9, 94.4, 96.5, 126.2], 'blue', 0, 200)], //坐标设置 axes: [$.gchart.axis('bottom', ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], 'black'), $.gchart.axis('left', 0, 40,10,'red'),//左边左边刻度 left 0 到 40 默认间隔为10 可以自己设置 $.gchart.axis('left', ['C'], [50], 'red'), $.gchart.axis('right', 0, 200, 50, 'blue'), $.gchart.axis('right', ['mm'], [50], 'blue')],//单位信息 ['mm']刻度 [50] 距下方的百分比 blue颜色 legend: 'top' //图例的位置 }) }