`
747017186
  • 浏览: 317926 次
社区版块
存档分类
最新评论

highcharts加载多条曲线数据

    博客分类：
  • js
 
阅读更多

以前做过highcharts生成曲线图的功能，但是那只是知道固定的X轴和Y轴固定的。只有一对，所以传过来的数据比较好处理。但是如果有多个Y轴数据呢？我们改如何处理？这就需要highcharts动态生成曲线图。

看代码：

后台代码：

写道
/**
* charts的生成
* @return
*/
@RequestMapping("charts")
public String charts(Model model){
String x="\"field0\":\"1\",\"2\",\"3\",\"4\",\"5\",\"6\",\"7\",\"8\",\"9\",\"10\",\"11\",\"12\"";
String ys="\"field1\":\"88\",\"59\",\"57\",\"58\",\"56\",\"54\",\"79\",\"51\",\"76\",\"87\",\"56\",\"74\";"
+ "\"field2\":\"23\",\"45\",\"25\",\"12\",\"67\",\"90\",\"56\",\"34\",\"56\",\"12\",\"23\",\"44\";"
+ "\"field3\":\"65\",\"23\",\"12\",\"11\",\"10\",\"3\",\"1\",\"34\",\"21\",\"22\",\"67\",\"99\";";

model.addAttribute("x", x);
model.addAttribute("ys", ys);
return "/empfile/emp2";
}

 通过把x轴的数据和Y轴的数据，放到页面上。

 

前台页面：

引入jQuery和highcharts.js这个引入就可以了。

 

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../../static/lib/jquery/jquery-1.11.2.min.js"></script>
<title>Insert title here</title>
<script type="text/javascript">
$(document).ready(function(){
	  alert("jquery正常工作");
});

$(function () {
	var x='<%=request.getAttribute("x")%>';//接收从后台传的x数据
	x=x.split(":")[1];//取出x数组
	x=x.replace(/\"/g,"");//去掉双引号
	x=x.split(",");//拆分出数组
	
	var ys='<%=request.getAttribute("ys")%>';//接收从后台传的y数据
	ys=ys.split(";");//取出有多少个y轴数据
	
	//曲线展示区域代码
    $('#container').highcharts({
    	chart: {
            type: 'line'
        },
        title: {
            text: 'Monthly Average Temperature',
            x: -20 //center
        },
        subtitle: {
            text: 'Source: WorldClimate.com',
            x: -20
        },
        xAxis: {
            categories:x
        },
        yAxis: {
            title: {
                text: 'Temperature (°C)'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
            valueSuffix: '°C'
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            borderWidth: 0
        }
    });
    
	for(var m=0;m<ys.length;m++){
		var y=ys[m].replace(/\"/g,"");//先取出所有的双引号
		var name=y.split(":")[0];//取出y轴的名字，也就是filed字段的名字
		y=y.split(":")[1];//取出y轴数组
		y=y.split(",");
		
		var array=new Array();//保证y轴的数组必须是数字数组
		for(var i=0;i<y.length;i++){
			array.push(parseInt(y[i]));
		}
		
		//填充Series序列数组
		$('#container').highcharts().addSeries({//
			name:name,
			data:array
		});
	}
	
// 	$('#container').highcharts().addSeries({
// 		name:'fffffff',
// 		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]
// 	});
	
// 	$('#container').highcharts().addSeries({
// 		name:'ggggggggg',
// 		data:[3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 50]
// 	});
	
    alert( $('#container').highcharts().series[0].name);
    alert( $('#container').highcharts().series[0].data);
});
</script>
</head>
<body>
<div>${x}</div><br>
<div>${ys}</div>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
	
</body>
<script src="../../static/highcharts.js"></script>
</html>

 核心方法就是addSeries，其他的很简单。主要注意的是Y轴传的数组一定要是数字数组。X轴只要是数组就可以了。

 

 

分享到：
| C标签的两种展示方法
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics