用highcharts画图。改良版

来源：互联网发布：怎么在淘宝上开通花呗编辑：程序博客网时间：2024/05/18 04:54

可以再一个页面。x轴可变的情况下。画出相应需求的图

$(document).ready(function (){
        var chart;
        var click=0;
            if(click==0){
            var options = {
                chart: {
                    renderTo: 'container',
                    defaultSeriesType: 'spline', //图表类型 line, spline, area, areaspline, column, bar, pie , column，scatter
                    inverted: false //左右显示，默认上下正向。假如设置为true，则横纵坐标调换位置
                },
                xAxis: {
                  categories:[],
                    title: {text: '时间'} //x轴坐标标题 labels:纵柱标尺
                },
                yAxis: {
                    title: {text: '点击量'}, //Y轴坐标标题 labels:纵柱标尺
                    min:0
                },
                tooltip: {
                    formatter: function() {
                        //当鼠标悬置数据点时的格式化提示
                        return '总人数:' + Highcharts.numberFormat(this.y, 1)+'人<br/>当前时间:'+ this.x ;
                    }
                },
                credits: {
                    enabled: false
                },
                plotOptions: {
                    column: {
                        pointPadding: 0.2, //图表柱形的
                        borderWidth: 0      //图表柱形的粗细
                    },bar: {
                        dataLabels: {
                            enabled: false
                        }
                    }
                },
                title: { text: '指定时间点击量统计图'}, //图表主标题
            series:[]
            };
             $.post("/tgSpreadServlet.do",{page:"dayget",sdate:$("#sdate").val(),edate:$("#edate").val(),surl:$("#sUrl").val()},function(data){
              var sd=$("#sdate").val();
               var ed=$("#edate").val();
               //计算相差天数
               var datediff=DateDiff(sd, ed);
               for(var i=0;i<datediff;i++){
                 var s=AddDays(sd,i);
                 options.xAxis.categories.push(s);
               }
              data=eval("("+data+")");
             options.series.push(data);
             chart=new Highcharts.Chart(options);
            });
            }
            $("#btn").click(function(){
            click++;
            chart=null;
            var options = {
                chart: {
                    renderTo: 'container',
                    defaultSeriesType: 'spline', //图表类型 line, spline, area, areaspline, column, bar, pie , column，scatter
                    inverted: false //左右显示，默认上下正向。假如设置为true，则横纵坐标调换位置
                },
                xAxis: {
                  categories:[],
                    title: {text: '时间'} //x轴坐标标题 labels:纵柱标尺
                },
                yAxis: {
                    title: {text: '点击量'}, //Y轴坐标标题 labels:纵柱标尺
                    min:0
                },
                tooltip: {
                    formatter: function() {
                        //当鼠标悬置数据点时的格式化提示
                        return '总人数:' + this.y+'人<br/>当前时间:'+ this.x ;
                    }
                },
                credits: {
                    enabled: false
                },
                plotOptions: {
                    column: {
                        pointPadding: 0.2, //图表柱形的
                        borderWidth: 0      //图表柱形的粗细
                    },bar: {
                        dataLabels: {
                            enabled: false
                        }
                    }
                },
                title: { text: '指定时间点击量统计图'}, //图表主标题
                subtitle:{},
            series:[]
            };
            $.post("/tgSpreadServlet.do",{page:"dayget",sdate:$("#sdate").val(),edate:$("#edate").val(),surl:$("#sUrl").val()},function(data){
              var sd=$("#sdate").val();
               var ed=$("#edate").val();
               //计算相差天数
               var datediff=DateDiff(sd, ed);
               for(var i=0;i<datediff;i++){
                 var s=AddDays(sd,i);
                 options.xAxis.categories.push(s);
               }
              data=eval("("+data+")");
             options.series.push(data);
             chart=new Highcharts.Chart(options);
            });
            });

        });