highcharts相对全面(1)折线

最新推荐文章于 2024-04-18 11:03:22 发布

凯凯打蛋

最新推荐文章于 2024-04-18 11:03:22 发布

阅读量189

点赞数

分类专栏： highcharts 文章标签： highcharts

本文链接：https://blog.csdn.net/weixin_39422362/article/details/74995436

版权

highcharts 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文章主要针对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注解