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

前端开发那点事儿

冒犯之处,敬请谅解。

 
 
 

日志

 
 
 
 

JS HTML5 3d图标插件(支持ANDROID等手机)  

2013-03-04 17:46:03|  分类: 默认分类 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
<?php
echo <<<CHART
<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>悟空的簇状图(多列柱状图)</title>

        <script type="text/javascript" src="http://evanwukong.blog.163.com/blog/./ichart-1.0.min.js"></script>
        <script type="text/javascript">
        //定义数据源
        var data = [
            {
                name : '北京'
                ,value : [400,120,55,430]
                ,color: 'gold'
            },{
                name : '湖北'
                ,value : [100,55,36,28]
                ,color: '#c12c44'
            },{
                name : '太原'
                ,value : [200,85,16,10]
                ,color: '#76a871'
            },{
                name : '哈尔滨'
                ,value : [30,185,200,50]
                ,color: '#9f7961'
            }
        ];

        
        $(function(){
            new iChart.ColumnMulti3D({
                render : 'canvasDiv'
                ,data: data
                ,zRotate: 45
                ,animation: true
                ,colwidth: 20
                ,title :{
                    text:'PM2.5'
                    ,fontsize: 40
                }
                ,fit: true
                ,padding: 30
                ,coordinate:{ //设置坐标系
                    scale:[{
                        position:'left'
                        ,scale_space:50
                        ,border:true
                        ,listeners:{
                            parseText:function(t,x,y){
                                return {text:t+" "};
                            }
                        }
                        ,label: {
                            fontsize: 30
                        }
                    }]
                    
                    ,grid_line_width: 2
                    
                    ,height: '85%'
                    ,ignoreOverlap: false
                    ,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: 30
                        ,color: 'white'
                    }
                    ,mini_label: true
                }
                ,zScale:4
                ,bottom_scale:1.1
                ,legend:{
                    enable: true
                    ,align: 'center'
                    ,valign: 'bottom'
                    ,row:1
                    ,column: 'max'
                    ,fontsize: 40
                    ,border: false
                    ,sign_size: 40
                }
                
            }).draw();//调用draw方法进行绘图
        });
    
        </script>
    </head>
    <body>
        <div id="canvasDiv"></div>
    </body>
</html>
CHART;
?>

JS HTML5 3d图标插件 - Diligent - PHP开发那些事儿
 

http://www.ichartjs.com/
另外还有一个HTML5插件
http://www.amcharts.com/
  评论这张
 
阅读(1459)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

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

页脚

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