highcharts相对全面(1)折线

来源：互联网发布：后缀date域名编辑：程序博客网时间：2024/06/15 10:35

文章主要针对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<>> ,由于在后端排好格式,所以可以再前端直接传给highchartsif(!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注解

阅读全文

0 0