HTML------8.调用接口 实现动态折现图

Posted on 2017-05-10 19:45  奇思妙想的香菜  阅读(247)  评论(0)  编辑  收藏  举报 
<em><em><em><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="icon" href="http://static.jianshukeji.com/hihhcharts/images/favicon.ico" >
<meta name="viewport" content="width=device-width,initial-cale=1" >
<style>
</style>
<script src="https://img.hcharts.cn/highcharts/highcharts.js">
</script>
<script src="https://img.hcharts.cn/highcharts/modules/exporting.js">
</script>
<script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>

<link href="../Documents/Style/Style.css" rel="stylesheet" type="text/css" />
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript"
    src="http://121.41.47.176/tbmj/js/param.js"></script>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.js"></script>

<title>折线图</title>
</head>

<body>
<div id="container" style="min-width:400px;height:400px"></div>
<script>



$
                .ajax({
                    url : "http://114.55.74.89/dapail/worker/allGetMoney.action",
                    type : "POST",
                    dataType : "json",
                    data : {},
                    success : function(data) {
                        if (true == true) {
                            var dataArray = eval(data.data.dayItems);
                            
                    /*console.log(dataArray);        
                    alert(dataArray[0].orderNum);
                    alert(typeof dataArray[0].orderNum);*/
                            var chart = new Highcharts.Chart('container', {

    title: {
        text: '每日总收益',
        x: -20
    },
    subtitle: {
        text: '数据来源: 唐邦',
        x: -20
    },
    xAxis: {
        categories: [dataArray[0].pay_time, dataArray[1].pay_time, dataArray[2].pay_time, dataArray[3].pay_time, dataArray[4].pay_time ,  dataArray[5].pay_time ,  dataArray[6].pay_time ]
    },
    yAxis: {
        title: {
            text: '金额 (￥)'
        },
        plotLines: [{
            value: 0,
            width: 1,
            color: '#808080'
        }]
    },
    tooltip: {
        valueSuffix: ''
    },
    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle',
        borderWidth: 0
    },
    series: [
    {
        name: '今日收益',
        data: [parseFloat(dataArray[0].todayMoney),parseFloat(dataArray[1].todayMoney),parseFloat(dataArray[2].todayMoney),parseFloat(dataArray[3].todayMoney),parseFloat(dataArray[4].todayMoney),parseFloat(dataArray[5].todayMoney),parseFloat(dataArray[6].todayMoney)]
    }
    , {
        name: '订单数量',
       data: [parseFloat(dataArray[0].orderNum),parseFloat(dataArray[1].orderNum),parseFloat(dataArray[2].orderNum),parseFloat(dataArray[3].orderNum),parseFloat(dataArray[4].orderNum),parseFloat(dataArray[5].orderNum),parseFloat(dataArray[6].orderNum)]
    }
    , {
        name: '开机数',
       data: [parseFloat(dataArray[0].openNum),parseFloat(dataArray[1].openNum),parseFloat(dataArray[2].openNum),parseFloat(dataArray[3].openNum),parseFloat(dataArray[4].openNum),parseFloat(dataArray[5].openNum),parseFloat(dataArray[6].openNum)]
    }
    ]
});
                            

                            //alert("_citySel:"+_citySel);
                            //alert("长度:" + dataArray.length);
                            //for ( var i = 0; i < dataArray.length; i++) { //遍历XML数据并给select元素添加选项

                                //var opt = document.createElement("OPTION"); //创建option对象
                                //opt.text = dataArray[i].NAME + "--"+ dataArray[i].ACCOUNT;
                                //opt.text = 哈哈+"--"+1234;
                                //alert("opt.text:"+opt.text);
                                //指定新创建元素的text属性值
                                //opt.value = dataArray[i].ACCOUNT_ID;
                                //opt.value = 1;
                                //指定新创建元素的value属性值
                                //accountSel.add(opt); //为select元素添加option
                            //}

                        } else {
                            alert(data.msg);
                        }
                    },

                });

function userAct(arr){
    var datainfo = new Array(); 
    var length = arr.length;
    for(var v in arr ){
        datainfo[v] = parseFloat(arr[v]);
    }
    return datainfo;
}



    
</script>
</body>
</html>
</em></em></em>