hightcharts中的柱形图，折线图的动态传递参数

demo链接：https://github.com/hehaoxiang/SpringBootPractice.git
折线图链接：https://www.highcharts.com.cn/demo/highcharts/spline-symbols

柱形图链接：https://www.highcharts.com.cn/demo/highcharts/column-negative

可以在highcharts官网中找到相应的html和JavaScript代码，然后把对应的参数修改如下就可以传参了。

html页面的代码

//应用highcharts官网中的各种图形
//middle为html页面为该图形定义的div的ID值	      
//折线图   	
<div id="left" class="middle"></div>
 <div id="center" class="right"></div>
<script th:inline="javascript">
        //接收后台传来的数据
		/*<![CDATA[*/			
			var thyarg_one= [[${one}]]  ;
			var thyarg_one_value= [[${one_value}]]  ;	
			var thyarg_two = [[${two}]]  ;
			var thyarg_two_value = [[${two_value}]]  
			var thyarg_x = [[${x}]]  ;//x轴的数据
		/*]]>*/
var chart = Highcharts.chart('middle', {
			//动态传递参数给x轴
			xAxis: {
				categories:thyarg_x
		     },
		     //动态传递值
			series : [
					{
						name : thyarg_one,
						data : thyarg_one_value
					}, 
					{
						name : thyarg_two,
						data :thyarg_two_value
					},  ]
		});
//柱形图
var chart4 = Highcharts.chart('right',{
		xAxis: {
				categories:thyarg_x
		},
		series: [{
				name : thyarg_one,
				data : thyarg_two_value 
		}]
});
	</script>
</body>
</html>

后台代码

package com.example.demo.controller;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import org.springframework.beans.factory.annotation.Autowired;
/*在pom.xml添加 关联Oracle数据库
<dependency>
<groupId>com.oracle</groupId>
<artifactId>ojdbc6</artifactId>
<version>11.2.0.3</version>
</dependency>
*/
import org.springframework.jdbc.datasource.DriverManagerDataSource;
import org.springframework.jdbc.core.JdbcTemplate;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
@Controller	

public class EcardSum {

	//依赖注入
	@Autowired
	JdbcTemplate jdbcTemplate;
	//当执行时,输入路径test时，就会执行下面的testJ这个方法
	@GetMapping("/test")
	 public String testJ(String a,Model model) {
      //gxl,创建数据库的连接
		DriverManagerDataSource dataSource=new DriverManagerDataSource();
        dataSource.setDriverClassName("oracle.jdbc.driver.OracleDriver");
        dataSource.setUrl("jdbc:oracle:thin:@ (DESCRIPTION =  (ADDRESS_LIST = (ADDRESS = (PROTOCOL = TCP)(HOST = xx.xxx.xxx.xx)(PORT = 1521))  ) (CONNECT_DATA = (SERVICE_NAME = pdb_test) ) )");
        dataSource.setUsername("gxl");
        dataSource.setPassword("gxl");
        JdbcTemplate jdbcTemplate=new JdbcTemplate(dataSource);
        String sql6 = "\r\n" + 
				"select sum（b.ext11) je,trunc(b.opertime) rq from si_balance b , opr_register a where b.regid= a.regid\r\n" + 
				"and a.qrflag='1' group by trunc(b.opertime)";		
					 Map map6 = new HashMap();
					List<Map<String, Object>> listMap2 =  jdbcTemplate.queryForList(sql6);	
					 List listValue_ext1 = new ArrayList();
					 List listValue_Eval1 = new ArrayList();
					 for(int i=0;i<listMap2.size()  ;i++)
					 {
						 map6 = listMap2.get(i) ;  
						 listValue_Eval1.add( map6.get("je"));
						 listValue_ext1.add( map6.get("rq"));
					 }
					
					 model.addAttribute("one_value",listValue_ext1);
					 model.addAttribute("two_value",listValue_Eval1);
        //test为自己写的html页面名称，返回的是一个页面
        return "test";
        }