highcharts统计的应用

js 统计数据的展示
首先要引入

<script src="js/highcharts/highcharts.js"></script>
<script src="js/highcharts/highcharts-3d.js"></script>
<script src="js/highcharts/highcharts-more.js"></script>

这里增加实现统计的代码:
dataValue是要显示的数值。

    //按天统计(x轴月的天数)
    function monthStatistics(dataValue){
        var chart;
        var datatime = $("#createTime").val();
        var year = new Date(datatime).getFullYear();
        var month = new Date(datatime).getMonth()+1;
        //获取选择的当前日
        var checkedDay = new Date(datatime).getDate();
        //获取实时日期
        var currentDay = new Date().getDate();
        //根据年月获取天数
        var days = new Date(year,month,0).getDate();
        var showAllMonth = showMonth(datatime);//是否显示全月的天数
        var showAllDay = showDay(datatime);//当月是否显示到选择框的日期天数
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'spline',
                marginRight: 10
            },
            title: {
                text: year+'-'+month+'当月每天统计量'
            },
            xAxis: {
                //type: 'line'
                title:{
                    text:'单位:天'
                },
                lineWidth:1,
                min:1,
                lineColor:"#C0D0E0",
                allowDecimals:false
            },
            yAxis: {
                title: {
                    text: '单位:次'
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }],
                min:0,
                allowDecimals:false
            },
            tooltip: {
                formatter: function() {
                    return '<b>'+ this.series.name +'</b><br/>'+
                            this.x +':'+ this.y;
                }
            },
            legend: {
                enabled: false
            },
            exporting: {
                enabled: false
            },
            series: [{
                name: 'PV',
                data: (function() {
                    var data = [];
                    var len = dataValue.anchor.length;
                    if(len==0){
                        if(showAllMonth==1){
                            for(var i =days;i>0;i--){
                                data.push({
                                    x: i,
                                    y: 0
                                });
                            }
                        }else if(showAllMonth==2){
                            //选取的月份超出范围了,故不显示数据
                        }else{
                            for(var i =currentDay;i>0;i--){
                                data.push({
                                    x: i,
                                    y: 0
                                });
                            }
                        }
                    }else{
                    var startValue = dataValue.anchor[0];
                    var lastValue = dataValue.anchor[len-1];
                    if(showAllMonth==1){
                        for(var i = days;i>lastValue;i--){
                            data.push({
                                x: i,
                                y: 0
                            });
                        }
                    }else{
                        if(showAllDay==2){
                            for(var i = currentDay;i>lastValue;i--){
                                data.push({
                                    x: i,
                                    y: 0
                                });
                            }
                        }else{
                            for(var i = checkedDay;i>lastValue;i--){
                                data.push({
                                    x: i,
                                    y: 0
                                });
                            }
                        }

                    }
                    for (var i= len-1; i >=0; i--) {
                        data.push({
                            x: dataValue.anchor[i],
                            y: dataValue.value[i]
                        });
                    }
                    for(var i=startValue-1;i>0;i--){
                        data.push({
                            x: i,
                            y: 0
                        });
                    }
                    }
                    return data;
                })()
            }]
        });
    }
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值