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:'去年'

}]

});

}

后台

/**

* 查询税务报表两年客户增长趋势

*

* @return

*/

@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}]}