highcharts统计的应用

来源：互联网发布：上海华讯网络编辑：程序博客网时间：2024/05/21 06:52

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