Highchartsjs前后台交互的简单案例

首先需要导入

<script type="text/javascript" src="../../js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="../../theme/assets/global/plugins/highcharts/js/highcharts.js"></script>



前台jsp

<div id="cust_line" style="height:315px;float:left;"></div>

js

function custNumTrend(){
var nowdata = [];
var olddata = [];
var color = ["gray","pink","red","blue","yellow","green","#fff"];
   $.ajax({
       type:'get',
       url:'${pageContext.request.contextPath}/tax/queryCustNumTrend',//请求数据的地址
       success:function(data){
        console.log(data);
           var json = data;
           for(var key in json.nowlist){
          nowdata.push(json.nowlist[key].custTotalNum);
           }
           for(var oldkey in json.oldlist){
           olddata.push(json.oldlist[oldkey].custTotalNum);
           }
           console.log(nowdata);
           cust_lineChart.series[0].setData(nowdata);//数据填充到highcharts上面
           cust_lineChart.series[1].setData(olddata);//数据填充到highcharts上面
       },
       error:function(e){
       } 
   });
   var cust_lineChart = new Highcharts.Chart({
       chart:{
           renderTo:'cust_line',
           type:'line' //显示类型 
       },
       title:{
           text:'客户增长趋势', //图表的标题
           align:'left'
       },
       credits: {  
           enabled: false     //去掉highcharts网站url  
       },
       xAxis:{
           categories:['一月', '二月', '三月', '四月', '五月', '六月','七月', '八月', '九月', '十月', '十一月', '十二月']
       },
       yAxis:{
           title:{
               text:'客户(数量)' //Y轴的名称
           },
           min: 0,
           tickInterval: 2    //设置Y轴坐标值的间隔固定为100
       },
       legend: {
data:['今年','去年'],
verticalAlign: 'top'
},
       //,tickPositions: [0, 10, 20, 30,40,50,60] // 指定竖轴坐标点的值
       tooltip: {
           enabled: true
       },
       series: [{
        name:'今年'
    },
    {
        name:'去年'
    }]
   });
}
   

后台

@RequestMapping("/queryCustNumTrend")
@ResponseBody
public CustNumListVO queryCustNumTrend() {
    logger.info("客户增长趋势查询");
    CustNumListVO vo = taxService.queryCustNumTrend();
    return vo;
}

返回的数据:

{"name":null,"yearList":[2015,2016],"oldlist":[],"nowlist":[{"channel":null,"month":"201603","year":null,"agentName":null,"agentId":null,"custTotalNum":1,"cnt":null},{"channel":null,"month":"201603","year":null,"agentName":null,"agentId":null,"custTotalNum":1,"cnt":null},{"channel":null,"month":"201604","year":null,"agentName":null,"agentId":null,"custTotalNum":4,"cnt":null},{"channel":null,"month":"201604","year":null,"agentName":null,"agentId":null,"custTotalNum":3,"cnt":null},{"channel":null,"month":"201605","year":null,"agentName":null,"agentId":null,"custTotalNum":2,"cnt":null},{"channel":null,"month":"201605","year":null,"agentName":null,"agentId":null,"custTotalNum":2,"cnt":null}]}


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值