sckj
/
iflyket


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图表页面</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <!--include header base-->
    <meta name="author" content="Roobo:F2E">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <!-- Set render engine for 360 browser -->
    <meta name="renderer" content="webkit">
    <!-- Add to homescreen for Chrome on Android -->
    <meta name="mobile-web-app-capable" content="yes">
    <!--<link rel="icon" type="image/png" sizes="192x192"  href="img/favicon/android-icon-192x192.png">-->
    <!-- Add to homescreen for Safari on iOS -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <script src="/js/lib/jquery-1.9.1/jquery.min.js"></script>
    <link href="../css/css.css" rel="stylesheet" type="text/css">

    <script src="../js/config/base_config.js"></script>
    <script src="../js/lib/ichart.1.2.js"></script>

    <script type="text/javascript">
        function getData(obj){
//            return Math.floor(obj*(Math.random()));
//            return Math.round(obj*(Math.random()));
            return Math.round(obj*(Math.random()*100))/100;
        }
    function columnShow(){
        var baseNum=100;
        var data = [
            {name : 'IE',value : getData(baseNum),color:'#a5c2d5'},
            {name : 'Chrome',value : getData(baseNum),color:'#cbab4f'},
            {name : 'Firefox',value : getData(baseNum),color:'#76a871'},
            {name : 'Safari',value : getData(baseNum),color:'#9f7961'},
            {name : 'Opera',value : getData(baseNum),color:'#a56f8f'},
            {name : 'Other',value : getData(baseNum),color:'#6f83a5'}
        ];

        new iChart.Column2D({
            render : 'canvasDiv',//渲染的Dom目标,canvasDiv为Dom的ID
            data: data,//绑定数据
            title : '柱状图测试',//设置标题
//            showpercent:true,//将数据装换成百分比
//            decimalsnum:2,//显示小数点后几位
            width : 800,//设置宽度，默认单位为px
            height : 400,//设置高度，默认单位为px
            coordinate:{//配置自定义坐标轴
                background_color:'#fefefe',
                scale:[{//配置自定义值轴
                    position:'left',//配置左值轴
                    start_scale:0,//设置开始刻度为0
                    end_scale:40,//设置结束刻度为26
                    scale_space:8,//设置刻度间距
                    listeners:{//配置事件
                        parseText:function(t,x,y){
                            return {text:t+" cm"}
                        }
                    }
                }]
            }
        }).draw();//调用绘图方法开始绘图
    }

        function lineShow(){
            var baseNum=20;
            var data = [
                {
                    name : '北京',
                    value:[getData(baseNum),getData(baseNum),getData(baseNum),getData(baseNum),getData(baseNum),getData(baseNum),getData(baseNum),getData(baseNum),getData(baseNum),getData(baseNum),getData(baseNum),getData(baseNum)],
                    color:'#1f7e92',
                    line_width:3
                },
                {
                    name : '长春',
                    value:[getData(baseNum),getData(baseNum),getData(baseNum),getData(baseNum),getData(baseNum),getData(baseNum),getData(baseNum),getData(baseNum),getData(baseNum),getData(baseNum),getData(baseNum),getData(baseNum)],
                    color:'#f68f70',
                    line_width:3
                }
            ];
            var labels=["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"];
            new iChart.LineBasic2D({
                render : 'canvasDiv',
                data: data,
                title : '2012年平均温度情况',
                width : 800,
                height : 400,
                coordinate:{height:'90%',background_color:'#f6f9fa'},
                sub_option:{
                    hollow_inside:false,//设置一个点的亮色在外环的效果
                    point_size:16
                },
                crosshair:{
                    enable:true,
                    line_color:'#62bce9'//十字线的颜色
                },
                labels:labels
            }).draw();

        }
        function pieShow(){
            var data = [
                {name : 'IE',value : 35.75,color:'#9d4a4a'},
                {name : 'Chrome',value : 29.84,color:'#5d7f97'},
                {name : 'Firefox',value : 24.88,color:'#97b3bc'},
                {name : 'Safari',value : 6.77,color:'#a5aaaa'},
                {name : 'Opera',value : 2.02,color:'#778088'},
                {name : 'Other',value : 0.73,color:'#6f83a5'}
            ];
            new iChart.Pie2D({
                render : 'canvasDiv',
                data: data,
                title : 'Top 5 Browsers from 1 to 29 Feb 2012',
                legend : {
                    enable : true
                },
                showpercent:true,
                decimalsnum:2,
                width : 800,
                height : 400,
                radius:140
            }).draw();

        }
    </script>
</head>
<body  >
<a href="#" onclick="columnShow();">柱状图</a>
<a href="#" onclick="lineShow();">折现图</a>
<a href="#" onclick="pieShow();">饼状图</a>

<div id="canvasDiv"></div>
</body>

</html>