jquery 图表插件 gchart

凝望长空

jquery 图表插件 gchart



在程序中用到不同的折线 曲线 饼图等信息的展现，用jquery和jquery的插件 gchart很容易实现的，而gchart插件是封装了google的图表api,所以重要数据或是安全性比较高的时候要慎重选择。

1.         <script src="/js/jquery-1.3.2.min.js" type="text/javascript"></script>

复制代码

Js代码

1. <script type="text/javascript" src="/js/swfobject.js"></script>
   
2. <script type="text/javascript" src="/js/jquery.gchart.js"></script>
   
3. 
   
4. <script type="text/javascript">
   
5. 
   
6. function listline () {
   
7.         //下载量
   
8.         var array1=[5, 3, 12, 33,38, 21, 60, 31, 43, 25, 12, 58];
   
9.         //日期数组
   
10.         var array2=['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'];
    
11.         $('#basicGChart').gchart({
    
12.                 type: 'line',//图表类型
    
13.                 title: '2009年阿一电影下载量折线图', //图表标题
    
14.                 width:300,//图表宽带
    
15.                 height:136,//图表高度
    
16.                 series: [
    
17.                         $.gchart.series(array1,'red')//图表数据
    
18.                 ],
    
19.                 axes: [//图表坐标轴
    
20.                         $.gchart.axis('left', 0, 100,'blue'),
    
21.                         $.gchart.axis('bottom',array2,'008000')
    
22.                 ],
    
23.                 legend: 'top'});
    
24. }
    
25. 
    
26. $(function(){
    
27.         //listline();
    
28.         //list();
    
29.         listcirle();
    
30.        
    
31. });
    
32. </script>
    
33. 
    
34. <h2>一个简单的gchart折线示例</h2>
    
35. <div id="basicGChart">
    
36. 
    
37. <h2>一个简单的gchart雷达图示例</h2>
    
38. <div id="brisChart">
    
39. </div>
    
40. <h2>一个简单的gchart图示例</h2>
    
41. <div id="circle">
    
42. </div>
    

复制代码

function list(){

Js代码

1. 1.    $('#brisChart').gchart({   
   
2. 2.        type: 'line',//基本属性设置 'radar'雷达图 line折线图   
   
3. 3.        width: 340,   
   
4. 4.        height:150,   
   
5. 5.        title: '三个国家的对比',   
   
6. 6.        titleColor: 'green',   
   
7. 7.        backgroundColor: $.gchart.gradient('horizontal', 'ccffff', 'ccffff00'),//背景色渐变   
   
8. 8.        //图例设置   
   
9. 9.    series: [$.gchart.series('Max', [29.1, 28.9, 28.1, 26.3,   
   
10. 10.        23.5, 21.2, 20.6, 21.7, 23.8, 25.6, 27.3, 28.6], 'red'),   
    
11. 11.        $.gchart.series('Min', [20.9, 20.8, 19.5, 16.9,   
    
12. 12.        13.8, 10.9, 9.5, 10.0, 12.5, 15.6, 18.0, 19.8], 'green'),   
    
13. 13.        $.gchart.series('Rainfall', [157.7, 174.6, 138.5, 90.4,   
    
14. 14.        98.8, 71.2, 62.6, 42.7, 34.9, 94.4, 96.5, 126.2], 'blue', 0, 200)],   
    
15. 15.        //坐标设置   
    
16. 16.    axes: [$.gchart.axis('bottom', ['Jan', 'Feb', 'Mar', 'Apr',   
    
17. 17.        'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], 'black'),   
    
18. 18.        $.gchart.axis('left', 0, 40,10,'red'),//左边左边刻度 left 0 到 40 默认间隔为10 可以自己设置   
    
19. 19.        $.gchart.axis('left', ['C'], [50], 'red'),   
    
20. 20.        $.gchart.axis('right', 0, 200, 50, 'blue'),   
    
21. 21.        $.gchart.axis('right', ['mm'], [50], 'blue')],//单位信息 ['mm']刻度 [50] 距下方的百分比 blue颜色   
    
22. 22.    legend: 'top' //图例的位置   
    
23. 23.})   
    
24. 24.  
    
25. 25.}  
    

复制代码