highcharts ajax动态数据

js调用方法处
js页面加载绑定click事件
js方法 ajax以及赋值

function tubiao (){
    var chart;//定义图表
    var y = [];//Y轴
    var y1 = [];//Y轴
    var xtext = [];//X轴TEXT 
        $.ajax({
            type:'get',
            url : $.el.Register.AppUrl + "zsgc/selecttubiao",//请求数据的地址
            data:{
                kssj:$('#kssjtubiao').val(),//获取开始时间
                jssj:$('#jssjtubiao').val()//获取结束时间

            },
            success:function(data){
                var y = [];//Y轴
                var y1 = [];//Y轴
                for(var key=0 ; key<data.length;key++){
                    y.push(data[key].paya); //给Y轴赋值 应收多少钱
                    y1.push(data[key].pai);//给Y轴赋值 已收烧钱
                    xtext.push( data[key].htbh);//给X轴TEXT赋值
                }
                chart = new Highcharts.Chart({//柱形图主体配置
                    chart:{
                        renderTo:'container',
                        type:'column' //显示类型 柱形
                    },
                    title:{
                        text:'合同' //图表的标题
                    },
                    xAxis:{
                        categories:xtext//给名字赋值
                    },
                    yAxis:{
                        title:{
                            text:'元' //Y轴的名称
                        },
                    },
                    series:[{
                        name:'应收',
                       data:y //数据库返回值push进y数组内 自动处理进页面
                      },{
                       name:'已收',
                       data:y1 //同上
                    }]
                });


            },
            error:function(e){
            } 
        });

}

页面显示效果
页面显示效果

后台返回值为list集合 如果不是集合需要在Controller处理为集合 另外时间控件使用 Bootstrap-datetimepicker 除了设置结束时间不可小于开始时间 ,基本为默认
Controller注意返回值为list
“表名为 TB_RENTAL 应收字段为 t.payable 已收字段为t.paid 注意字段数据类型 这里使用to_date把传过来的值转换为date数据类型。
使用group by 分组”
BETWEEN AND 中间值 包涵当前值 相当于>= <= 并非 <>

<select id="selecttubiao" resultType="com.elitel.orcl.zsgc.entity.main.ext.ExtTbRental" parameterType="com.elitel.orcl.zsgc.entity.main.ext.ExtTbRental">
        select t.htbh,sum(t.payable) paya,sum(t.paid) pai from TB_RENTAL t where to_date(t.paydate,'yyyy-mm-dd') BETWEEN to_date(#{kssj,jdbcType=VARCHAR},'yyyy-mm-dd') AND to_date(#{jssj,jdbcType=VARCHAR},'yyyy-mm-dd') group by t.htbh having sum(t.payable)- sum(t.paid)> 0 and sum(t.paid)>0 order by t.htbh  
  </select>
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值