highcharts加载多条曲线数据

最新推荐文章于 2018-12-08 16:53:54 发布

jhhuang4836

最新推荐文章于 2018-12-08 16:53:54 发布

阅读量678

点赞数

分类专栏： js 文章标签： javascript java ViewUI

本文链接：https://blog.csdn.net/jhhuang4836/article/details/84708931

版权

js 专栏收录该内容

62 篇文章 0 订阅

订阅专栏

本文介绍了如何使用Highcharts在JavaScript环境下处理多条Y轴数据，生成动态曲线图。通过后台提供X轴和多个Y轴数据，利用Highcharts的addSeries方法动态绘制图表。关键在于确保Y轴数据为数字数组，而X轴数据只需为数组即可。

摘要由CSDN通过智能技术生成

以前做过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轴只要是数组就可以了。