文章主要针对hightcharts的数据格式
防止遗忘各个highcharts的数据传输格式
啥也不说,上代码
//该方法为显示为折线图 //data:元素为json对象的数组[{name:名称,data:[12条数据(对应12月份)的数组]},{},{}] // 如 [{ // name: 'Tokyo', // data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6] // }, { // name: 'London', // data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8] // }] function showLine(data, year,status,big_type_name) { chart = new Highcharts.Chart({ chart : { renderTo : 'container', }, title: { text: year+big_type_name+'年视频月浏览量趋势图', x: -20 //center }, credits:{ enabled:false }, xAxis: { categories: ['一月', '二月', '三月', '四月', '五月', '六月','七月', '八月', '九月', '十月', '十一月', '十二月'] }, yAxis: { title: { text: '浏览量 (/人次)' }, plotLines: [{ value: 0, width: 1, color: '#808080' }] }, tooltip: { valueSuffix: '人次' }, legend: { layout: 'vertical', align: 'right', verticalAlign: 'middle', borderWidth: 0 }, plotOptions : { line : { allowPointSelect : true, cursor : 'pointer', //添加点击事件 events : { click :function (e){ if(status==1){ showTendency(year, this.name,status); } } } } }, series: data }); }
接收后端数据
function showTendency(year,big_type_name,status) { $.ajax({ url : "getLineFromWatchedByYearAndBig_Type.do", dataType : "json", cache : true, type : "POST", data : {"year":year,"font_big_type_name":big_type_name}, async : true, success : function(data) { //定义一个数组 //data是后端传回一个List<Map<>> ,由于在后端排好格式,所以可以再前端直接传给highcharts if(!big_type_name==""){ status="0"; } showLine(data, year,status,big_type_name); }, error : function() { alert("error"); } }); }后端代码
List<Map<String,Object>> listRes=new ArrayList<>(); Map<String, Object> mapRes=new HashMap<>(); //name为每条折线名称 mapRes.put("name", name); //arr是int[12] mapRes.put("data", arr); //mapRes可以有很多个 listRes.add(mapRes); System.out.println(listRes); return listRes;//返回结果一定要是json格式,如果用spring框架就在方法上加@ResponseBody注解
