注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

前端开发那点事儿

冒犯之处,敬请谅解。

 
 
 

日志

 
 
 
 

ICHARTJS 示例  

2013-04-01 18:05:24|  分类: 默认分类 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
ICHARTJS 示例 - Diligent - PHP开发那些事儿
 

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Example</title>
        <script type="text/javascript" src="http://evanwukong.blog.163.com/./ichart.1.1.js"></script>
        <script type="text/javascript">

        <!--var remoteData = window.BaobiaoContentActivity.getJsonData();-->
        var remoteData = '{"taiywg":    "5473,2495,1747,91.400000",'
            + '"datwg":    "2776,1256,997,92.090000",'
            + '"CHANGZHWG":    "3085,1397,1156,92.010000",'
            + '"YUNCHWG":    "7389,3298,2794,93.350000",'
            + '"JinZhWG":    "3232,1605,1128,83.900000",'  
            + '"LINFWG":    "3879,1815,1372,89.050000",'
            + '"XinZhWG":    "2931,1421,1067,85.940000",'
            + '"LvLWG":    "3559,1645,1329,90.150000",'
            + '"JINCHWG":    "3741,1620,1463,96.220000",'
            + '"ShuoZWG":    "2165,1001,819,90.120000",'
            + '"HEJWG":    "40208,18182,14723,92.140000",'
            + '"date":    "2013/03/27"}';
        eval('var remoteDataObj = ' + remoteData);

        var action = remoteDataObj.action;

        eval('var valueObjA = [' + remoteDataObj.taiywg + '];');
        eval('var valueObjB = [' + remoteDataObj.datwg + '];');
        eval('var valueObjC = [' + remoteDataObj.CHANGZHWG + '];');
        eval('var valueObjD = [' + remoteDataObj.YUNCHWG + '];');
        eval('var valueObjE = [' + remoteDataObj.JinZhWG + '];');
        eval('var valueObjF = [' + remoteDataObj.LINFWG + '];');
        eval('var valueObjG = [' + remoteDataObj.XinZhWG + '];');
        eval('var valueObjH = [' + remoteDataObj.LvLWG + '];');
        eval('var valueObjI = [' + remoteDataObj.JINCHWG + '];');
        eval('var valueObjJ = [' + remoteDataObj.ShuoZWG + '];');
        eval('var valueObjK = [' + remoteDataObj.HEJWG + '];');

        var orderArr = ['太原','大同','长治','运城','晋州','临汾','忻州','吕梁','晋城','朔州','阳泉'];
        
        var data = [{
            'name': '日网供电量'
            ,'color': 'orange'
            ,'value': [valueObjA[0],valueObjB[0],valueObjC[0],valueObjD[0],valueObjE[0]
                ,valueObjF[0],valueObjF[0],valueObjG[0],valueObjH[0],valueObjI[0],valueObjJ[0]
            ]
        },{
            'name': '高峰最大'
            ,'color': 'green'
            ,'value': [valueObjA[1],valueObjB[1],valueObjC[1],valueObjD[1],valueObjE[1]
                ,valueObjF[1],valueObjF[1],valueObjG[1],valueObjH[1],valueObjI[1],valueObjJ[1]
            ]
        },{
            'name': '低谷最小'
            ,'color': 'gold'
            ,'value': [valueObjA[2],valueObjB[2],valueObjC[2],valueObjD[2],valueObjE[2]
                ,valueObjF[2],valueObjF[2],valueObjG[2],valueObjH[2],valueObjI[2],valueObjJ[2]
            ]
        },{
            'name': '高峰负荷率'
            ,'color': 'red'
            ,'value': [valueObjA[3],valueObjB[3],valueObjC[3],valueObjD[3],valueObjE[3]
                ,valueObjF[3],valueObjF[3],valueObjG[3],valueObjH[3],valueObjI[3],valueObjJ[3]
            ]
        }];

        
        $(function(){
            var chart = new iChart.ColumnMulti3D({
                render : 'canvasDiv'
                ,data: data
                ,zRotate: 45
                ,animation: true
                ,labels: orderArr
                ,title :{
                    text: '网供用电量信息 (' + remoteDataObj.date + ')'
                    ,fontsize: 14
                    ,offsetx: 8
                }
                ,subtitle: {
                    text: '电量:万千万时,负荷:千千瓦'
                    ,fontsize: 10
                    ,offsetx: 8
                    ,offsety: -4
                }
                ,padding: 0
                ,turn_off_touchmove: true
                ,default_mouseover_css: false
                ,fit: true
                ,border: false
                ,coordinate:{
                    scale:[{
                        position:'left'
                        ,border:true
                        ,label: {
                            rotate: -60
                            ,offsety: -4
                        }
                        ,listeners:{
                            parseText:function(t,x,y){
                                return {text:t+" "};
                            }
                        }
                    }]
                    ,grid_line_width: 1
                    ,offsetx: 10
                    ,offsety: -8
                    ,wall_style: [
                        {color: '#333'}
                        ,{color: '#333'}
                        ,{color: '#333'}
                        ,{color: 'white'}
                        ,{color: 'grey'}
                        ,{color: 'grey'}
                    ]
                    ,pedestal_height: 0
                    ,board_deep: 2
                    ,gradient: false
                 }
                 ,sub_option: {
                    label: {
                        fontsize: 10
                        ,color: 'white'
                        ,textAlign: 'end'
                        ,textBaseline: 'alphabetic'
                        ,forceOffsetx: 8
                        ,forceOffsety: -6
                    }
                }
                ,zScale:3
                ,bottom_scale:1.1
                ,legend:{
                    enable: true
                    ,align: 'center'
                    ,valign: 'top'
                    ,row:1
                    ,column: 'max'
                    ,fontsize: 10
                    ,border: false
                    ,sign_size: 10
                    ,offsetx: 4
                    ,offsety: -10
                    ,background_color: null
                }
                ,tip: {
                    enable: true
                    ,style: 'padding: 3px 2px 2px 2px;background: white;fontSize: 10px;borderWidth: 0;borderRadius: 0;'
                }
                
            });
            chart.draw();//调用draw方法进行绘图
            
        });
        </script>
    </head>
    <body>
        <div id="canvasDiv"></div>
    </body>
</html>

ICHARTJS 示例 - Diligent - PHP开发那些事儿
  评论这张
 
阅读(2266)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017