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 ''+ this.series.name +'
'+ 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; })() }] }); }

你可能感兴趣的:(html5技术)