java layui 实现从后台获取数据并画图chart

1.画图控件

<div class="layui-form-item"
		style="width: 100%; height: 100%; margin: 0">
		<div class="layui-inline"
			style="width: 100%; height: 650px; margin: 0">
			<div id="container" style="width: 100%; height: 100%; margin: 0 auto"></div>//画图控件
</div>
</div>

2.js
请求数据

var datas=0;
layui.use([ 'jquery' ], function() {
	var $ = layui.jquery;
	console.log("结果图");
	//编码json	
	$.ajax({
	type : 'POST',
	url :   '../outcome',
	data : {
		 
	},
	dataType: "json",
	success : function(data) {
		//datas=data.data;换了框架就不适合了
		datas=data;
	 console.log(datas);
		 miaodian(datas);
		layui.use('layer', function(){
			  var layer = layui.layer;
			  
			 // layer.alert('成果图完毕', {icon: 1});
			});  
			
	}
 

根据data画图的方法

function miaodian(datas){
	  $(document).ready(function() {  
		   var chart = {
		      type: 'area'
		   };
		   var title = {
		      text: 'NPV和约束值随着迭代次数变化的情况'   
		   };
		   var subtitle = {
		      text: '' 
		   };
		   var xAxis = {
				   categories:datas[0]
		   };
		   var yAxis = {
		      title: {
		         text: 'Npv和约束值'
		      },
		      labels: {
		         formatter: function () {
		            return this.value  ;
		         }
		      }
		   };
		   var tooltip = {
		      pointFormat: '{series.name} is <b>{point.y:,.0f}</b><br/> in the {point.x} time'
		   };
		   var plotOptions = {
		      area: {
		         pointStart: 0,
		         marker: {
		            enabled: false,
		            symbol: 'circle',
		            radius: 2,
		            states: {
		               hover: {
		                 enabled: true
		               }
		            }
		         }
		      }
		   };
		   var series= [{
		         name: 'NPV',
		            data:datas[1]
		        }, {
		            name: '约束值',
		            data: datas[2]
		      }
		   ];     
		      
		   var json = {};   
		   json.chart = chart; 
		   json.title = title;   
		   json.subtitle = subtitle; 
		   json.tooltip = tooltip;
		   json.xAxis = xAxis;
		   json.yAxis = yAxis;  
		   json.series = series;
		   json.plotOptions = plotOptions;
		   $('#container').highcharts(json);//绑定控件
		  
		});}

3.后台
获取data

@RequestMapping("outcome")
	public ArrayList Opt()  throws JsonParseException, JsonMappingException, IOException   {
		//这个是柱状图的data
		ArrayList<Object> data = new ArrayList<Object>();
		ArrayList<Double> times = new ArrayList<Double>();
		ArrayList<Double> npv = new ArrayList<Double>();
		ArrayList<Double> ysz = new ArrayList<Double>();
		//读项目名，前台获取不到。
		Scanner scanners = new Scanner(new FileInputStream("D:\\Injection_production_optimization\\optpar.dat"),"GBK") ;
		scanners.next();scanners.next();
		String itemname = scanners.next();
		System.out.println("打开NPV结果文件.........."  );
		//从数据库获取数据
		String npvfile = "D:\\Injection_production_optimization\\RunItem\\"+itemname+"\\result\\NPV.txt";
		Scanner scanner = new Scanner(new FileInputStream(npvfile),"GBK") ;
		int a = 0;
		double b,c,d,e;
		while(scanner.hasNext()){
			// String[] as = null;
			//as[a++] = scanner.next();一个一个加
			times.add(Double.parseDouble(scanner.next()) );
			npv.add(Double.parseDouble(scanner.next()) );
			ysz.add(Double.parseDouble(scanner.next()) );


		}
		//直接加对象，集合里套集合

		data.add(times);
		data.add(npv);

		data.add(ysz);

		System.out.println(data.toString());
		return data;
	}